Resources

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

☰

Forum

Blog

Github

Signup

Made in Builder

Import Figma designs

BETA

Builder supports automatic importing of designs created in Figma using Figma's autolayout feature.

Preparing your design

Start by making a copy of your design. You'll be making changes to the file (rasterizing and detaching instances), and you may find it helpful to maintain your original design.

All imported layers must be using Figma's autolayout feature. It's easy to convert any layer to use autolayout - just choose the layer and hit the + next to autolayout.

Note that some layers don't make sense to use autolayout - like complex layer designs or vectors. For these just choose "rasterize image" to make it a single image.

Note that all layers you want to import most be using autolayout or be rasterized images. This includes all layers inside of the one you want to import, so be sure that everything you intend to pull in are properly prepared.

Importing your design

To import a design into Builder, first download our Figma plugin.

Once you have verified your design is prepared using autolayout you can open the plugin in Figma.

Next, choose the layer you want to import, and choose "DOWNLOAD JSON" and save the file

👉Tip: if you get a message saying your design can't be imported, check again that your design is fully using autolayout

Return to Builder and choose the Figma option from the insert tab when editing content, and upload the file you just downloaded

👉Tip: instead of choosing "download json" you can instead choose "get code". This will launch a Builder fiddle with your content, that you can copy and paste to another Builder document, or save as a template and use in other content too

Final adjustments

We can't guarantee we can perfectly import every detail of your design, but we do feel confident we can get you a good bit of the way there!

Once imported into Builder, we recommend making any final adjustments needed in Builder - for instance to sizes, paddings, and styles.

Learn more about using our visual editor here and more advanced responsive design here

Troubleshooting

There is a limit to how large of a piece of content we can import at a time. If you are having trouble importing a whole page at a time, try importing smaller portions of the page, like one section at a time or even one button or line of text to see if that works for you.

If you try the above and are still facing issues, contact us

Was this article helpful?