What testing Pencil Pal in Figurative looked like.

Using Figma With Apple Pencil

Last update: June 18, 2021. I’ve updated this article to address the new pencil tool capabilities in Figma. Note: As a rule, I don’t write about software or iPadOS releases until they’re out of beta. As a result, you won’t see anything about FigJam in this article, but I encourage you to try out both Figma and the FigJam beta in Figurative!

With iPadOS 14.6, 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.

First, a little context: Way back in the days of iPadOS 13.7, Apple Pencil worked smoothly with near-zero latency. Then 14.0 came out and Apple Pencil performance degraded significantly. Things became progressively better from 14.0 to 14.4, and with the release of 14.5, I’m excited to announce that my early testing seems to make Apple Pencil great once again!

Apple Pencil performance has reached the point where you can do performant, detailed sketching, with near-zero latency in Figurative for illustration and writing.

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.

It Starts With Figurative

In iPadOS 14.6, the Apple Pencil 2 will fail if you try in Safari.

As of iPadOS 14.5, Apple Pencil appears to work great for the latest version of Chrome for iPad as well. So there is a second option available now.

All that said, Figurative is my personal favorite.

Figurative treats the Apple Pencil 2 as an input device. Tap to click and drag to move and 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.

To maximize your drawing real estate, consider making one of your commands “Show/Hide UI” for a clean drawing slate.

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.

In June of 2021, Figma upgraded the pencil tool panel to offer additional functionality. This makes using Apple Pencil even easier than before.

I’m not sure why the link to the pencil tweet includes the previous item as well.

Pencil Pal

Prior to the June 2021 upgrade, I created a Figma plugin to assist with support for the pencil tools. It’s now a bit obsolete given the new feature added by Figma, but it is still useful for the following reasons:

  • The plugin takes up less space than the current default panel, and works even if you need to hide the UI
  • Unlike the default panel, you can move the plugin around while drawing
  • It has extra capabilities such as the color picker

In my initial testing, it appears that the plugin is mostly compatible with the new default panel. Changes in the panel appear in the plugin in vice versa.

Below is the original text that was here before June 2021.

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.

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?

With the introduction of FigJam (currently in beta), this use case becomes a lot more compelling.

How might Apple Pencil affect the creation of new plugins? 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.

Although this review assumes you don’t have a Mac, Sidecar is a nifty feature that extends your screen real estate for managing multiple Figma windows. (I’ve heard reports from other Figma users that Apple Pencil performance works much better when using the iPad in Sidecar mode. That said, this article is focused on those who want to cut the cord entirely.)

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:

  1. Creating components lets you quickly reuse sketches. I find myself doing this by habit if I know I need more than one of an item I’m about to draw. (I’m sure someone will publish a hand-drawn design system at some point thanks to Figurative).
  2. For those using Pencil Pal, it works best when you draw directly on the background canvas rather than in frames. I leave frames for finished work only. You can easily move your drawings into frames later. Personally, I like to not be constrained by arbitrary borders and let my drawings/notes flow in whichever direction I prefer.
  3. I found a technique where you can select and lock an object with the Apple Pencil, then use your fingers to move the canvas. This creates some interesting ways to manipulate objects in a drawing.

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