private beta
Quickly copy your Figma design and paste it into Builder Projects to convert your ideas to developer-friendly code in moments.
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 the Quick Copy button.
- 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 the Quick Copy button.
- 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 Quick Copy.
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 new colors. The user exports the design as usual, clicks the Quick Copy button, and back in Builder Projects, pastes the copied design. The AI then updates the design.
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.