Connect your design library
Point the agent to your existing library so every generated component uses your real tokens, variables, and styles—not generic placeholders.
Generate component libraries right on your canvas
Build buttons, cards, inputs, and full component sets with AI—directly in Figma Design. Your agent uses your existing tokens and styles, so every piece fits your system from the start.
Build your library faster, with less busywork
Figma's agent generates production-ready components on your canvas, using your design system's tokens, variables, and styles.
Explore more variants in higher fidelity
Generate multiple component variations at once—different sizes, states, themes—all built with your real design tokens. See true-to-system options on your canvas, not placeholder mocks you'll need to rebuild.
Cut the scaffolding, keep the craft
Skip the repetitive setup of building every button state and card variant from scratch. Let the agent scaffold the structure while you focus on the design decisions that make your system shine.
Align your team around one source
Every generated component lands in the same file your team works in. Designers, developers, and stakeholders see the same source—no exports, no version drift, no separate handoffs.
The features behind the components
A closer look at what sets Figma's agent apart, built for the way design teams actually work.
Run prompts in parallel
Generate multiple component directions simultaneously—a primary button set in one thread, secondary variants in another—without waiting between runs.
Shareable threads
Share a thread and your team sees the full prompt, context, and iteration history behind any component. No separate documentation needed.
Package workflows as skills
Turn your best component generation prompts into reusable skills. Run them again for new components or share them across your team.
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 where the components will generate.
Describe your components
Tell the agent what to build—button variants, card layouts, input states. Point it to your design library so it uses your real tokens and styles.
Review on the canvas
Check the generated components on your canvas. Refine in the same thread or start a parallel one to explore a different direction.
Keep iterating
Prompt again to add states, adjust spacing, or generate related components. Turn working prompts into reusable skills for next time.
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 component library generator helps you build UI components—buttons, cards, inputs, navigation elements—from text prompts instead of starting from scratch. Figma's agent generates these components directly on your canvas using your existing design tokens and variables. The result is production-ready components that already fit your design system, not generic pieces you need to rebuild.
Figma's agent reads your prompt and references your connected design library to understand your tokens, variables, and styles. It then generates components on your canvas that use those real system elements. You can ask for multiple variants at once, refine with follow-up prompts, and everything stays fully editable in your file.
Figma's agent can generate individual components and component sets, including multiple states and variants. You describe what you need, point the agent to your design library, and it builds components using your actual tokens. The agent handles the scaffolding while you focus on refining the details and publishing to your library when ready.
Components generated by Figma's agent use your real design tokens, variables, and styles—so they're built to your system's specifications from the start. Everything lands on your canvas as fully editable layers, meaning you can fine-tune details before publishing. The agent gets you to a production-ready starting point faster, but you stay in control of the final output.
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