Connect a design library
Point the agent to your design library so every generated variant uses your real components, tokens, and variables—not generic placeholders.
Generate component variants with a prompt
Tell Figma's agent what variants you need—different states, sizes, themes—and it builds them using your real components and tokens. Explore dozens of options without the manual setup.
Expand your system faster, together
Generate production-ready variants that stay connected to your library, so your team can build on them immediately.
Explore more variants in higher fidelity
Figma's agent generates real component variants using your design tokens, styles, and existing components—not placeholder mockups. Every variant is production-ready and connected to your system from the start.
Cut the busywork, stay in flow
Skip the tedious setup of duplicating frames, swapping properties, and renaming layers. Describe the variants you need—hover states, size scales, theme variations—and let the agent handle the repetitive scaffolding.
Align your team, close the loop
Generated variants live in the same file your team works in. Everyone sees the options, the prompt history, and the decisions—nothing gets lost in a handoff or buried in a separate branch.
The features behind variant generation
A closer look at what sets Figma's agent apart, built for the way design teams actually work.
Parallel prompting
Explore multiple variant directions simultaneously. Generate size scales in one thread while testing color themes in another, without waiting.
Shareable threads
Share a thread and your team sees the full prompt, context, and iteration history behind every variant decision. No separate documentation needed.
Refine with follow-up prompts
First batch not quite right? Adjust with another prompt in the same thread or open a parallel one to try a different approach without losing progress.
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. Have your base component ready on the canvas or in your library.
Describe the variants
Tell the agent what variants to generate—sizes, states, themes, or density options. Point to your design library so it uses your real tokens.
Review on the canvas
Check the generated variants on your canvas. Refine in the same thread or start a parallel one to explore a different direction.
Keep iterating
Prompt again to add more variants or adjust existing ones. Everything stays editable, so you can fine-tune by hand or publish to your library when ready.
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
AI component variant generation uses artificial intelligence to automatically create multiple versions of a design component—different states, sizes, themes, or configurations—from a single prompt. Figma's agent handles this directly on your canvas, building variants that use your real design system tokens and stay connected to your library.
Figma's agent reads your prompt, references your connected design library, and generates variants using your actual components, tokens, and variables. You describe what you need—hover states, size scales, dark mode versions—and the agent builds them on your canvas as editable, production-ready components.
AI variant generation eliminates the repetitive manual work of duplicating components, swapping properties, and reconnecting tokens. You explore more options faster, keep everything connected to your design system, and free up time for the design decisions that actually matter.
Figma's agent can generate variants across different size scales and breakpoint configurations when you describe them in your prompt. The generated variants use your existing auto-layout settings and constraints, so they remain responsive and editable on the canvas.
Figma's agent is available on all paid Figma plans. You'll find it in the left navigation bar 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