Skip to main content

How can I import Figma designs into Pencil?

Import Figma designs straight into Pencil by pasting a section link. No plugin required.

Written by Michael Whyle

How can I import Figma designs into Pencil?

Pencil imports Figma designs natively. You paste a link to a Figma section, and Pencil brings it in as a work or a reusable template with its layers intact. There is no plugin to install and no file to export first.

Native Figma import is in open beta. Some designs may need a little tidying up after import. It is set to become generally available soon.

Do I need the Pencil Figma plugin?

No. Import works from a Figma link.

The earlier Figma plugin and its .pencil files are no longer the recommended path and no longer receive updates. Anything you already imported with the plugin is unaffected and keeps working.

Do I need to turn anything on first?

Yes. A workspace admin turns on Figma Import in Settings, under Beta features. Once it is on, everyone in the workspace can import from Figma. Changes can take up to a minute to appear, so refresh your browser if you do not see them.

Turning it on adds the Import Figma file option when you create works and templates, and it lets you connect your Figma account. An admin can turn it off again at any time. Anything you have already imported stays where it is, and your Figma connection stays in place.

Connecting your Figma account

Pencil reads your design through Figma's API using your own Figma authorisation, so you connect your account before your first import. Nothing is downloaded from Figma and nothing is uploaded to Pencil.

Where to connect. Go to Settings, open Integrations, find the Figma card and click Connect. If you start an import before connecting, Pencil prompts you and takes you straight there.

Any role can connect. Once an admin has turned on Figma Import, you can connect your account whatever your role. Connecting does not need admin rights.

One connection per person. Your connection is yours alone, so each colleague connects their own Figma account. Any number of people can hold their own connection in the same workspace.

One workspace at a time. You can hold an active Figma connection in a single Pencil workspace. When you connect in a second workspace, Figma revokes the first, so coming back to the earlier workspace means connecting again. You do not need to disconnect anything first. If an import fails for this reason, Pencil tells you the connection has dropped and points you back to Integrations.

Use your organisation's Figma account where you can. Figma applies rate limits to free accounts, which can interrupt importing. On a paid Figma plan you should not run into them.

How do I import a Figma design into Pencil?

Copy the section link in Figma. Right-click the section you want and choose Copy link. Pencil imports one section at a time, so pick the section you need even where the file holds several others. A link to a single frame or to a whole file returns an error.

Start the import in Pencil. In the Files Library, open either the Works or Templates tab, depending on whether you want the design to land as a work or a reusable template. Use the New button and choose Import Figma file.

Paste the link. Paste your Figma link into the Import from Figma dialog and click Import. Pencil checks the link, then shows progress while it reads your design.

Review before it lands. A review step opens before anything commits, listing what Pencil found and flagging anything worth a look, grouped by type. Confirm to bring the design in, or cancel to stop without changing anything.

You can graduate a work to a reusable template at any time using the Create Template option in the three-dots menu on the work.

How does my design arrive in Pencil?

Sections become templates or works. The section you linked comes in as one item in your library.

Frames become formats. Each frame inside the section arrives as its own format, so a section holding a one-by-one, a nine-by-sixteen and a sixteen-by-nine gives you a three-format creative.

Layers stay editable. Layers come across as layers, including those nested inside groups and frames, so text remains text and shapes remain shapes. A few grouped cases flatten to a single image instead, and the section below covers them.

Masks. Pencil reads masks as Figma defines them and applies each mask to the layers it covers. Pencil flags deeply nested masks at the review step. A mask on a group itself behaves differently: Pencil flattens that group to a single image.

Hidden layers. Hidden layers are imported and stay hidden. Toggle them on in the editor whenever you need them.

How should I prepare my Figma file?

The direct import asks less of you than the plugin did. Pencil reads groups and auto layout for itself, so you can leave both in place. Five things are worth a look before you import.

Sections. Pencil imports a section, so the design you want needs to sit inside one.

Matching layer names. Pencil identifies the same layer across your formats by its Figma layer name. Give a layer the same name in every frame of the section where you want to edit it everywhere at once with the Edit-all toggle on. Where the names differ, Pencil treats them as separate layers and your edit does not carry across. Photoshop import works the same way.

Effects on groups. Where an effect, blend mode, rotation or mask sits on the group itself, Pencil flattens the whole group to a single image, and any text inside stops being editable. Ungroup it, or move the effect onto the individual layer, to keep that text editable.

Image-only groups. Pencil merges a group holding only images into a single image. That suits a logo lockup. It does not suit images you want to swap out individually, so keep those ungrouped.

Auto layout. Leave it in place. Pencil resolves auto layout to fixed positions, so your design arrives correctly positioned. Watch one case: where an auto-layout frame has Clip content switched on and anything inside overflows its edge, Pencil flattens that whole frame to a single image. Check this first if part of your design comes in flat.

Everything else can stay grouped as it is.

Fonts

Pencil matches each text layer to a font in your Brand Library by name. Where a layer's font is not found, the import applies a fallback in place of the original typeface, so upload the fonts used in your design to your Brand Library before you import.

Matching the name. The name Pencil looks for is the font name shown on the text layer in Figma. Match it as closely as you can, including capitalisation and any punctuation or spacing inside the name.

Close variants. Weights, widths and optical sizes each arrive as their own font file, even where the family name looks similar. A layer set in Poppins-SemiBold is not covered by uploading Poppins-Bold. Check the name in Figma before you upload.

Variable fonts. The Pencil editor cannot render variable fonts, so a text layer set in a variable font does not display correctly after import. Use a static font file instead. There is more on this in using font files.

If a font you have uploaded is not applying, or text shifts position after import, contact support so we can look at your file.

Why is my import taking a while?

Import time follows the complexity of your design, so the more sections and frames it holds, the longer it takes. There is no fixed size limit, though a very heavy section can time out on Figma's side under load. If that happens, split the design into smaller sections and import them separately.

Can I export from Pencil back into Figma?

No, as the integration runs in only one direction. You can, however, take a creative out of Pencil and keep working on it in Photoshop by exporting it as a layered PSD.


Did this answer your question?