Made in Builder.io

Announcing Visual Copilot - Figma to live in half the time

Builder.io logo
Talk to Us
Platform
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

‹ Back to blog

Visual Copilot

Announcing Visual Copilot 1.0: General Availability, Bring Your Own Components, And More

March 13, 2024

Written By Steve Sewell

In October, we launched the Visual Copilot Beta. Our goal was to dramatically shorten the time developers spend turning a Figma design into code that looks like code they would write themselves. To do that, we made sure that Visual Copilot outputted clean code, made everything responsive, and let developers iterate the code with AI.

In the beta phase, developers said Visual Copilot saved them between 50% to 80% of the time they would have spent turning Figma designs into code.

Today, we're thrilled to announce the general availability of our design-to-code automation tool, Visual Copilot.

What’s New In The GA Release of Visual Copilot

With the general availability release of Visual Copilot, we're introducing two additions:
We've significantly improved Visual Copilot across the board to ensure even greater precision in converting designs into clean, responsive code.

This new feature lets you better train Visual Copilot to adapt its output to match your existing code style, ensuring consistency across your codebase.

Plus, we’ve published documentation on AI Usage. We don’t train on your data, and we’ve published detailed documentation on how we use AI to power Visual Copilot so you can feel confident using it at any scale here.

Visual Copilot helps teams generate code from scratch, but most projects aren’t built from scratch. They leverage existing design systems and component libraries. For sophisticated teams, the amount of reuse can be very high: at Headspace, design tokens and components make up, on average, 85% of a single design file (source).

For a tool to truly turn designs into code that looks like code developers would write themselves, it needs to leverage these existing components.

That’s why we’re launching the beta for the most requested feature we have ever had at Builder.io: Component Mapping. When you use Component Mapping, Visual Copilot will use your existing code components to generate experiences. That way, you can speed up development timelines while getting closer to pixel-perfect, consistent experiences.

Component Mapping is available in beta for Next.js and Remix projects today. To get started, read the docs.

Visual Copilot uses AI semantic matching to automatically detect which components in your codebase map to your components in Figma. You have complete control to change or remap any components if the AI gets it wrong or misses a component.

Visual Copilot will detect and use your components in the code.

You choose how you want to integrate the code into your codebase.

Most components aren't static, and they often have many variations. For example, a button in Monday.com’s design system has 936 variations, including size (xs, small, medium, large), kind (primary, secondary, tertiary, danger), state (regular, hover, active), icon (default, left, right), and so on. In some cases, it can take a developer days to code up a single new component with all the right variations and properties.

With Component Set Generation, developers can select a component set in Figma (no matter how many variations it has), click a button in the Visual Copilot Figma plugin, and instantly generate a new dynamic component with props in seconds.

Component Set Generation is nearing beta release. To get on the waitlist for early access, fill out the form here.

For some teams, the bottlenecks to creating new components, webpages, and mobile screens begin all the way back in the idea-to-design workflow. Teams might have a sophisticated design system in Figma, with design tokens and components, but bringing everything together to create something new can still take days or, in some cases, weeks.

With Prompt-to-Design in the Visual Copilot Figma plugin, designers can type a prompt to generate entire pages, layouts, and experiences in Figma using their design system and Figma components. And, it isn’t limited to generating new designs; you can modify existing designs.

Prompt-to-Design is nearing beta release. To get on the waitlist for early access, fill out the form here.

As we launch Visual Copilot 1.0, our mission remains clear: eliminate bottlenecks to shipping web and mobile experiences. Here's how you can make the most of Visual Copilot starting today:

  1. Join 600,000 others by trying the Figma plugin
  2. Read the Custom Component Mapping docs
  3. Get on the waitlist for early access to Component Set Generation and Prompt-to-Design

Introducing Visual Copilot: a new AI model to convert Figma designs to high quality code using your existing components in a single click.

Try Visual Copilot

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 Copilot
Newsletter

Like our content?

Join Our Newsletter

Continue Reading
Web Development8 MIN
Server-only Code in Next.js App Router
WRITTEN BYVishwas Gopinath
April 3, 2024
Web Development8 MIN
Material UI: Convert Figma Designs to React Components
WRITTEN BYVishwas Gopinath
March 27, 2024
Web Development6 MIN
Qwik’s Next Leap - Moving Forward Together
WRITTEN BYThe Qwik Team
March 26, 2024