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

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.

Current limitations

  • Plasmic doesn’t convert Figma components into Plasmic components.
  • Some advanced typography styles are not yet imported.

How do I best prepare my Figma file for import?

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