Connect to a design library
Generate and refine using your actual components, tokens, and variables—not placeholder UI you'll have to swap out later.
Generate checkout flows on your design canvas
Build complete ecommerce checkout experiences with Figma's agent—using your real components, tokens, and styles. Describe the flow you need and see it take shape directly in your file.
Explore checkout options in higher fidelity
Generate real checkout flows using your design system, so every screen feels production-ready from the start.
Explore more directions, faster
Figma's agent generates complete checkout flows using your actual components and styles—not placeholder wireframes. Test different step counts, layouts, and progressions without starting each one from scratch.
Cut the scaffolding, keep the flow
Skip the repetitive work of setting up cart summaries, form fields, and payment screens. Describe what you need and let the agent build the structure so you can focus on the experience.
Align your team from the start
Generated checkout flows live in the same file your team works in. Everyone sees the latest version, can comment inline, and build on it immediately—no separate handoff required.
The features behind the agent
A closer look at what sets Figma's agent apart, built for the way design teams actually work.
Parallel prompting
Run multiple prompts at once so you're evaluating directions in parallel, not burning time on each one in sequence.
Shareable threads
Share a thread and your team sees the full prompt, context, and iteration history behind any design. No separate handoff needed.
Skills
Package your team's workflows and conventions into reusable /commands anyone can run on demand.
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
Step 1: Open the agent
Select Agents in the left side rail or hit CMD + Enter. Add a frame to your canvas where the checkout flow will generate.
Step 2: Describe your checkout flow
Tell the agent what you need—number of steps, payment options, guest checkout support. Point it to your design library so it uses your real components.
Step 3: Review on the canvas
Check the generated screens on your canvas. Refine in the same thread or start a parallel one to explore a different flow structure.
Step 4: Keep iterating
Prompt again to adjust steps, add upsells, or change the layout. Everything stays editable, so you can fine-tune by hand or keep prompting.
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
A checkout flow generator helps you build the screens and steps users move through when completing a purchase—cart review, shipping details, payment, and confirmation. Figma's agent generates these flows directly on your canvas using your design system, so you get production-ready screens instead of generic wireframes. It speeds up the process of exploring different checkout structures and layouts.
Open Figma's agent from the left side rail or hit CMD + Enter. Describe the checkout flow you need—number of steps, guest checkout option, payment methods—and point the agent to your design library. The agent generates the screens on your canvas using your real components. From there, you can refine with follow-up prompts or edit by hand.
A complete checkout flow typically includes a cart summary, shipping information form, payment details, order review, and confirmation screen. Depending on your product, you might add guest checkout options, saved addresses, promo code fields, or upsell modules. Figma's agent can generate all of these using your existing components—just describe what you need in your prompt.
There's no single right answer—it depends on your product and audience. Some ecommerce sites use a single-page checkout for speed; others break it into three to five steps for clarity. Figma's agent lets you generate and compare different step counts in parallel, so you can evaluate what works best for your users before committing to one approach.
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