Connect a design library
Point the agent to your design library so every accordion it generates uses your real components, tokens, and variables—not placeholder UI you'll have to rebuild.
Generate accordion components right on your canvas
Create expandable sections, FAQ accordions, and collapsible UI with AI—directly in Figma Design. Tell the agent what you need, and it builds using your real components and styles.
Explore accordion variations in higher fidelity
Figma's agent generates real accordion components on your shared canvas, connected to your design system—so you can explore options your team can actually use.
Generate with your real components
Figma's agent builds accordions using your actual design tokens, variables, and component library. Every expandable section matches your existing system, so there's nothing to rebuild or restyle after generation.
Cut the busywork, stay in flow
Skip the tedious work of building repetitive accordion states by hand. Describe what you need—FAQ sections, expandable menus, collapsible content—and the agent scaffolds it while you focus on the design decisions that matter.
Align your team, close the loop
Generated accordions land in the same file your team works in. Everyone sees the component, the prompt behind it, and the iteration history—nothing lost in export or handoff.
The features behind accordion generation
A closer look at what sets Figma's agent apart, built for the way design teams actually work.
Parallel prompting
Explore multiple accordion directions at once. Run prompts in parallel to compare layouts, expand/collapse states, and content structures simultaneously.
Shareable threads
Share your thread and teammates see the full prompt, context, and iterations behind any accordion. No separate documentation or handoff needed.
Skills
Turn your accordion generation workflow into a reusable /command. Package your preferred prompt patterns so you or your team can run them again with a single trigger.
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 the canvas where you want the accordion to appear.
Describe your accordion
Tell the agent what kind of accordion you need—FAQ section, expandable menu, collapsible cards. Point to your design library so it uses your real components.
Review on the canvas
Check the generated accordion on your canvas. Refine in the same thread or start a parallel one to explore a different layout or content structure.
Keep iterating
Prompt again to adjust states, spacing, or content. Everything stays editable, so you can fine-tune by hand or save the workflow as 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 accordion generator creates expandable UI components—like FAQ sections, collapsible menus, and toggle content—from a text prompt. Figma's agent generates accordions directly on your design canvas using your actual components and design tokens. The output is fully editable, so you can refine states, content, and styling without rebuilding from scratch.
Figma's agent reads your prompt and references your connected design library to build accordion components. It uses your real tokens, variables, and component variants to create expandable sections that match your existing system. You describe what you need—an FAQ accordion, a settings panel, a collapsible list—and the agent builds it on your canvas.
Figma's agent generates visual accordion components on your design canvas—the accessibility of the final implementation depends on how your development team builds it. The agent helps you explore layouts and content structures faster, but semantic HTML, ARIA attributes, and keyboard interactions are handled in code during development.
In Figma Design, open the agent and describe the FAQ accordion you need—number of items, content style, expand/collapse behavior. Connect your design library so the agent uses your real components. Review the output on your canvas, then refine with follow-up prompts or run parallel threads to compare different structures.
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