Introducing Visual Copilot: A Better Figma-to-Code Workflow

A staggering 79% of frontend developers 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

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

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

With one click, Visual Copilot helps you convert a Figma design into high-quality components for your framework. This significantly speeds up the development process, making it much faster to move from design to a working webpage or mobile experience. Instead of spending time creating and iterating on prototypes, Visual Copilot enables teams to leap directly to generating live, interactive previews of websites.

Automatic Responsiveness

Visual Copilot ensures pixel-perfect accuracy, automatically adjusting components to fit all screen sizes, eliminating manual tweaks for mobile responsiveness. Even if your designs don't strictly follow Figma's auto-layout conventions, Visual Copilot intelligently interprets and adapts your designs. As you resize your screen, the design seamlessly adapts.

Extensive Framework and Library Support

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

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

Easy Integration with Your Codebase

Visual Copilot is designed to be developer-friendly. Getting started is as easy as copying the code directly from the tool - you don't have to manually export code or worry about integration. 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, offering unmatched functionality for developers.

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.

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

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, thus alleviating the handoff process from designers to developers.

Coming soon for Visual Copilot

AI uses your components

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

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.