Learn why Gartner just named Builder a Cool Vendor

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
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

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

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.

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

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

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 Figma plugin and click the Copy to Builder button.
  3. When the copy process is done, go to the Builder Visual Editor and paste with Cmd/Ctrl + v.

The next video shows copying a design of a dashboard, pasting it in Builder, and then inspecting its responsiveness.

The Builder Figma Plugin 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.

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

Certain parts of this workflow use AI, for more information, read How Builder Uses AI.

The Builder team works daily to make improvements and iterate on 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 Generate Code.

If you want to tweak your imported design before generating code, check out Visual Copilot: create content, add interactivity, connect data.

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

Product

Platform Overview

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Mitosis

AI Shell

Mitosis

Micro Agent

Mitosis

GPT Crawler

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Guide

Composable Commerce Guide

Headless CMS Guide

Headless Commerce Guide

Composable DXP Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

See All

© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences

Gartner Cool Vendor 2024