Generate code from your Figma designs by pasting a link to your Figma frame directly into your Builder Code Space.
Go from Figma to code in just three steps:
- In Figma, right-click the frame you want to import and select Copy link to selection.
- Paste the Figma link into a Builder Code Space prompt, along with instructions for the AI.
- Once implemented, Create a pull request to your codebase.
For details instructions, visit Import from Figma overview.
Use Builder's Design System Intelligence and Component indexing to improve code generation. Read through Design System Intelligence best practices as well for the best results.
Figma users on paid plans can annotate parts of their Figma designs. These annotations are included as part of the export to Builder, and can be used to provide instructions to Builder's AI when generating code.
For more details on annotations in Figma, visit Figma's documentation, Add measurements and annotate designs.
To submit changes and create a pull request (PR) to the connected repository:
- In the Visual Editor, make the required updates.
- Click Send PR from the toolbar.
- In the Pull requests tab, review the proposed changes.
- To request additional edits, comment in the pull request and tag @builderio-bot with specific instructions. The bot applies the changes to the same PR.
The following video demonstrates sending a PR and using the Builder agent to apply changes:
In addition to importing from Figma, you can also export from your Builder Project back into Figma. By doing so, update your designs using the right tool for the job.
Within a Builder Project:
- Switch to the Design tab.
- Select the layer you wish to export. You can interact directly with the page or use the Layers tab.
- On the top-right of the screen, click the three dot menu and select Export to Figma.
To import your design to Figma, you need the Builder Figma plugin.
After installing the plugin:
- Open the Builder Figma plugin within Figma.
- Click the Import tab.
- Click the field where it allows you to paste from your clipboard.
- Paste your exported design.
You may need to make some adjustments to your design to get it to appear correctly within Figma.