Transform your Figma designs into usable assets instantly — export from the Builder Figma plugin and import directly into a Builder Publish Space in one fluid workflow.
- Install the Builder Figma plugin to export your designs.
- Copy your exported designs directly from Figma to Builder with the Copy to Builder button.
To install the plugin:
- Within Figma, select Plugins from your toolbar and then Manage plugins.
- Search for Builder.io within the Plugins & widgets tab.
- Choose the Builder.io plugin and then click the Save button.
Alternatively, visit the Builder Figma plugin page and install from there.
When exporting your design, there are two options: Smart Export and Classic Export.
For Publish Spaces, it is recommended you choose Classic Export.
Tip: For best results, use Figma's auto layout feature whenever providing a Figma design to Builder.
When using a Publish Space, use the Classic Export button. This button will analyze your design and provide the option to copy to your clipboard or open directly in Builder.
To import your Figma design into a Builder Publish Space:
- In your Figma file, select the frame(s) you want to import.
- Open the Builder plugin by going to Plugins in the toolbar and selecting the Builder Figma plugin.
- Click Classic Export.
The video below demonstrates the export process, as well as copying into an existing content entry.
When using Classic Export, you have the option of using Easy Mode or Precise Mode. For more details, visit Precise Mode configuration.
To copy your exported design to a Publish space:
- Click the Copy to Builder button on the plugin's export screen.
- Go to a Publish Space and Paste the design from your clipboard. This can be done by right-clicking within the Visual Editor and clicking Paste or pressing Cmd + V on a Mac or Ctrl + V on a Windows machine.
Your Builder Space will translate your design to blocks. You may then interact with your design as you would any other collection of Builder Blocks.
If your designs are not importing correctly, you may benefit from using Precise Mode. To learn more, see Export Modes and Precise Mode Configuration.
With your design in a Publish Space, Get Started with Publish and create interactive pages through the Visual Editor, or Integrate Pages with your codebase.