What testing Pencil Pal in Figurative looked like.

Using Figma With Apple Pencil

Last update: Jan. 25, 2021. I’ve updated this article to describe the state of Apple Pencil with Figma/Figurative and iPadOS 14.4.

With iPadOS 14.4, it is quite possible to use Apple Pencil with Figma via Figurative, an iOS app that supports Apple Pencil as an input device. This article covers what I’ve learned and some of the workarounds you’ll need to employ to improve performance.

In my latest testing, performance appears to have gotten progressively better from 14.0 to 14.4, to the point where using Apple Pencil is performant enough for general sketching and writing use, in my testing.

If you still happen to be on iPadOS 13.7, I recommend you stay on iPadOS 13.7 if Figma + Apple Pencil is a key design workflow for you, or if you want to do performant, detailed sketching. In iPadOS 13.7, Apple Pencil had nearly zero latency in Figurative when it came to illustration and writing.

However, for many people (e.g. those with new iPads) using 13.7 won’t be feasible. In iPadOS 14.4, it does show a bit of latency when the pencil moves very quickly, some points will seem to drop out. Once you lift the pencil, those jagged lines will be smoothed out. For precise drawing detail, you’ll need to slow down the pencil’s movement speed just a little.

Feel free to read the rest of this if you want more info on my plugin (which helps with using Apple Pencil on iPad Pro) and on Figurative. But if you just want to jump into it, here are some things that seem to reduce pencil latency and/or improve usability:

It Starts With Figurative

In iPadOS 14.4, the Apple Pencil 2 will fail if you try in any browser (Safari, Chrome for iPad, etc.) Don’t even bother. Get Figurative.

Figurative treats the Apple Pencil 2 as an input device. Tap to click and drag to resize. It’s very intuitive.

A menu of frequently used commands sits in the lower corner of the app. Having commands such as “Delete” and “Duplicate” easily accessible is very useful for pencil users.

Because iPadOS supports multiple keyboard types, consider using the compact one when using Figurative. Even better, use dictation if your environment allows. This will make typing in text faster.

Figurative seems to know the difference between the Apple Pencil and your fingers, so you can pan and zoom, then use the Apple Pencil to draw and edit. Like other iPad apps, it does a pretty good job at palm canceling.

However, to actually draw freehand in Figurative—that requires Figma’s pencil tool. You can draw lines and shapes fairly easily. Figma even applies a smoothing effect to a line once you stop drawing, which is nice. Line corners are rounded by default, so drawings look like, well, drawings.

When moving the Apple Pencil very quickly, you may see some touchpoints drop, resulting in smoothed out scribbles that may lose their intended level of detail. This limits Figurative’s ability as a “workhouse” illustrator tool compared to dedicated drawing apps in the App Store. That said, for rough sketching, light note-taking and general-purpose drawing (e.g. breadboarding), the Apple Pencil will get the job done for the most part. Is it perfect in terms of latency? No. Does it work well enough? In my opinion, once you upgrade to 14.4, yes!

After a while, you’ll hit a frustration point: The default line is set to 1px black. To change the pencil style, you have to draw a line, select it, and edit the style in the attributes panel.

For those used to using the Apple Pencil in other apps, in which you can just switch tools or colors in a single tap, this will drive you batty.

Pencil Pal

As a designer who knew juuust enough JavaScript to be dangerous, I wanted to see if I could set the stroke color, weight and opacity of Figma’s pencil tool prior to drawing.

This was more tricky than I expected. Nothing in the Figma plugin API lets you set default properties for tools.

I won’t bore you with the technical details, but by figuring out how the pencil gets its drawing properties, I was able to create Pencil Pal. It’s still a work in progress, but for anyone who uses Figma’s pencil tool, it may prove useful.

In an amazing coincidence, it also works in Figurative 😉.

With Pencil Pal, you can set the color, stroke and alpha of the pencil tool prior to drawing. In addition, if you select a pencil-drawn object and then start the plugin, Pencil Pal will attempt to import that style for use.

You also have two palettes to choose from: the default “pal” set of 10 colors, and a second set with 10 styles you can customize (color, weight and alpha).

If styles don’t change right away, there’s a bit of disclaimer text you can tap to resync the plugin. (This manual resync addresses limitations in my attempt to manage the pencil’s properties).

Pencil Pal is designed to be tiny and not take up a lot of space. (It has some pretty tiny touch targets, but with an Apple Pencil, I hope it isn’t too bad.)

I would love to hear feedback on Pencil Pal. I built it mainly for myself but hopefully others can get some utility out of it as well.

Pencil Possibilities

With Pencil Pal, I now have the ability to use Figma as a bare-bones sketching tool. I can set a custom hex color or toggle to pick from 10 preset swatches or 10 custom swatches.

I don’t expect Figma’s pencil tool to replace the likes of Vectornator X or Concepts—and that’s perfectly fine with me. Illustration isn’t the primary use case for me when it comes to using Figma with Apple Pencil. Neither is doing conventional design work. I’m looking at some yet-to-be-explored use cases…

Woo! Look at that vector count.

Taking Notes: This is gonna sound goofy, but the impetus for coding Pencil Pal was to have something that would let me take handwritten notes in Figma while watching the videos and livestream events from WWDC20.

As long as you don’t write too quickly, note taking is pretty smooth in Figma. (If you write too quickly, sometimes the smoothing algorithm will smooth things out excessively.) If you’re someone who tracks resource use, you’ll see the object count spike like crazy as you take notes, but on an iPad Pro, it’s still pretty responsive.

One struggle is that you can’t dot your i’s or j’s. Taps don’t register as dots in Figma’s pencil tool, so I’ve gotten used to drawing short dashes instead.

Figurative supports finger gestures for undo/redo, which makes it easy to fix mistakes and redraw. I’ve gotten quite fast at removing errant strokes and fixing mistakes while drawing without ever leaving the pencil tool. The lower corner menu shortcuts also help keep you in “pencil” mode without slowing you down.

I also explored whether it would be possible to annotate and give design feedback with the pencil tool vs. a comment. After some testing, I settled on just taking screen shots of Figma work, marking up the image in Apple’s default image editor, then importing that image back into Figma. I hesitate to muck up a bunch of work-in-progress files with a bunch of unlayered vector nodes created by pencil.

Hand-drawn wireframe components and instances? The mind reels from the possibilities.

Breadboarding, Wireframe Sketches and Storyboarding: If you’re familiar with Basecamp’s Shape Up methodology, you’ll be aware of a technique known as breadboarding. I won’t bore you with the details, but I wanted to know if I could use Figma instead of the Notes app to do breadboarding.

The verdict? Absolutely.

By doing breadboarding in Figma, you can keep a design source of truth alongside your other project work. Thanks to version history, you can capture early sketches and thoughts to document the evolution of a feature or design.

In addition, you can combine this sketching technique with the comment tool or the use of sticky notes as components. Instant annotation!

The workflow around commenting is still a little glitchy in Figurative. You may need to tap the text field with your finger instead of your pencil to activate the soft keyboard, or stick in an emoji first.

I’ve also tested out wireframe sketching as well, and turning pencil-drawn objects into components. For those who’ve used a design tool called Balsamiq, this will bring back memories.

Storyboarding is also a great use case, especially if you do your design documentation in Figma.

I see a lot of potential here to create some innovative design workflows with the Apple Pencil. It’s no secret startups are trying to figure out ways to convert drawings into finished design. Now that you can draw more easily in Figma thanks to this set-up … what’s next?

Multiplayer Drawing, Workshop Activities and Plugins: Because my network of Figurative users who also use Apple Pencil is zero (for now), it’s been hard to test multiplayer drawing. I’m hoping there’ll be others out there who might want to test multiplayer drawing performance with Pencil Pal and Figurative.

Knowing that many use Figma to run remote workshops and activities, what cool stuff can you do with Apple Pencil? As a facilitator, could you run a training session with your desktop, then use the iPad as a second screen to annotate and sketch?

How might Apple Pencil affect the creation of new plugins? Again, lots of potential if Figurative + Apple Pencil gains traction within the broader Figma community.

Presentation & Prototype Controller: It takes some work, but in theory it’s possible to present a prototype and use a second device (e.g. an iPad) in editor mode to manipulate the prototype in real-time. Because plugins work in Figurative, you can write a plugin and run it off iPad. There are a ton of interesting use cases that arise from this, e.g. live presentations.

The Fine Print

Disclaimer: None of this set-up is “officially” supported by Figma. The company doesn’t support the iPad nor the Apple Pencil, so I don’t expect things to work 100 percent—but as far as I can tell, the important features work fine for the most part.

Based on my research, Figma seems cool (so far) with the community trying to forge ahead on iPad. In a recent video, CEO Dylan Field even commented on it briefly. (Interestingly, he even made mention of a tablet version of Figma that was due to launch way back in 2014.) In a recent Figma job posting, one of the “possible projects” was related to using Figma on tablets.

I’m excited to be one of those people trying this out. Like I said in my other article on using Figma with iPad Pro, I really think there is a future for design that’s purely tablet—no keyboard, no mouse. Just voice and pencil. Just like Sketch drove Mac sales for designers, Figma (via Figurative) may do the same for iPad Pro and Apple Pencil.

I wanted to close this article with a few tips that have helped me use Apple Pencil while testing the use cases above:

If you’re using Apple Pencil with Figurative, please let me know in the comments how it’s going, and if you are encountering any issues! Look for more updates to this article in the future.

If you want to learn more about Figma on iPad, here are my two other articles on the subject:

  • My interview with Figurative creator Matías Martínez—none of this is possible without this amazing app. I enjoyed learning what inspired him to create it in the first place.
  • This was my original Figma on iPad Pro survival guide. If you’re wanting an overview of what’s possible, it’s worth a read.

Nelson Taruc is the principal designer at Lextech, the Head of Product at LexGo, and the lead instructor at figmateamtraining.com.

Principal Designer at Lextech. Focus. Boost signal, kill noise. Solve the first problem. Embrace uncertainty.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store