"Design me a landing page for a fintech app.”
A few years ago, this would have kicked off hours of creative exploration in Figma. Today, it's a prompt that can generate complete UI designs in seconds.
This is a big deal for designers, but it got me thinking — what happens after you've got that slick AI-generated mockup?
Figma AI
Figma AI is a suite of artificial intelligence features integrated into Figma and FigJam. The idea? Make design workflow easier for UI and UX designers by helping out with both creative and routine design tasks.
Figma AI plugins
Before Figma built their own AI features, designers were already experimenting with AI through figma plugins. Now that it's built right in, let's check out what Figma AI can actually do.
What can Figma AI do?
As a designer, you spend a lot of time in your design process — organizing design elements, finding the right design assets, and putting it all together. Figma's new AI toolkit is still in beta, but here's what it can do:
- First draft: Type in a description and get a full design to work with. It's great for rapid iteration and exploring ideas.
- Smart duplication: Duplicate elements with AI-generated content variations. Perfect for creating lists and grids quickly.
- Text improvements: Generate relevant text that fits your product's tone instead of using Lorem Ipsum. Rewrite and translate text directly in your designs.
- Visual search: Upload an image to find matches or similar designs in your team's work. Makes finding assets a lot easier.
- Smart layer renaming: It can rename and organize layers automatically. Your teammates might appreciate this one.
- Background removal: Take out image backgrounds with a single click. No need for manual selection.
- Instant prototyping: Turn static designs into interactive prototypes automatically. Saves time on manual connections.
How to use Figma AI
The AI features are easily accessible through the action button at the bottom of your Figma interface or by pressing ⌘ + k / Ctrl + k. Here's how to use each key feature:
First draft
Select First Draft from the templates (Basic App, App Wireframe, Basic Site, or Site Wireframe). Enter your prompt, like "e-commerce store for iPhone accessories with a search bar." Once generated, use quick actions to switch themes, adjust spacing, modify border radius, or make additional prompt-based changes.
Smart duplication
Create an auto-layout list or grid, then simply drag the handle at the bottom. The AI will automatically generate new content variations while maintaining design consistency.
Text improvements
Select any text element to access a range of AI-powered enhancements, including translation to different languages, tone adjustment (professional to casual), and length modification.
Visual search
Type what you're looking for or upload an image through the action menu. AI will find matching elements visually, regardless of naming, and help navigate to the found components.
Smart layer renaming
Select the layers you want to rename, choose "Rename Layers" from the action menu, and AI will automatically rename them based on their content and context.
Background removal
Select any image and choose "Remove Background" from the action menu. Within 30 seconds, you'll get a crisp, clean cut-out with impressive detail preservation.
Instant prototyping
Select up to 10 screens and choose "Make Prototype" for AI to automatically create basic navigation connections. You can then review and refine these connections as needed.
Current limitations of Figma AI
While Figma's new AI powered features are impressive, there are two important considerations:
- Limited availability: The beta is currently restricted to a small subset of users, making it challenging for teams to fully integrate these features into their workflows.
- The design-to-code gap: Figma AI is great for cranking out designs, but there's still a big gap between a great looking mockup and responsive code. This is where things usually slow down - designers hand off their work, and developers have to figure out how to turn it into a real website or app.
This is exactly why we built Visual Copilot at Builder.io — to bridge this gap between design and implementation. Instead of just generating static mockups that need to be rebuilt in code, what if we could generate functional, production-ready components from the start?
Improved design generation with Visual Copilot
Our approach is pretty straightforward: since designs need to become code anyway, why not do both at the same time?
When you bring your Figma designs into our Visual Development Platform, you can:
- Keep generating designs with AI, just like in Figma
- Generate code in real-time as you make changes
- Publish your work to production with one click when you're happy with it
Whether you're working on simple layouts or complex interfaces, Visual Copilot maintains your team's focus and style — from brand colors to fonts. The boost in development speed means you can iterate faster and get to your final product sooner.
Generate designs using your design system
- Generate designs using natural language prompts, just like in Figma
- Iterate on designs with AI-powered suggestions and variations
- See both the visual preview and corresponding code in real-time
This approach means you're not just creating static mockups — you're generating production-ready components that can go live immediately. No more lengthy handoff process between design and development teams.
Complete context of your product
Visual Copilot isn't just another AI demo generator. Its power lies in its ability to actually understand your product:
- It knows your Figma components, design tokens and documentation
- It knows your code components, coding standards, and development patterns
- It can connect to your APIs and data models, and business logic
This means describing complex features in just a few words gets you exactly what your team would build — using your design system, following your standards, connected to your services.
Static designs to interactive code
In Builder.io, your designs come to life:
- Make stuff interactive
- Use your actual data
- Edit things live and see changes instantly
- Deploy updates automatically through our headless CMS
Generate production-ready code
Visual Copilot turns your designs into code you can actually use, giving you dev ready websites that just work:
- Pick your favorite framework and styling setup
- Skip the prototyping phase and go straight to live previews
- It'll even make things responsive for mobile
Getting started with Visual Copilot
Using Builder.io's Visual Copilot plugin is straightforward and immediately accessible:
- Open the Visual Copilot Figma plugin.
- Select a layer or design in your Figma file.
- Click the Export to Code button.
- Copy the generated code into your project.
- Add animations, state, visual effects, and other required functionality with natural language prompts.
Figma AI is a neat step forward, but we need more than just static designs to build modern websites. Visual Copilot bridges that gap, letting you create designs and functional code at the same time.
Top comments (2)
It's great news that AI solutions have started to be actively implemented in Figma, because sometimes you have to sit for several hours for a simple landing page design, but this way at least the layout will be outlined and you can quickly replace the pictures and text there. Useful article.
Great article! The integration of AI into design workflows is such a game-changer, especially for developers like me who often juggle between code and UI/UX design.
I’m curious—how do you see this AI-driven approach evolving in terms of collaboration between designers and developers?