To get started with Builder's Develop:
- Import a design: bring your design in from Figma.
- Make it interactive: iterate with the Visual Editor AI.
- Generate code: use the Builder Visual Editor to generate code based on your design.
- Map components: map components from your Figma design.
The first step with Publish is getting your design in Builder. While you can create your design from scratch in the Builder Visual Editor, the most common workflow is importing from Figma or importing from web.
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. For larger designs where elements should stay together, such as full screens or pages, select the entire frame. For updates to a specific section or reusable widget, select individual components.
- In Figma, open the Builder plugin by clicking on Resources in the toolbar and going to the Plugins tab.
- Click the Export to Code button.
- This workflow launches a Builder fiddle with your content, which you can copy and paste into another Builder document or save as a template.
For the best experience and a deeper understanding of how the plugin works, get familiar with Best Practices with Builder's Figma Plugin.
Though you don't have to prepare your Figma file before using the plugin, you can optionally apply Auto Layout as a guide for the AI, which we recommend, especially if you're finding that your design could use some extra help.
The video below shows how to import your Figma design into Builder using the Builder Figma Plugin.
For more detailed instructions, see Import from Figma.
With your design inside of Builder, use the Visual Copilot AI to add interactivity and iterate. For instructions, see Visual Copilot: create content, add interactivity, connect data.
When your design is in Builder and you’re ready for code, Develop can generate code based on your design.
To generate the code from your content entry:
- Open the Page or Section in the Visual Editor.
- For the whole content entry, make sure nothing's selected. For just a portion of the entry, select what you'd like code for.
- In the Visual Editor, click on the
Get codeicon,< >, in the upper right. - In the code pane that opens, select your Framework and Styling.
The video below shows this process:
To map your Figma components using the Builder Figma plugin:
- In Figma, open the Builder Figma plugin.
- Click the Login button that displays on the bottom left of the plugin or the Connect with Builder button.
- When prompted in the browser, choose the Space you want to authorize access to and click the Authorize button.
- Go back to Figma. When the authorization is successful, the plugin shows the Space you're connected to.
- Select the design.
- On the Export tab in the plugin, click Map. Note that this button only displays if there are components found in the selection. For pointers, read Make your components mappable later in this document.
- On the Design System tab, copy the generated command.
- Paste the command at the command line. This command contains Figma IDs for mapping the components.
- When prompted, authorize the Builder CLI by clicking on the Allow access button.
- Confirm you have the right Space selected and Authorize Devtools by clicking on the Authorize button.
- Back at the command line, the CLI authenticates and detects components.
- Select the components you want to map.
For details on the plugin, read Import from Figma. The video below shows using the plugin and CLI to authenticate, authorize the CLI and Devtools, and map components from an example Figma design.
After generating your code, map your components so that Develop understands the relationship between your Figma components and your code base.
Your feedback helps Builder evolve to better meet user needs. For more information, visit Get help.
Get familiar with managing your Settings in Builder, including billing, users, and subscriptions. For more detail, visit Settings.