Code Generation CLI

After creating a design with Figma, integrate Builder with your codebase to enable live code generation. Builder generates code directly into your codebase, using the design you've provided and your own code files for seamless integration.

What to know

Use the Builder Figma plugin and the Code Generation CLI tool to generate code into your codebase.
Prompt Code Generation CLI to make stylistic and functional modifications to the design of your generated code.

Prerequisites

To use Code Generation CLI, you must have:

A Builder account with access to a Fusion Space.
A Figma account with a design ready to export and the Builder Figma plugin.
A local machine with Node.js 18 or higher installed.
A local codebase with a front-end framework supported by Builder. Code Generation CLI works best with React-based projects.

Figma to code

Use of Code Generation CLI requires you to navigate between Figma, Builder, and your codebase.

Use the Builder Figma plugin

First, ensure that you have the Builder Figma plugin within Figma. Once you have done so, complete the following steps.

Export your design

Within Figma:

Select your design. For large designs, you may have better success by selecting one portion of your design.
Open the Builder Figma plugin.
On the Export tab, click the Export Design.
Builder's AI generates multiple design options. Choose one.

Once you see Export Successful, you are ready to move on to the next step.

The video below demonstrates the process of selecting a design within Figma and then using the Builder Figma plugin to export a design:

Connect to your codebase

To use Code Generation CLI:

Copy the command-line script within the plugin's window.
Go to your codebase's directory within your terminal.
Paste and run the command from the Builder Figma plugin.

At this point, Code Generation CLI begins to scan through your project and authenticate with Builder.

To authenticate with Builder, follow the prompts provided within the command line and browser. Connect to a Fusion Space when authenticating.

If you ever need to re-authenticate with Builder and Figma via the command line, you can use the following command to trigger the authentication process.

npx "@builder.io/dev-tools@latest" auth

After successfully connecting to your space, you are ready to move on to the next step.

Generate code

Once you have been prompted within the command line to describe how your design integrates with your codebase, interact with the command line as you would any other AI.

Provide specificity and context within your prompts whenever possible. For example:

✅ Create a responsive product page with a path of "/products".
❌ Create a new page.

Code Generation CLI receives your request, generating code within your codebase. It then identifies which files it has changed and generates a summary of the changes it made.