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 most 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.
Replace elements with instances of true components, whether they were created in Plasmic or in your codebase.

Recommended workflow for fixing up layout and structure

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.

In this way, think of the Figma importer as a speed boost as you are building your Plasmic page, rather than a one-click magic wand to convert an arbitrary Figma design into a properly responsive page.

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.

Converting component instances

One powerful feature of the Figma importer is the ability to automatically convert instances of your Figma components to instances of components in Plasmic, along with their variants and props.

You can convert to not only components that were created in Plasmic, but also code components—React components registered from your codebase.

This conversion is done by name-matching. Let’s say your Plasmic project has a component called “Button”. Everywhere you have an instance of a “Button” component in your Figma design, it will be converted to an instance of your Plasmic “Button” component.

This unlocks a variety of workflows:

Say you already have a design system built out in code, and now you need to add a new page Figma design into your website. You can do this quickly with exactly the right instances of the existing components.
This also unlocks a powerful continuous re-importing workflow. Say you started with an empty Plasmic project, and then you imported some screens from your Figma design. Upon doing so, within Plasmic, you also converted various parts of that flattened design into components. Now, importing more pages from the Figma design or importing updated page layouts will result in the right component instances being used throughout.

Furthermore, the converter converts Figma variants and props, also by name.

Props

If you have a Figma prop called “label,” then it will convert to the “label” prop on your Plasmic component.

This includes slots, which are actually a type of prop. If “label” were a Plasmic slot, then a Figma instance with a label of “Hello” will result in a text element inside of that slot that says “Hello.”

Slots

If you name your Figma component layer ending with ”[slot: children]”, then upon import, we will take whatever is inside that layer, and put it into the corresponding component slot named “children” in the Plasmic component. This is valid to any slot that you have in your components in Plasmic.

For simplicity, you can also name the layer just ”[slot]” to have it automatically use the “children” slot. You can also include this suffix in the name of multiple layers to have them all go into the same slot.

Variants

Plasmic has multiple-choice single-select variants identical to Figma. These have a straightforward conversion.

But it also has boolean “toggle” variants, which are simply on/off. In contrast, all Figma variants are multiple-choice single-select. If you have a Figma variant named “on” or that has the same name as the property it’s grouped in (e.g. both the property and variant are named “Active”), and the Plasmic component has a toggle variant called “Active,” then these convert directly.

To make this a more concrete example:

Figma component has a prop called “Active,” with a single variant “on”.
Plasmic component has a toggle variant called “Active” that can be either set or unset.
An instance of the Figma component with Active=on will convert to an instance of the Plasmic component with the Active variant set.

Example 2:

Figma component has a prop called “Active,” with a single variant “Active.”
Plasmic component has a toggle variant called “Active” that can be either set or unset.
An instance of the Figma component with Active=Active will convert to an instance of the Plasmic component with the Active variant set.

Notes

All other components that don’t have a name match are not converted to Plasmic component instances, and will be imported as HTML elements.
This converts only instances of components, not the component designs themselves.

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.

Was this page helpful?

Have feedback on this page? Let us know on our forum.