Importing from Figma

You can import your Figma designs into Framer using Framer's Figma Importer.

From the Dashboard

To import a Figma project from the dashboard, click Import at the top-right of the screen, then click on Figma. This will create a new project and open the Figma Importer for the new project.

From the Editor

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

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.

Back in Framer, paste this 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

Feature Support

When you import a Figma project, Framer will convert Figma’s frames, shapes, text, and other layers into their corresponding Framer layers.

While Framer 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

Our team is working to expand support for these features in the future. To report a bug not listed above, let us know here.