Generate code from your Figma designs by importing designs to your Fusion Space with the Builder Figma plugin.
Go from Figma to code in just three steps:
- Export your Figma designs with the Builder Figma plugin.
- Import your Figma design to a Fusion 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.
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.
If you haven't already, connect to your Fusion Space from within the Builder Figma plugin. With the plugin open:
- Click the Login button in the bottom-left corner of the plugin's window. This brings you to a authentication page within Builder.
- Select the Fusion Space you wish to connect to the Builder Figma plugin.
Once complete, you should see the name of your Fusion Space in the bottom-left corner of the Builder Figma plugin.
To export your Figma design to your Fusion Space, click the View Code in Builder button. This will create a new content entry for you within your Fusion Space.
Once you have your design within a Develop Space, click the Develop toggle and then click Generate Code. This will generate code based on your design.
There are many ways to customize the code output from Builder. For example:
- Update the Generated Code settings, such as shifting the framework, styling, language, or testing framework.
- Provide general instructions or examples of your own code within the Instructions section.
- After code generation, prompt Builder's AI to make whatever changes you desire through the text input at the bottom of the page.
After generating code, you can copy the files directly into your codebase manually.
If you prefer to let Builder integrate your code for you, click the Sync Code button. This will provide you with a script for the add command from the Builder CLI.
Copy the command and then:
- Navigate to your project's directory on the command line.
- Paste the command provided from the Sync Code button.
- Choose where the files should be generated.
The Builder CLI will create new files within the chosen directory.
There are several ways to customize your code output. See Code Generation for a deep dive into the customization options available to you from within Develop tab.