Generate Figma Designs with AI

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

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 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.

Figma AI features

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.

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.

What is Figma Make?

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.

Current limitations of Figma AI and Figma Make

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.

A flow chart showing how Figma Make creates code that developers must adapt to overcome key challenges before it reaches production.

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?

Design in code with Fusion

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.

Generate designs using your design system

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.

Complete context of your product

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.

Easily test responsive designs

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"

Capture inspiration from any website

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

Turn requirements into working designs

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

Design with your real data

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

Visual editing that becomes code in real time

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

From designs to functional code

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

Safe experimentation with Git branches

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

Getting started with Fusion

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.

The power of visual development

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.

Convert Figma designs into code with AI

Generate clean code using your components & design tokens

Try Fusion Get a demo

AI