Livestream: Building landing pages with AI | 4/3

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io
Contact SalesGo to App

Livestream: Building landing pages with AI | 4/3

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io

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 aids you in importing your Figma design directly into your Builder space. Transform your Figma designs into customizable content in your Publish space, or generate code from your design through a Develop space or the command line.

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:.
  • Install the Builder Figma plugin to export your designs into a variety of formats.
  • Import your Figma designs to Builder or transform your designs into code with AI.

To install the plugin:

  1. Within Figma, select Plugins from your toolbar and then Manage plugins.
  2. Search for Builder.io within the Plugins & widgets tab.
  3. Choose the Builder.io plugin and then click the Save button.

Alternatively, visit the Builder Figma plugin page and install from there.

Builder Figma Plugin installation page in Figma, with the text "Click Save" and an arrow pointing towards the Save button.

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 going to the Plugins option in the toolbar and selecting the Builder Figma plugin.
  3. Click the Export Design button. After clicking, the plugin analyzes and processes your design.
  4. Choose the preferred version of your design that the plugin created.

Once complete, the plugin will display several options on how to use your exported design.

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.

The Builder Figma plugin will export a design from Figma. Once exported, you may either:

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

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

  • Platform Overview

  • Integrations

  • What's New

  • Figma to Code Guide

  • Composable Commerce Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

  • Design to Code

  • Blog

  • Knowledge Base

  • Community Forum

  • Partners

  • Templates

  • Success Stories

  • Showcase

  • Resource Center

    Glossary

© 2025 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences

Gartner Cool Vendor 2024