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.
Builder CLI generates and exports code from your Figma design to your codebase. Repeat the process to sync design updates from Figma to the codebase without additional setup.
To export your design:
- Copy the script provided by the Builder Figma plugin.
- Navigate to your project, open the terminal, and run the script.
- If prompted, connect to a Builder account.
- Follow the on-screen prompts to import your design into the codebase.
The Builder CLI explains each step and describes the changes made to the codebase.
To export your revised design changes using Builder CLI, see Export design updates to codebase.
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.
Builder CLI updates your codebase based on changes in your Figma design without additional setup. To apply a revised design, follow the steps in Export to your codebase.
Builder CLI generates code and integrates design updates into your codebase by:
- Detects your framework and adds files to the appropriate directories.
- Reuses existing components, libraries, and styles.
- Updates text, styles, and layouts without overwriting existing structure.
- Preserves logic such as form validation and conditional rendering.
Add a .builderrules file to the project root to guide Builder CLI in reusing components and styles of the codebase. For more details on configuration files for Builder CLI, see Builder CLI API.
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.