Generate code from your Figma designs by connecting directly to your codebase. Using AI, Builder CLI will dynamically add your designs as code to your codebase.
- The Builder Figma plugin helps you go from Figma design directly to code.
- Connect your space to the Builder Figma plugin and then import designs by copying the provided script.
- From your command line, generate code from your designs and provide prompts to influence the code and design output.
Go from Figma to code in just three steps:
- Export your Figma designs with the Builder Figma plugin.
- Import your Figma design to a Develop Space or your codebase with Builder CLI.
- Customize your code according to your framework and code styles.
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.
The AI features in the Builder plugin take care of all the details—including rasterizing images, applying auto layout, and making the design responsive in Builder.
To import your Figma design into Builder using AI:
- In your Figma file, select the frame(s) you'd like to import into Builder.
- In Figma, open the Builder plugin by going to the Plugins option in the toolbar and selecting the Builder Figma plugin.
- Click the Export Design button. After clicking, the plugin analyzes and processes your design.
- Choose the preferred version of your design that the plugin created.
Once complete, the plugin will display several options on how to use your exported design.
For the best experience and a deeper understanding of how the plugin works, get familiar with Best Practices with Builder's Figma Plugin.
To export your Figma design to your codebase:
- Copy the script provided by the Builder Figma plugin.
- Navigate to your project's folder on the command line.
- Paste and run the script on your command line.
- If prompted, connect to a Builder account.
- Follow the prompts on screen to import your design to your codebase.
The Builder CLI will describe the steps it has taken and what changes were made.
You may be prompted to connect to a Builder account if this is the first time you've used the Builder CLI with a project.
Choose a space to connect to your local project. Builder CLI will continue generating code after you have authenticated.
For more details on authenticating from the command line, see Builder CLI.
After its initial run, Builder CLI will ask you how the import went and whether or not you would like to make any changes. You can continue to interface with Builder CLI until you are happy with its code generation.
To learn more about Builder's command-line tool, see Builder CLI, or learn more about Best Practices when working with code generation.
To learn how Builder CLI can use your own components in code generation, see Map Components.