Register Now: Use Visual Dev + AI to Ship 10x Faster on July 24

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

As part of the suite of tools known as Visual Copilot, the Builder Figma plugin helps you import your Figma design directly into Builder while letting AI take care of the details—no more manually rasterizing, applying auto layout, or figuring out all the responsiveness.

Import your Figma designs into Builder to create a Page or Section, complete with responsive styles.

Diagram of Figma plugin workflow. The title is "Import Page and section Designs into Builder from Figma". There's a picture of a Figma design with the Figma logo, a plus sign, then a screenshot of the Builder Figma Plugin UI, an equal sign, and then a picture of a Page and Section in Builder with the accompanying words "Your Figma Design plus Builder Figma Plugin" equals "Responsive Builder Content:.
Get pro tips on importing your design

For the best experience and a deeper understanding of how the plugin works, get familiar with Best Practices with Builder's Figma Plugin.

Before importing your Figma design into Builder, make sure:

  • You've installed the Builder.io plugin for Figma.
  • You have a completed design in Figma.

Visual Copilot works just as well in Figma's Dev Mode as it does in full editing mode.

Screenshot of Figma in Dev mode with the Builder Figma plug-in open. There's a note with an arrow, pointing to the Dev mode and plug-in that says Visual Copilot works in Dev mode too.

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:

  1. In your Figma file, select the frame(s) you'd like to import into Builder.
  2. In Figma, open the Builder plugin by clicking on Resources in the toolbar and going to the Plugins tab.
  3. Click the Generate Code button.
  4. This workflow launches a Builder fiddle with your content, which you can copy and paste into another Builder document or save as a template.

Tip: Always check your import in Builder by clicking each device icon and tweaking as needed.

Most settings you might want to update are in the Style tab, such as margins and padding, widths, and alignment.

Though you don't have to do any prep to your Figma file before using the plugin, you can optionally apply Auto Layout as a guide for the AI, 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 plugin's AI feature. This example uses a full page, but importing a section design is the same.

Effortlessly copy and paste your Figma designs into Builder with the Builder Figma plugin. This workflow is great for when you need to update an existing Page or Section; for example, design updates to a hero.

To import layers from Figma into Builder using the Figma plugin:

  1. Select the layer(s) in Figma.
  2. Open the Builder Figman plugin and expand the options in the Generate code button.
  3. Select Copy & Paste Designs.
  4. When the copy process is done, go to the Builder Visual Editor and paste with Cmd/Ctrl + v.

Tip: Make sure you use the Generate Code button's Copy & Paste Designs option, as this is how the plugin implements the import process.

The next video shows this process.

For more detail on making the most of Visual Copilot, visit Best Practices with Builder's Figma Plugin.

Certain parts of the Visual Copilot workflow use AI, for more information, read AI in Visual Copilot in How Builder Uses AI.

The Builder team works daily to make improvements and iterate on Visual Copilot's functionality. As we continue to solve for a broader range of use cases, some designs might benefit from extra help so that the AI can process the import better.

If your design is a candidate for helping us learn how to better meet your needs, we invite you to share your feedback. While we work with your feedback, we recommend Best Practices with Builder's Figma Plugin.

After importing your Figma design into Builder—or creating a design from scratch in Builder—you can generate semantic code for your design and sync that code with your codebase. For instructions, visit Generating Code.

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy