To get started with Builder's Publish:
- Import a design: bring your design in from Figma or Chrome.
- Make it interactive: tweak and reimagine with the Visual Editor AI.
- Integrate Page building: integrate your codebase with Builder so teammates can create as needed on their own.
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 the Copy Layouts feature of the Builder Chrome extension, you can import any content from any page on the web into the Visual Editor:
- Open the Builder Chrome extension.
- Click Copy Layout.
- Optional: You can clear the Outline Builder Components checkbox to remove blue overlays when importing layouts from non-Builder pages.
- Select a section of the page to copy. Press the Up Arrow key to expand the selection to the full page.
- Paste the selection with
Cmd/Ctrl + vinto the Visual Editor.
The browser automatically resizes during the copy process to capture layouts at multiple screen sizes for responsiveness.
The next video shows copying a Section and adding it to the Visual Editor to check for responsiveness:
For more detailed instructions, see the Import Web Layouts section of The Builder Chrome extension.
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 you integrate Pages with Builder, you give your team a way to create as many Pages as they need without having to wait for a developer to create Pages for them.
And if you register your custom components, your team can build with your company's components.
You only have to integrate once, and then your team can create and iterate as needed, without having to tap a developer.
The quickest way to get started is to integrate your codebase with Builder using Builder's Devtools. For instructions, see Publish Quickstart.
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, SSO, localization, and subscriptions. For more detail, visit Settings.