Figma Accordion

Preview

Figma Accordion

The Accordion is a lightweight UI component that expands and collapses content, commonly used for Figma FAQs, product features, and help sections.

Accordion Anatomy

Set	Variants	Properties
Accordion	16	Type Default, SecondarySize Small, MediumState Collapsed, Collapsed Hover, Expanded, Expanded Hover
AccordionGroup	24	Type Default, SecondarySize Small, DefaultItems x3, x4, x5, x6, x7, x8

The kit ships Accordion in Default and Secondary types at two heights, 56px Small and 72px Medium, each in Collapsed, Collapsed Hover, Expanded and Expanded Hover states — 16 variants — plus a 24-variant AccordionGroup stacking three to eight items.

Accordion AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build an Accordion component in Figma with two component sets. Accordion: a rounded white card with the title row in semibold dark text on the left and a grey chevron on the right, in Default and Secondary types and two sizes — Small at 56px and Medium at 72px row height — with four states: Collapsed, Collapsed Hover, Expanded and Expanded Hover. In the Expanded states the chevron points up and a muted grey answer line sits under the title inside the same card; hover states deepen the card shadow. Then build an AccordionGroup set with Default and Secondary types, Small and Default sizes, and an Items property from x3 to x8 that stacks that many Accordion instances in a vertical auto layout with a consistent gap, first item expanded. Wire the row as an interactive component so clicking a collapsed row swaps it to its expanded variant and back. Keep fills, text colours and strokes on variables so the whole set switches between light and dark mode without detaching instances.

Accordion can function as a standalone element or within a group to organize multiple entries. Ideal for answering user questions, revealing hidden content, and improving page structure.

Source