Introducing Visual Copilot 2.0: Make Figma designs real

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

‹ Back to blog

Visual Copilot

Turn a Figma Dropdown Design Into Working React Code in 1 Minute

November 11, 2024

Written By Steve Sewell

I just transformed a Figma design into working React code, complete with TypeScript and tests, in less than 1 minute.

The best part? The code is clean, customizable, and ready to integrate into your project.

Let me show you how to do it.

The Process

First, grab your design (if using mine, be sure to duplicate it to your drafts first, so you have full edit/plugins access).

Launch the **Builder.io Figma plugin** and hit the "Export to Code" button, and you'll be launched into Builder.io.

Once in Builder, it's time to make your design interactive. Use this prompt:

when I click the button, toggle the menu and rotate the chevron

Hit enter and let the AI work its magic. It will add the interactivity for you while you sit back and relax.

Then, toggle quick preview (cmd+\ or ctrl+\) to verify that everything works as expected. You should see the menu toggle and the chevron rotate when you click the button.

Note: The Builder Visual Editor AI chat released with Visual Copilot 2.0 is currently in a rolling beta — meaning some users will have access now, and some will come soon. We add new users each week — so if you don’t have access just yet, request to be notified when your accent gets access

When you're happy with the functionality, it's time to get the code:

  1. Hit the "Develop" button
  2. Click "Generate Code"
  3. Tweak any options as needed (frameworks, styling, languages, etc.)

Builder supports many frameworks, like Vue, Svelte, Solid.js, as well as native outputs like SwiftUI, Flutter, and Jetpack Compose.

You can type to chat with the code to modify it in any way you like. You can also add custom instructions to customize even futher.

To get the code into your project:

  1. Click "Sync Code"
  2. Copy the provided command
  3. Run it at the root of your project
  4. And there you have it - your new React component with TypeScript and tests, ready to be committed to your repository.

And there you have it - your new React component with TypeScript and tests, ready to be committed to your repository.

Try this out with your own designs! Remember, AI is a powerful tool that can significantly speed up your development process, but it doesn't replace the need for engineering expertise.

Use trial and error to get a good feel for what this AI is good for. Use it to accelerate your workflow and focus on the more complex aspects of your projects.

Share

Twitter
LinkedIn
Facebook
Hand written text that says "A drag and drop headless CMS?"

Introducing Visual Copilot:

A new AI model to turn Figma designs to high quality code using your components.

Try Visual CopilotGet a demo
Newsletter

Like our content?

Join Our Newsletter

Continue Reading
AI12 MIN
Why AI Is Making Dev Skills More Valuable, Not Less
December 3, 2024
ai8 MIN
The Big Lie AI Vendors Keep Telling You
November 27, 2024
AI8 MIN
Generate Figma Designs with AI
November 25, 2024