Introducing Visual Copilot: A Better Figma-to-Code Workflow
Published: 2023-10-12 18:21:17

> _Written by [Steve Sewell](https://twitter.com/steve8708)_

A staggering [79% of frontend developers](https://twitter.com/Steve8708/status/1703171557290660008) say that turning a Figma design into a webpage is more than a day's work.

Today, we're thrilled to launch Visual Copilot, a completely reimagined version of the Builder Figma-to-code plugin that will save developers 50-80% of the time they spend turning Figma designs into clean code.

With Visual Copilot, you can convert Figma designs into React, Vue, Svelte, Angular, Qwik, Solid, or HTML code in real-time, with one click on the Figma plugin. It uses your choice of styling library, including plain CSS code, Tailwind, Emotion, Styled Components and you can use AI to iterate the code for your preferred CSS library or JavaScript meta-framework (such as Next.js).

> [Try Visual Copilot](https://www.figma.com/community/plugin/747985167520967365) 

## How Visual Copilot uses AI to output clean code

The major difference between Visual Copilot and previous design-to-code tools is that we trained a specialized AI model from scratch to solve this problem. This means there's no need for special alterations to your Figma design files or workflow to convert them into high-performance, responsive code that aligns with your style.

![An image showing the flow from figma to Builder AI to Mitosis to initial code to a fine-tuned LLM to customized code](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F27ee61ddb7e944d58757d8c4349b66ad?width=705)

The heart of Visual Copilot lies in its AI models and a specialized compiler. The initial model, trained with over 2 million data points, transforms flat design structures into code hierarchies. Our open-source compiler, [Mitosis](https://github.com/BuilderIO/mitosis), takes this structured hierarchy and compiles it into code. In the final pass, a finely tuned Large Language Model (LLM) refines the code to match your specific framework and styling preferences. This multi-stage process ensures that the generated code is high-quality and tailored to meet the requirements of your project.

## Visual Copilot features

### One-Click Conversion

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Ff0f19158a6df46e78376c76c15682708%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=f0f19158a6df46e78376c76c15682708&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source>
</video>

With one click, Visual Copilot helps you convert a Figma design to high-quality components in your framework. This significantly speeds up the development process, making it much faster to get from design to a working webpage or mobile experience.

### Automatic Responsiveness

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fde6f78044d7546659be647a7d24e1aa7%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=de6f78044d7546659be647a7d24e1aa7&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source>
</video>

Visual Copilot automatically adjusts components to fit all screen sizes, eliminating manual tweaks for mobile responsiveness. As you resize your screen, the design seamlessly adapts.

### Extensive Framework and Library Support

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F6cec817dedbb48098a6d3ec8d9b098ab%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=6cec817dedbb48098a6d3ec8d9b098ab&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source>
</video>

Visual Copilot supports React, Vue, Svelte, Angular, Qwik, Solid, and HTML and seamlessly integrates with various styling libraries like plain CSS, Tailwind, Emotion, Styled Components, and Styled JSX. It supports many frameworks so you can feel confident that the code will be clean, easy to read, and integrate seamlessly into your codebase out-of-the-box today.

### Customizable Code Structure

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F13ea2fdc4de04f8ca207ff204b3d7921%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=13ea2fdc4de04f8ca207ff204b3d7921&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source>
</video>

After code generation, you can structure the code to your preferences, ensuring consistency across the codebase. Be it utilizing specific components or iterating hard-coded content to use props.

### Easy Integration with Your Codebase

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F4cc4d00073344e089fdaa825d4db3ed1%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=4cc4d00073344e089fdaa825d4db3ed1&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source>
</video>

Getting started is as easy as copying the code directly from Visual Copilot - no integration is required. To sync components without the back-and-forth copying and pasting, you can automatically sync the generated code to your codebase, making it a seamless part of your development workflow. It's about reducing the friction of integrating generated code and ensuring a smooth transition from design to a live, production-ready codebase.

## Design to production in one click

The core essence of Visual Copilot lies not just in reducing the time spent in translating designs into code, but in catapulting designs straight into live production with minimal friction. The true objective behind any design is to have it interacted with by users, and that's precisely what we've honed in on.
  

In a Builder.io integrated application, adding a single component to your code can now unlock the potential of deploying infinite designs live, all within the defined guardrails and workflows. This is not just about speed, but about an enriched, streamlined, and simplified workflow that eliminates numerous intermediary steps traditionally required to take a design live.

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F0242097e19cc47998c165563ae120e16%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=0242097e19cc47998c165563ae120e16&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source>
</video>

For instance, upon importing a design, with just a single click, you can publish it to your live production website. This process is devoid of any cumbersome steps such as naming or manual code adjustments. The live site gets updated in real time via our robust publishing API, without the need for any code deployment or commits. This is about as real-time as it gets, ensuring that the designs are not just quickly converted to code, but are immediately available for user interaction on the live platform.

### Copy-Paste Designs to Builder

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fff772463e8794813b4f74cf1ae85e715%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=ff772463e8794813b4f74cf1ae85e715&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source>
</video>

With just a simple copy from Figma and paste into Builder, you can effortlessly import either entire design sections or individual components, keeping your workflow smooth as your designs evolve. This feature is engineered for those spontaneous design iterations, ensuring your development workflow remains smooth and uninterrupted.

## Coming soon for Visual Copilot

### AI uses your components
<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Ff71dd7371db4416eb4ab77f88221d2e6%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=f71dd7371db4416eb4ab77f88221d2e6&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source>
</video>

After gathering feedback from dozens of designers and developers in large organizations, we've found that even teams with well-maintained design systems, cross-platform design tokens, and component libraries in Storybook still need help developing experiences that match what the designers conceived. That's why we've launched a private beta for teams with components in Figma and their codebase. This feature in Visual Copilot uses AI to map reusable components in your Figma file to those in your code repository and generates code using your existing components when you have them. It's especially beneficial for teams with many components and strict design guidelines.

### Automatic Figma to Builder sync

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F52860ac8bef5449bbc55322928aec228%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=52860ac8bef5449bbc55322928aec228&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source>
</video>

Another common piece of feedback we received during research and development for Visual Copilot was that designs often change in Figma. To streamline the design-to-development workflow even further, teams wanted a way to automatically update experiences in the Builder when they make changes to designs in Figma. Coming soon, you can connect a Figma Artboard to an entry in Builder so you can “push” changes you make in Figma to your content in Builder.  
  
Custom Components support and Automatic Figma to Builder Sync are currently in private beta. To get access to those two features, [sign up here](https://www.builder.io/m/velocity-beta-features).  

# Try Visual Copilot today

Visual Copilot is free for a limited time while in beta, and you can try it today.  
  

1. [Try the Builder.io Figma plugin](https://www.figma.com/community/plugin/747985167520967365)
2. [Read the docs](https://www.builder.io/c/docs/import-from-figma)

##### _Read the [full post](https://www.builder.io/blog/figma-to-code-visual-copilot) on the [Builder.io blog](https://www.builder.io/blog)_