Generate Code with Builder CLI
Generate code from your Figma designs by connecting directly to your codebase. Using AI, Builder CLI dynamically adds your designs as code to your codebase.
What to know
- 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.
How it works
Go from Figma to code in just three steps:
- Export your Figma designs with the Builder Figma plugin.
- Import your Figma design to a Builder Code Space or your codebase with Builder CLI.
- Customize your code according to your framework and code styles.
Install the Builder Figma plugin
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.
Export your design
When exporting your design, there are two options: Smart Export and Classic Export.
Tip: For best results, use Figma's auto layout feature whenever providing a Figma design to Builder.
Smart Export
To import your Figma design into Builder using AI:
- In your Figma file, select the frame(s) you want to import.
- Open the Builder plugin by going to Plugins in the toolbar and selecting the Builder Figma plugin.
- Click Smart Export.
Smart Export copies the details of your design to your clipboard and can be used with both Builder Code and Content Spaces. For Builder Code, you may copy your exported design into any AI prompt. For Builder Content, exported designs can be pasted into a Visual Editor AI prompt field.
In the video below, a portion of a design is exported from Figma using Smart Export and is then used within the AI prompt field to add a new input to a form field.
To share your export with others, click the copy icon next to the Open Builder button. This URL can be shared with other members of your team or added to a Builder Code prompt.
Classic Export
Builder Content
When using a Builder Content Space, you can use the Classic Export button. This button analyzes your design and provide the option to copy to your clipboard or open directly in Builder.
To import your Figma design into a Builder Content Space:
- In your Figma file, select the frame(s) you want to import.
- Open the Builder plugin by going to Plugins in the toolbar and selecting the Builder Figma plugin.
- Click Classic Export.
The video below demonstrates the export process, as well as copying into an existing content entry.
When using Classic Export, you have the option of using Easy Mode or Precise Mode. For more details, visit Precise Mode configuration.
Export to your codebase
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.
Connect to your Builder Code Space
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.
Export design updates to your codebase
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.
Prompt 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.
What's next
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.