Importing from Figma

Importing your work from Figma is as easy as pasting your project link into Framer. But there are a few things to keep in mind once your work is imported.

Design tools support different features, which means you may need to do a bit of clean-up once everything is imported. Most of this clean-up will be around changing the way your UI elements are composed. Keep reading to learn more.

Feature Support

When you import a Figma project, Framer will try to convert Figma’s frames, shapes, text, and other layers into the corresponding Framer layers. The importer will get these conversions 90% there, but you may need to tweak your designs manually to use Frames and Stacks. Re-composing your designs with Frames in Framer has more value in the long run. Frames support more elaborate layout features like Auto Size, fractional widths, and are native to the web.

While Framer fully supports most of Figma's features, you may find that certain features do not import correctly. Below is a list of features that are either partially supported or not yet supported.

Partially supported:

  • Rotation
  • Figma colors
  • Image fill properties
  • Text with multiple styles
  • Vector strokes
  • Vector image fills
  • Vector stroke location

Not yet supported:

  • Multiple fills
  • Blend modes
  • Image fill rotation
  • Diamond gradients
  • Angular gradients
  • Masks
  • Image fills on text
  • Gradient fills on text

Slow importing

Your files in Figma might be pretty big, containing lots of assets and screens. This can make importing a bit sluggish. So, we recommend you copy your designs to a new page, and import from there. As you’ll need less screens on the Framer side to express the same states, it’s better that you import smaller pieces of your designs that you can make interactive, and then re-compose in Framer. You should never need to start from scratch. Only import the layers you need.

Components

Every design tool has a different concept for components, and as they become more elaborate, they begin to diverge, meaning a Figma component can’t be imported into Framer and behave in the same way. For this reason, we import components as regular layers. You can re-compose these layers into a component on the Framer side, make it interactive as a Smart Component, and then use it in a prototype.

Does your file include any Figma components from a shared library? If so, please unlink these components before importing.

Authenticating

The first time you open the Figma Importer, it will ask you to authenticate with Figma. Click Authenticate to visit Figma's authentication page. Click Allow Access to authenticate and return to your Framer project.

Importing

Once you've authenticated, visit the Figma project that you'd like to import from and copy that page's URL.

To import a Figma project from the Editor, click Menu > File > Import from Figma. This will open the Figma Importer for the current project.

Paste the URL into the field labeled Paste Figma URL.

In the drop-down menu, choose the page from this project that you'd like to import, then click Import.

Figma import pop-up that allows you to import

Figma import pop-up that allows you to import

To report a bug not listed above, let us know here.

Helpful?Was this article helpful?