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:
- 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 code using your existing components in a single click.
