May 29, 2024

Working with figma on the iPad Pro

After initially being underwhelmed with Apple’s M4 iPad announcement, I decided to replace my 13” six-year-old iPad Pro with a new 11” iPad Pro based on positive reviews. When I bought the 2018 iPad Pro, I hoped it would evolve into a highly capable machine, potentially replacing my need for a Mac. Unfortunately, this didn’t materialize. It was great, but as others have mentioned, the iPad remains limited even today. Over time, I reframed my view of the iPad as a great companion device. However, in reality, I rarely traveled with my 13” Pro alongside my MacBook Pro; it felt like packing two laptops.

I’ll save reviewing the device itself for the pros, other than noting the stunning OLED display and overall finish of the device. I chose the silver/white model this time and have no regrets. A smaller bezel would be welcome, though!

The iPad is a great companion device for most of my daily tasks: Slack, email, slide decks, and general communication. However, there are times when I still need my MacBook. For example, did you know iPads can’t open DMG files?

My setup

I’ve managed to get a setup I’m pretty comfortable with and even enjoy working with as an alternative to a MacBook Pro. It consists of the following:

Stage manager

Although Stage Manager has been out for some time now, my previous iPad lacked this option, so I had no experience with it. I find it a joy to use, especially when using an external display. There are definitely some oddities, particularly around duplicate windows from one app, but the grouping concept and window positioning feel very natural to me.

Setting Up Figma on iPad

This is definitely more painful than it should be. On macOS, I exclusively use Figma’s app, but unfortunately, they don’t offer a functional app for iPadOS. Initially, I started using Figma within Safari. It wasn’t ideal, but it worked fine. I noticed some missing font warnings from within Figma. At Tines, we use system defaults in-product and design with SF Pro, which I needed to install.

Custom fonts on iPad

Back when I was exclusively an iOS designer, I used an app called Anyfont — a hacky way to get custom fonts onto iOS using configuration profiles. Sadly, in 2024, this remains the only way to get custom fonts on your iPhone or iPad. All I needed were the SF Pro OTF files, and I thought I was ready to go.

But Apple only provides them via a DMG, which the iPad cannot open. So, I briefly hopped over to my MacBook, extracted the source files onto iCloud Drive, and then added them via Anyfont on the iPad. After that tedious process, I opened a recent design in Figma, only to find I was still missing fonts!

Unfortunately, I then learned that Figma can’t access local fonts on an iPad, and they recommend using Google Fonts instead 🤯. Not keen on changing our entire product’s typography for my desire to work on an iPad, I looked for another approach and found Figurative, a third-party ‘viewer/browser’ for Figma that can access custom fonts.

Figma Creator Micro

After the initial hiccups, this setup is working pretty well. One requirement I found is the Figma Creator Micro from Worklouder for an easy way to zoom the canvas, as cmd-scroll won’t work on the iPad. I’ve also programmed useful shortcuts for my workflow, and the zoom wheel and undo/redo knob are lovely ways to work.

Lastly, and not Figma related, the Apple Pencil Pro feels like magic.