Skip to Content

Fable and Figma

OVERVIEW

Our Figma integration lets you quickly ingest your fully-editable layers without ever leaving the browser

Accessing the plugin

Option 1

Open Fable Export on Figma Community and click the Try it out button in the top-right corner. The Fable plugin will open in a new file.

Fable x Figma

Figma Community page

Option 2

Open Resources panel from the Figma toolbar, search "Fable" and click Run. The Fable plugin will open in the current file.

Search for Fable in the Resource panel

Using the plugin

Select desired layers or frames

You can transfer as many shapes, groups, frames, or components as you’d like to Fable — the plugin will display how many you have selected.

Copy from Figma

Click Copy

Check for "Copied to clipboard" message. It should appear on the bottom of your Figma window.

Confirm it's copied

Paste into Fable

Open a Fable project and press ⌘V on your keyboard to paste. All your copied layers will appear in the layer list in the timeline panel. The layers are fully editable, so you can easily change their color, position, shape, etc. directly.

Plugin options

In the top right corner of the plugin, there is a list of options you can use for additional configurability.

Screenshot of the Fable plugin for figma

Text to outlines

The Fable plugin turns Figma text layers into outlined shapes by default. This ensures your designs appear the same in both Fable and Figma. However, if you need to keep text layers editable, uncheck this option on the plugin settings.

With this option unchecked, Fable replicates the text size, font details, content, and color from Figma. But if a Figma text layer uses an unsupported feature or value, Fable substitutes its own default setting.

For example, if you attempt to import a Figma text layer that has a custom font applied, Fable will not create a text layer with the custom font.

Export frames as PNGs

Sometimes, you may want to simplify the layer list in your project by importing Figma frames as flattened images. Use the "Export frames as PNGs" option to import frames you've copied as individual shapes filled with the respective image.