Connect your design library
Point the agent to your library so wireframes use real components, spacing tokens, and layout patterns—not generic placeholders you have to replace.
Generate wireframes with an AI agent on canvas
Describe your idea and Figma's agent builds wireframes directly in Figma Design—using your components, respecting your constraints, and placing everything on the shared canvas your team already works in.
From idea to structure, faster than before
Figma's agent generates wireframes using your real design system, so you're building on a foundation that matches how you actually work.
Explore more layouts in higher fidelity
The agent generates real wireframes using your components and styles—not placeholder boxes. You get structured starting points you can actually use, not rough sketches you have to rebuild from scratch.
Cut the blank canvas problem
Describe your idea and see it take shape. Hand off the early scaffolding work so you can focus on refining the structure and making design decisions that matter.
Keep your team aligned from the start
Wireframes land in the same file your team works in. Everyone sees the structure, the prompt, and the iteration history—nothing gets lost in a separate tool or handoff.
The features behind the wireframes
A closer look at what sets Figma's agent apart, built for the way design teams actually work.
Run prompts in parallel
Explore multiple layout directions at once. Start several threads to test different structures without waiting for one to finish before trying another.
Shareable threads
Share your wireframing thread and your team sees the full prompt, context, and every iteration. No screenshots or separate explainers needed.
Package workflows into skills
Turn your best wireframing prompts into reusable skills. Run them again for new pages or features without rewriting the same instructions.
Figma feels like a natural extension of my hand. I do my design ideation on the canvas, and now the agent takes it the last mile. With my design libraries connected, I can move from design to code faster than ever before.
Andy Madrick
Product Designer, Notion
Get started with Figma's agent
Open the agent
Select Agents in the left side rail or hit CMD + Enter. Add a frame to your canvas to work in.
Describe your wireframe
Tell the agent what you need—a dashboard layout, a settings page, a checkout flow. Point to your design library so it uses your real components.
Review on canvas
Check the wireframe on your canvas. Refine in the same thread or start a parallel one to explore a different structure.
Keep iterating
Prompt again until the layout is right. Everything stays editable, so you can adjust by hand or turn the workflow into a reusable skill.
Become an agent expert
The Figma design agent is here
Read moreWatch Figma's AI Agent in action and see how to put it to work in your own workflows.
Work with the Figma agent
Get startedHands-on playground to explore Figma agent's capabilities — from bulk edits to feedback implementation — with step-by-step guidance built right in.
How to use Figma agent in your design workflows
Watch nowLearn how to use Figma agent in your design workflows with a step-by-step tutorial from the Figma team.
FAQ
An AI wireframe agent helps you generate structured layouts from a text description. Instead of starting with a blank canvas, you describe what you need—a homepage, a settings panel, a user flow—and the agent builds a wireframe you can refine. Figma's agent does this directly on your canvas using your real components.
Figma's agent reads your prompt, references your connected design library, and generates wireframes on the canvas using your actual components and spacing tokens. You can refine with follow-up prompts, run parallel threads to explore different directions, and keep iterating until the structure is right.
Yes. Figma's agent generates wireframes based on your description. You provide the idea and constraints, and the agent builds the structure. The output uses your real design system, so you're not rebuilding from generic placeholders.
Figma's agent can generate a wide range of wireframes—dashboards, landing pages, mobile screens, settings panels, checkout flows, and more. The output depends on your prompt and the components in your connected library. It's best for structured layouts you plan to refine and build on.
Figma's agent is available on all paid Figma plans. You'll find it in the left side rail in Figma Design. During the current open beta, it doesn't consume AI credits—so it's a good time to explore, experiment, and share your feedback with us.
Build faster with Figma's agent