Skip to content
CONTACT SALESSTART BUILDING

Get started with Publish

To get started with Builder's Publish:

  1. Import a design: bring your design in from Figma or Chrome.
  2. Make it interactive: tweak and reimagine with the Visual Editor AI.
  3. Integrate Page building: integrate your codebase with Builder so teammates can create as needed on their own.
Diagram of Publish workflow. The title is "Publish Workflow". The first step is Import from Figma or Chrome, the second is Iterate with AI, and the third is Integrate Pages and custom components.

Step 1: import your 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.

Import from Figma

The AI features in the Builder plugin handle all the details, including rasterizing images, applying auto-layout, and making the design responsive.

To import your Figma design into Builder Publish using AI:

  1. 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-screen or page layouts, select the entire frame. To update a specific section or reusable widget, select the individual components.
  2. In Figma, open the Builder Figma Plugin by clicking on Resources in the toolbar and going to the Plugins tab.
  3. Choose and click the Classic Export button.
  4. Click Copy to Builder.
  5. Paste your design within a Builder Publish content entry.
Get pro tips on importing your design

For the best experience and a deeper understanding of how the plugin works, visit Smart Mode best practices or Precise Mode configuration.

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. This is recommended, especially if you're finding that your design could use some extra help.

The video below demonstrates the process of using the Classic Export button to copy a design directly into Builder Publish.

For more detailed instructions, visit Builder Figma Plugin.

Import from Web

Diagram of Web plugin workflow. The title is "Import from Web into Builder with the Chrome Extension". There's a picture of a a live website, Builder.io, with the Chrome logo logo, a plus sign, then a screenshot of the Builder Chrome Extension, an equal sign, and then a picture of that Page in Builder with the accompanying words "Your Live Site plus Chrome extension" equals "Responsive Builder Content:.

With the Copy Layouts feature of the Builder Chrome extension, import any content from any page on the web into the Visual Editor:

  1. Open the Builder Chrome extension.
  2. Click Copy Layout.
  3. Optional: Clear the Outline Builder Components checkbox to remove blue overlays when importing layouts from non-Builder pages.
  4. Select a section of the page to copy. Press the Up Arrow key to expand the selection up a level.
  5. Go to a Publish content entry.
  6. Paste the selection with Cmd/Ctrl + v into the Visual Editor.

The browser automatically resizes during the copy process to capture layouts at multiple screen sizes for responsiveness.

For more detailed instructions, visit the Import Web Layouts section of Builder Chrome extension.

Step 2: add interactivity with AI

With your design inside of Builder, use Visual Copilot AI to add interactivity and iterate. For instructions, visit Create and edit content with the Visual Editor AI.

Step 3: integrate Page building and custom components

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 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.

Screenshot of the Builder visual editor with the Builder homepage in the visual editor and the AI window open. There's also a note with an arrow, pointing to the screenshot that says start building pages with the drag and drop visual editor, in Builder.

The quickest way to get started is to integrate your codebase with Builder using Builder's Devtools. For instructions, visit Publish Quickstart.

Get help and share feedback

Your feedback helps Builder evolve to better meet user needs. For more information, visit Help and support.

What's next

Was this article helpful?