The Builder Figma plugin helps you import your Figma design directly into Builder while letting AI take care of the details — no more manually rasterizing, applying auto layout, or figuring out all the responsiveness.
Import your Figma designs into Builder to create a Page or Section, complete with responsive styles.
Before importing your Figma design into Builder, make sure:
- You've installed the Builder.io plugin for Figma.
- You have a completed design in Figma.
The AI features in the Builder plugin take care of all the details—including rasterizing images, applying auto layout, and making the design responsive in Builder.
To import your Figma design into Builder using AI:
- In your Figma file, select the frame(s) you'd like to import into Builder. For larger designs where elements should stay together, such as full screens or pages, select the entire frame. For updates to a specific section or reusable widget, select individual components.
- In Figma, open the Builder plugin by clicking on Resources in the toolbar and going to the Plugins tab.
- Click the Export to Code button.
- This workflow launches a Builder fiddle with your content, which you can copy and paste into another Builder document or save as a template.
For the best experience and a deeper understanding of how the plugin works, get familiar with Best Practices with Builder's Figma Plugin.
Though you don't have to prepare your Figma file before using the plugin, you can optionally apply Auto Layout as a guide for the AI, which we recommend, especially if you're finding that your design could use some extra help.
The video below shows how to import your Figma design into Builder using the Builder Figma Plugin.
Effortlessly copy and paste your Figma designs into Builder with the Builder Figma plugin. This workflow is great for when you need to update an existing Page or Section; for example, design updates to a hero.
To import layers from Figma into Builder using the Figma plugin:
- Select the layer(s) in Figma. For larger designs where elements should stay together, such as full screens or pages, select the entire frame. For updates to a specific section or reusable widget, select individual components.
- Open the Builder Figma plugin and click the Copy to Builder button.
- When the copy process is done, go to the Builder Visual Editor and paste with
Cmd/Ctrl+v.
The next video shows copying a design of a dashboard, pasting it in Builder, and then inspecting its responsiveness.
To get your design from Builder into Figma:
- Select the layers in Builder's Visual Editor that you'd like to copy into Figma.
- Press
Cmd + corCtrl + c. - In Figma, open the Builder Figma plugin and on the Import tab use
Cmd + vorCtrl + vto paste to paste your layers into the Paste from Chrome input.
The video below shows pasting from Builder into Figma using the Builder Figma plugin.
The Builder Figma Plugin works just as well in Figma's Dev Mode as it does in full editing mode.
For more detail on making the most of the Builder Figma Plugin, visit Best Practices with Builder's Figma Plugin.
Certain parts of this workflow use AI, for more information, read How Builder Uses AI.
The Builder team works daily to make improvements and iterate on functionality. As we continue to solve for a broader range of use cases, some designs might benefit from extra help so that the AI can process the import better.
If your design is a candidate for helping us learn how to better meet your needs, we invite you to share your feedback. While we work with your feedback, we recommend Best Practices with Builder's Figma Plugin.
After importing your Figma design into Builder — or creating a design from scratch in Builder — you can generate semantic code for your design and sync that code with your codebase. For instructions, visit Generate Code.
If you want to tweak your imported design before generating code, check out Visual Copilot: create content, add interactivity, connect data.
