Importing from Figma
Creating designs from scratch in Plasmic has a number of advantages. However, if you already have existing designs from Figma, you can import these into Plasmic using our best-in-class Figma-to-code plugin. This is unique to Plasmic among page builders.
Note that usually importing from Figma just gives you a starting point! Figma’s data model tends to be very far away from what you would want in production, so it takes a little effort to turn it into something closer to what you really want. For instance, you may want to:
- specify proper layout—even simple things like setting a max width on page content
- replace buttons, links, text fields, etc. with real accessible elements
- add responsive variants
- add interaction states and transitions
- use proper component structure using variants and slots
Plasmic gives you the tools to incrementally refine the messy and exploratory into the clean and robust.
We generally aim for pixel-perfect translation. If you are finding inaccuracies, please share your original Figma file with email@example.com.
The importer fully automates the low-level details of converting Figma’s document representation to standard DOM representations. A few highlights:
- Supports constraints and auto-layout.
- Translates blend modes.
- Adapts border styles including centered borders.
- Handles filter effects like background blur and layer blur.
- Preserves arbitrary affine transformations like scales and rotations.
- Handles all fill types including linear and radial gradients and images.
- Imports vector and compound shapes as SVGs.
- Mirrors the original hierarchical structure.
- Carries over most typography styles.
- Plasmic doesn’t convert Figma components into Plasmic components.
- Some advanced typography styles are not yet imported.
The main thing to pay attention to is what parts of your design you intend to import as a single SVG graphic. These should be merged into a single vector shape object in Figma using boolean operations (such as union).