Import from Figma

Import from Figma

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

To import your Figma files into Fable, you'll need to use the Fable Figma Plugin.

Accessing the plugin

  1. Fable Project Dashboard: Select Paste from Figma in the "Getting Started with Fable" toolbar at the top of the Fable project dashboard.

  2. Fable Export in Figma Community: Click Open in Figma to open the plugin in a new or existing file.

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

Using the plugin

  1. Select layers or frames: You can transfer any number of shapes, groups, frames, or components from Figma–the plugin will show how many you have selected.

  2. Click Copy: Look for "Copied to clipboard" at the bottom of the Figma window.

  3. Paste into Fable: Open a Fable project and press V to paste. Fully editable layers will appear in the Layer List.

Plugin options

The top right corner of the plugin offers a list of additional configurations.

  • Text to outlines: Turns Figma text layers into outlined shapes; this ensures your designs appear the same in both Fable and Figma. (Text to outlines is the default setting.)

    • To keep layers editable, uncheck "Text to outlines" in the plugin settings–Fable will replicate the text size, font details, content, and color from Figma.

  • Export frames as PNGs: Simplify the layer list by importing Figma frames as flattened images. Useful for frames you've copied as individual shapes filled with respective images.

Note: If you use a Figma text layer with a feature or value not supported by Fable, it will replace it with its default setting. For instance, if your Figma text has a custom font, Fable won't recreate it with that custom font.

To import your Figma files into Fable, you'll need to use the Fable Figma Plugin.

Accessing the plugin

  1. Fable Project Dashboard: Select Paste from Figma in the "Getting Started with Fable" toolbar at the top of the Fable project dashboard.

  2. Fable Export in Figma Community: Click Open in Figma to open the plugin in a new or existing file.

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

Using the plugin

  1. Select layers or frames: You can transfer any number of shapes, groups, frames, or components from Figma–the plugin will show how many you have selected.

  2. Click Copy: Look for "Copied to clipboard" at the bottom of the Figma window.

  3. Paste into Fable: Open a Fable project and press V to paste. Fully editable layers will appear in the Layer List.

Plugin options

The top right corner of the plugin offers a list of additional configurations.

  • Text to outlines: Turns Figma text layers into outlined shapes; this ensures your designs appear the same in both Fable and Figma. (Text to outlines is the default setting.)

    • To keep layers editable, uncheck "Text to outlines" in the plugin settings–Fable will replicate the text size, font details, content, and color from Figma.

  • Export frames as PNGs: Simplify the layer list by importing Figma frames as flattened images. Useful for frames you've copied as individual shapes filled with respective images.

Note: If you use a Figma text layer with a feature or value not supported by Fable, it will replace it with its default setting. For instance, if your Figma text has a custom font, Fable won't recreate it with that custom font.

To import your Figma files into Fable, you'll need to use the Fable Figma Plugin.

Accessing the plugin

  1. Fable Project Dashboard: Select Paste from Figma in the "Getting Started with Fable" toolbar at the top of the Fable project dashboard.

  2. Fable Export in Figma Community: Click Open in Figma to open the plugin in a new or existing file.

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

Using the plugin

  1. Select layers or frames: You can transfer any number of shapes, groups, frames, or components from Figma–the plugin will show how many you have selected.

  2. Click Copy: Look for "Copied to clipboard" at the bottom of the Figma window.

  3. Paste into Fable: Open a Fable project and press V to paste. Fully editable layers will appear in the Layer List.

Plugin options

The top right corner of the plugin offers a list of additional configurations.

  • Text to outlines: Turns Figma text layers into outlined shapes; this ensures your designs appear the same in both Fable and Figma. (Text to outlines is the default setting.)

    • To keep layers editable, uncheck "Text to outlines" in the plugin settings–Fable will replicate the text size, font details, content, and color from Figma.

  • Export frames as PNGs: Simplify the layer list by importing Figma frames as flattened images. Useful for frames you've copied as individual shapes filled with respective images.

Note: If you use a Figma text layer with a feature or value not supported by Fable, it will replace it with its default setting. For instance, if your Figma text has a custom font, Fable won't recreate it with that custom font.