Connect a design library
Point the agent to your design library so every success state uses your real buttons, icons, typography, and color tokens—ready to ship, not rebuild.
Generate success states right on your canvas
Create confirmation screens, completion messages, and celebration moments with AI—directly in Figma Design. Use your real components and styles, skip the placeholder UI, and keep building.
Explore success states in higher fidelity
The agent generates real options using your components and tokens, so you can evaluate and iterate on ideas that are actually ready to ship.
Generate with your design system
Figma's agent creates success states using your actual components, icons, and tokens—not placeholder UI you'll need to rebuild. Every generated screen matches your existing design language from the start.
Cut the busywork, stay in flow
Stop recreating the same confirmation patterns from scratch. Describe what the user accomplished and let the agent scaffold the celebration moment, so you can focus on the interaction that matters.
Align your team, close the loop
Success states generate in the same file your team works in. Everyone sees the full context—the prompt, the iteration history, the final output—without a separate handoff or export.
The features behind the generation
A closer look at what sets Figma's agent apart, built for the way design teams actually work.
Parallel prompting
Explore multiple success state directions at once. Try different copy, layouts, or celebration styles simultaneously—not one at a time.
Shareable threads
Share a thread and your team sees the full prompt, context, and iteration history behind any generated state. No separate handoff needed.
Build reusable skills
Turn your best success state prompts into reusable /commands. Package the workflow once, then use it across projects and share it with 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 work in, or select an existing screen to build from.
Describe the success state
Tell the agent what the user accomplished and what the confirmation should communicate. Point to your design library so it uses your real components.
Review on the canvas
Check the generated success state. Not quite right? Refine in the same thread or start a parallel one to explore a different celebration style.
Keep iterating
Everything stays editable on the canvas. Prompt again to adjust the copy or layout, or fine-tune by hand until the moment feels right.
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 success state generator helps you create confirmation screens, completion messages, and celebration moments from a prompt instead of building them from scratch. With Figma's agent, you describe what the user accomplished and the agent generates the success state directly on your canvas using your design system components. It's a faster way to explore ideas and scaffold UI states.
A well-crafted success state typically includes a clear confirmation message, relevant context about what was completed, and a path forward for the user. It might feature celebratory visuals, a summary of the action taken, and next-step options. Figma's agent can generate all of these elements using your existing components, giving you a solid starting point to refine.
Open Figma's agent from the left side rail or hit CMD + Enter. Describe the action the user completed and what the confirmation should communicate—like 'payment successful' or 'profile updated.' The agent generates the success state on your canvas using your design library. Refine with follow-up prompts or edit directly until it's ready.
Success states are the screens or messages users see after completing an action—submitting a form, finishing a purchase, or reaching a milestone. They confirm the action worked, reassure the user, and often guide them to the next step. Designing clear, on-brand success states improves trust and keeps users oriented in your product.
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