The Builder Figma plugin aids you in importing your Figma design directly into your Builder Space. Transform your Figma designs into customizable content in your Publish space, or generate code from your design through a Fusion Space using Projects or the command line.
- Install the Builder Figma plugin to export your designs into a variety of formats.
- Import your Figma designs to Builder or transform your designs into code with AI.
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.
Tip: For best results, use Figma's auto layout feature whenever providing a Figma design to Builder.
When using a Fusion Space, use the Smart Export button. This button will copy the details of your design to your clipboard. Within a Fusion Project, paste your Figma design and interact with the AI to implement the design into code.
To import your Figma design into Builder using AI:
- 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 Smart Export.
In the video below, a portion of a design is exported from Figma using Smart Export and is then used within a Fusion Project prompt to add a new input to a form field.
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.
The Builder Figma plugin will export a design from Figma. Once exported, you may either:
- Import your design to a Builder Publish Space. See Figma to Publish.
- Import your design and Generate Code with Visual Editor.
- Import your design and Generate Code with Builder CLI.
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 Editor AI: create content, add interactivity, and connect data.