Visual Copilot: From Figma Design to Code
Key Features & Advancements
Problem with AI-generated Code
- AI code is generic; doesn't reuse existing design systems/components.
- Personal coding often involves reusing a codebase full of components.
Visual Copilot 1.0 Enhancements
- Tailored Coding: AI learns to code like you do.
- From generic design to personalized code.
- Imports and reuses existing components from your design system.
- One-Click Transformation: Turn designs into code, sync to codebase, and publish instantly.
Natural Language Prompts
- Generate initial drafts using design systems and tokens from natural language prompts.
- Works with any design system to create on-brand experiences.
- Supports multiple brands/styles.
Integration & Workflow
- Maintain current workflows with review, collaboration, and approval steps.
How It Works
Figma Integration
- Launch Figma plugin to integrate.
Code Understanding
- Install builder's dev tools with one command.
- CLI scans components in your repo and third-party libraries (e.g., Material UI, ShadCN).
- Auto-mapping AI recommends component mapping from Figma to code.
- Mapping Functions: Provide precise, type-safe control of component mapping.
Handling Missing Components
- Generate reusable code with prop types if Figma components are missing in codebase.
- High-quality, reusable components that match design specifications.
Custom Instructions Feature
- Provide real code examples to match your unique coding style.
Improvements Since Beta Release
- Over 600,000 installs of the Figma plugin.
- Features: Component mapping, custom instructions, AI accuracy, speed, and quality improvements.
- Upcoming: Generate designs using components with natural prompts, export component sets as reusable code.
Getting Started
- Sign up for the waitlist at builder.io/waitlist.
- Request a personalized demo at builder.io/demo.
Visual Copilot aims to help turn your ideas into live production sites/apps quickly and efficiently.