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.

Capabilities

We generally aim for pixel-perfect translation. If you are finding inaccuracies, please share your original Figma file with team@plasmic.app.

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