Last updated: 7th October, 2025
"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 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.
Before Figma built their own AI features and capabilities, 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.
As a designer, you spend a lot of time in your design process organizing design elements, finding the right assets, and putting it all together. Figma's AI toolkit is now publicly available and 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. Just a few words can generate entire screens.
Smart duplication: Duplicate elements with AI generated content variations. Perfect for creating lists and grids quickly without Lorem Ipsum.
Text improvements: Generate relevant text that fits your product's tone. Rewrite and translate text directly in your designs into different languages.
Visual search: Upload an image to find matches or similar designs in your team's work. Makes finding assets and icons 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 one click. No need for manual selection.
Instant prototyping: Turn static designs into interactive prototypes automatically. Saves time on manual connections.
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:
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.
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.
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.
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.
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.
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.
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.
Figma recently launched Figma Make, an AI powered platform that takes things further by generating interactive prototypes from natural language prompts. You can describe what you want to build, like "a carousel of products for a pet supply store" and Figma Make creates the complete experience.
The tool lets you create component states, set up interactions, build user flows, and even generate missing screens. It's great for rapid prototyping and stakeholder presentations, giving you the ability to visualize ideas quickly and test concepts with clickable flows.
While Figma's AI powered features are impressive, there are important considerations when building real products:
The div soup problem: Figma Make generates interactive prototypes, but the exported code is HTML div soup. It's not production-ready and doesn't use your actual design system or code components. Developers still need to rebuild everything from scratch using your team's component library and coding standards.
The design to code gap: Both Figma AI and Figma Make are great for cranking out designs and prototypes, but there's still a big gap between a great looking mockup and functional code. This is where things usually slow down. Designers hand off their work, and developers have to figure out how to transform it into a real website or app using the actual design elements and brand colors from your design system.
This is exactly why we built Fusion at Builder.io, to bridge this gap between design and implementation. Instead of generating static mockups or interactive prototypes that need to be rebuilt in code, what if we could generate production-ready components from the start?
Our approach is straightforward: since designs need to become code anyway, why not do both at the same time? Instead of designing mockups that get rebuilt, you design directly in your actual codebase. This changes how teams create and ship features.
Fusion takes a different approach than other AI tools. Instead of generating generic designs, it starts by understanding what you've already built:
- Generate designs using natural language prompts, just like in Figma
- Use your actual components, design tokens, and brand colors automatically
- See both the visual preview and corresponding code in real time
The platform can work with all your design elements, from icons and headers to image backgrounds and logos. You're generating production-ready components in your repository that can go live immediately.
Fusion isn't another AI demo generator. Its power lies in its ability to actually understand your product. By connecting your project repo:
- 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, data models, and business logic
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.
See how your designs perform across different screen sizes:
- Get responsive layouts that work across mobile and desktop automatically
- Test with real content that varies in length and not placeholder text
- Prompt the AI to handle responsive variations: "Make this grid stack on mobile"
See a layout you want for your site?
- Use the Chrome extension to grab that specific section from any website
- Tell Fusion "Add this to our site" in natural language
- It captures the structure but redesigns using your components and brand
Attach your PRDs, design specs, and documentation:
- Tell Fusion "Add the new sales pipeline section from the requirements"
- It reads everything and understands the metrics to display
- Your PM's requirements become implemented designs with proper integration
Lorem ipsum breaks designs. Work with actual content instead:
- Connect your database and describe what you need
- Test with real user names and dynamic content across mobile and desktop
Select any element and adjust its style visually in the platform:
- Fine tune padding, tweak colors, resize components
- Customize layers and spacing with precision
- Point to specific elements and make surgical updates
- The AI writes your visual changes directly to reviewable code that follows your team's standards
In Fusion, your designs come to life in the browser:
- Import multiple Figma frames and transform them into a single functional component
- Use your actual data instead of Lorem Ipsum
- Edit elements visually and see changes instantly in real code
- Create variations and test with real content across mobile and desktop
Every change happens on a git branch:
- Try wild concepts and test with real data
- Create a pull request when ready
- Your team reviews actual code changes and not mockups
- Discard the branch if you’re not happy with a particular version
Here's how to get started:
- Sign up for Fusion - Head to builder.io/fusion and create your free account
- Connect your GitHub repository - Link your existing codebase so Fusion understands your components, design system, and coding standards
- Generate your first design - Describe what you need in natural language and watch Fusion create production-ready components using your actual code
- Add functionality - Tell Fusion what your component should do: "Add a dropdown filter for product categories" or "Connect this to our user API"
- Import from Figma - Install the Builder.io Figma plugin from the community tab, select any design in your Figma file, and export it directly to Fusion to transform mockups into working code
- Create a pull request - When you're happy with the result, push your changes for team review
You can also start fresh without an existing project and Fusion will generate everything using modern frameworks and your preferred design system. But connecting your codebase gives Fusion the context to build exactly how your team would, following your patterns and standards from day one.
Figma AI and Figma Make are useful tools for design exploration and stakeholder communication. But building modern websites and apps requires more than static designs or div soup prototypes.
Fusion bridges that gap, letting you create designs and functional code at the same time. Your creative vision becomes reality without rebuilding. The workflow stays fast, but now what you create actually ships to users.
Try Fusion for free and turn your next Figma design into production code.
Builder.io visually edits code, uses your design system, and sends pull requests.
Builder.io visually edits code, uses your design system, and sends pull requests.
Connect a repo
