in beta
Quickly copy your Figma design and paste it into Builder Projects to convert your ideas to developer-friendly code in moments.
Tip: For best results, use Figma's auto layout feature whenever providing a Figma design to Builder's AI.
To import a number of designs from Figma into one Project, copy the project in Figma using the Builder Figma Plugin and paste it into the Projects AI prompt.
- In Figma, select the design you want to use.
- In the Builder Figma Plugin, on the Export tab, click Smart Export.
- In Builder Projects, tell the AI to use that design by giving it instructions and pasting your copied design into the prompt.
- Press Enter when you're ready and the AI generates the project according to your instructions.
In the video below, two Figma designs are exported with the Builder Figma Plugin and pasted with Cmd + v into the prompt with instructions to create a carousel with the two designs.
Apply design changes to existing code without regenerating code. Assuming you have a design already in Builder Projects:
- In Figma, select and update the design for a component that exists in Builder.
- In the Builder Figma plugin, on the Export tab, click the Export Design button.
- When the plugin has finished processing, click Smart Export.
- In Builder Projects, tell the AI to update the design and paste into the prompt the content that the plugin put in your clipboard when you clicked Smart Export.
This feature is especially useful when you’re working with components that are already part of your codebase, meaning you can update the design in place.
The video below shows a section of a teams page, then the same section in Figma that has been edited with a new Contact Me button instead of the social links.
The user exports the design as usual, clicks the Smart Export button, and then, back in Builder Projects, pastes the copied design. The AI then updates the design.
Provide additional context to Builder including screenshots and text along with your Figma designs. This will help Builder create a design that fits your desired specifications.
In the video below, a Figma design, a PDF, and a screenshot are provided to Builder. Builder then designs a new page based on the designs and context.
For more information on working with Builder Projects and Builder's AI, visit:
- Builder Figma Plugin. Learn how to use the Builder Figma plugin to get your design into Builder.
- AI Credits. Understand Builder's AI credits and how and when they apply.
- Builder Projects: best practices. Get tips and insights to work even smarter.
- Connect GitHub to Projects. Connect your repo to Builder so you can edit your code visually and create PRs with Builder.