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.
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.