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 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:
- 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.
- In Figma, open the Builder Figma Plugin by clicking on Resources in the toolbar and going to the Plugins tab.
- Choose and click the Classic Export button.
- Click Copy to Builder.
- Paste your design within a Builder Publish content entry.
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.
With the Copy Layouts feature of the Builder Chrome extension, import any content from any page on the web into the Visual Editor:
- Open the Builder Chrome extension.
- Click Copy Layout.
- Optional: 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 up a level.
- Go to a Publish content entry.
- 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.
For more detailed instructions, visit the Import Web Layouts section of Builder Chrome extension.
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.
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.
The quickest way to get started is to integrate your codebase with Builder using Builder's Devtools. For instructions, visit Publish Quickstart.
Your feedback helps Builder evolve to better meet user needs. For more information, visit Help and support.
Looking to hire a third party to help with your project?
Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.
© 2020 Builder.io, Inc.