Figma to Builder Content
Transform your Figma designs into usable assets instantly. Export from the Builder Figma plugin and import directly into a Builder Content Space in one fluid workflow.
Connect Figma integration
By providing Builder access to your Figma account, you gain the ability to share Figma links directly with Builder.
To connect Figma to Builder:
- Go to your Integrations page.
- Find the Figma card under Workflow Integrations.
- Click the + Connect button, or Reauthorize button.
- Follow the instructions in the pop-up window to authorize Builder.
How it works
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 Content Space prompt, along with instructions for the AI.
For detailed instructions, visit Generate content with Visual Editor AI.
Leverage Design System Intelligence
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.
Annotations included
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.
What's next
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 Builder Content Space, Get Started with Builder Content and create interactive pages through the Visual Editor, or Integrate Pages with your codebase.