What’s New In The GA Release of Visual Copilot
Improved Accuracy And Code Quality
Match My Code Style (Beta Feature)
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.
Introducing Component Mapping Beta: Generate Code That Uses Your Components
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.
How Component Mapping Works
1. Use AI to Help Map Your Figma Components to Code Components
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.
2. Generate Code Using Your Components
Visual Copilot will detect and use your components in the code.
3. Copy & Paste Code, Export It, Or Deploy It To Your Infrastructure
You choose how you want to integrate the code into your codebase.
Coming Soon: Component Set Generation & Prompt-to-Design
Component Set Generation: Automatically Turn Figma Component Sets Into Code Components
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.
Prompt-to-Design: Generate Designs In Figma Using Your Design System
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.
Helpful Resources To Get Started Today
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:
- Join 600,000 others by trying the Figma plugin
- Read the Custom Component Mapping docs
- Get on the waitlist for early access to Component Set Generation and Prompt-to-Design
Introducing Visual Copilot: convert Figma designs to high quality code in a single click.
