Importing from Figma

If you already have existing designs from Figma, you can import these into Plasmic using the Plasmic Figma-to-code plugin. This importer is unique to Plasmic among page builders.

WARNING: This is not magic! The plugin favors predictability over guessing your intent.

The importer gets you to a starting point. You’ll need to put in further effort to make things production-ready. For instance, you’ll probably want to:

  • Fix up the layout and structure, which (depending on the Figma file) can be very far off—see next section.
  • Replace buttons, links, form controls, etc. with real accessible elements.
  • Add responsive variants.
  • Add interaction states and transitions.
  • Use Plasmic’s component model.

When you build things like web pages for production, you’ll want to ensure your page looks right to users no matter their screen size.

The importer tries hard to import exactly how your Figma design was built. Usually, Figma files are not built with production layout in mind! Many projects tend to have lots of absolute positioning and sizing instead of auto-layout, auto-sizing, and constraints. To go from the former to the latter, the layer structure may end up looking very different.

One way to check your Figma design: does resizing your artboard width behave as you would want the real page to behave?

Depending on how far off it is, once you’ve imported into Plasmic, it may be easier to re-build the page from individual pieces of the import, with layout in mind, rather than carefully inspecting and fixing your existing structure. This way, you’re able to clearly and cleanly achieve the structure and layout you want piece by piece, while still benefitting from the importer and not needing to recreate all the same styles everywhere. Especially if you are just starting out with Plasmic, this will help you learn the basic layout building blocks of Plasmic.

So, if you are importing (say) a landing page designed in Figma, and the design wasn’t built with production layout in mind, this is the recommended approach:

  • Select the full page artboard in Figma, and use the plugin to export to clipboard.
  • Paste into your Plasmic project.
  • Right above where you pasted, start rebuilding the layout, using stacks and responsive columns.
  • Copy/paste small pieces of the import, such as text and images, into your new layout. You may need to fix their sizes and layouts as well, but because this is limited to small pieces, this is generally more manageable. This lets you benefit from the import and move faster than if you were to recreate everything from scratch.
  • As you go, extract commonly reused spacing/color/font as tokens, and turn repeated parts into components. This will make your Plasmic project easier to update and keep consistent.

Can I better prepare my layout in Figma?

If you want to ensure your Figma design is as production-ready as possible from within Figma:

  • Use auto-layout everywhere, starting from your outer-most frame. This usually means a lot more deep nesting of layers in (auto-layout) frames.
  • Avoid groups and non-auto-layout frames, since these result in absolute positioning.
  • Avoid most fixed sizes. Instead, use “Fill container” and “Hug contents” for sizing.

This gets you most of the way there, but there will still be many things you will only be able to do in Plasmic, such as those listed at the beginning of this article. Even when considering just layout, simple common things like setting a max width on page content, full-window-height sizing, wrapping stacks, negative margins, and much more are all possible only in Plasmic.

How are vector shapes imported?

The Figma plugin tries to import most rectangles and frames as HTML elements (divs, images, etc.). But vector graphics and shapes will be imported as SVG elements.

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

Monochromatic SVGs are imported as SVG icons (which you can set to a color), and otherwise as SVG images.

Technical details

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.