As part of the suite of tools known as Visual Copilot, 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.
For the best experience and a deeper understanding of how the plugin works, get familiar with Best Practices with Builder's Figma Plugin.
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.
- In Figma, open the Builder plugin by clicking on Resources in the toolbar and going to the Plugins tab.
- Click the Generate 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.
Tip: Always check your import in Builder by clicking each device icon and tweaking as needed.
Most settings you might want to update are in the Style tab, such as margins and padding, widths, and alignment.
Though you don't have to do any prep to your Figma file before using the plugin, you can optionally apply Auto Layout as a guide for the AI, 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 plugin's AI feature. This example uses a full page, but importing a section design is the same.
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.
- Open the Builder Figman plugin and expand the options in the Generate code button.
- Select Copy & Paste Designs.
- When the copy process is done, go to the Builder Visual Editor and paste with
Cmd/Ctrl+v.
Tip: Make sure you use the Generate Code button's Copy & Paste Designs option, as this is how the plugin implements the import process.
The next video shows this process.
For more detail on making the most of Visual Copilot, visit Best Practices with Builder's Figma Plugin.
Certain parts of the Visual Copilot workflow use AI, for more information, read AI in Visual Copilot in How Builder Uses AI.
The Builder team works daily to make improvements and iterate on Visual Copilot's 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 Generating Code.
