Made in Builder.io

Visual Copilot Livestream | Dec 6 @10am PST

Introducing Visual Copilot: Figma to code with AI

Builder.io and Figma
Talk to Us
Product
Developers
Talk to Us

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

in beta

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

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.

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.

Because Visual Copilot is in beta, we are working daily to make improvements and iterate on its 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 Maximizing Efficiency 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.


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.

Connect with us

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

Get the latest from Builder.io

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy

Product

Visual Copilot Beta

Visual Headless CMS

Integrations

What's New

Company

About

Careers

Developers

Builder for Developers

Documentation

Devtools

Try Builder Playground

OPEN SOURCE

Builder

Mitosis

Qwik

Partytown

Solutions

Ecommerce

Marketing Sites

Landing Pages

Mobile Apps

Multi-brand

Headless CMS

Product

Visual Copilot

Visual Copilot Beta

Visual Headless CMS

Integrations

What's New

Company

About

Careers

Developers

Builder for Developers

Documentation

Devtools

Try Builder Playground

OPEN SOURCE

Builder

Mitosis

Qwik

Partytown

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get Started

Log In

Product

Features

Pricing

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Use Cases

Product

Features

Pricing

Product

Visual Headless CMS

Integrations

What's New

Company

About

Careers

Developers

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

Developers

Builder for Developers

Documentation

Dev Tools

Try Builder Playground

Open Source

Builder

Mitosis

Qwik

Partytown

Resources

Documentation

Blog

Community Forum

Templates

Partners

Submit an Idea

Solutions

Ecommerce

Landing Pages

Multi-brand

Headless CMS

Popular Guides

SaaS Marketing Site Ebook

Composable Commerce Ebook

Headless CMS Guide

Landing Pages

Headless CMS

Headless Storefront

Customer Showcase

Customer Success Stories

Frameworks

React

Next.js

Qwik

Gatsby

Angular

Vue

Nuxt

Hydrogen

All Integrations

CMS

React

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Resources

Blog

Knowledge Base

Community Forum

Partners

Performance Insights

Templates

Success Stories

Showcase

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Resources

Blog

Knowledge Base

Community Forum

Partners


Templates

Success Stories

Showcase

Use Cases

Company

About

Careers

Resources

Blog

Knowledge Base

Community Forum

Partners

Performance Insights

Templates

Success Stories

Showcase

© 2023 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms