Designing accordions and collapsible panels in Figma: patterns, states, and handoff

Quick answer

Accordions in Figma are stacked disclosure panels—each row has a header (title + chevron) and collapsible content below. Build them as a published component with variants for state=expanded | collapsed, optional style=bordered | flush, and rules for single-open vs multi-open behavior. Use accordions for long settings lists, FAQs, and filter groups—not for primary navigation. Document keyboard behavior (Enter/Space to toggle, arrow keys between headers), animation duration, and default open panels in Dev Mode. Pair with forms, navigation tabs, and the Figma guides hub.

---

Who this is for

• Product designers shipping settings pages, help centers, and dense filter sidebars.
• Design system teams replacing one-off chevron hacks with one accordion primitive.
• Engineers implementing aria-expanded, focus management, and single-open logic.

---

Accordion vs tabs vs modal vs drawer

Pattern	Shows	Best for	Avoid when
Accordion	Vertical stack; one panel visible at a time (optional)	FAQs, settings sections, filter groups	Switching peer views of equal weight
Tabs	Horizontal peer views	Dashboard sections, profile sub-pages	12+ sections with long titles
Modal	Focused task overlay	Destructive confirms, short forms	Browsing 20 settings categories
Drawer / sidebar	Persistent off-canvas nav	App-level navigation	Inline FAQ on a marketing page

Verdict: use accordions when users scan many related sections vertically and only need one or a few open at once. Use tabs when sections are peer destinations users switch between frequently.

---

Component anatomy

Part	Purpose	Spec tip
Header row	Click target; title + icon	Min 44px height; full-width hit area
Chevron / caret	Expand/collapse affordance	Rotates 180° on expand; do not rely on color alone
Title	Section label	text/label-md; truncate with tooltip if needed
Optional badge	”3” pending items, “New”	Right-aligned before chevron
Content panel	Fields, text, nested lists	Padding matches form field spacing
Divider	Between items (flush style)	1px border/subtle between headers

Accordion / Item
├── Variant: state=expanded | collapsed
├── Variant: style=bordered | flush
├── Property: hasBadge=true | false
├── Layer: Header (horizontal auto layout, space-between, padding 12–16px)
│   ├── Title (text/label-md)
│   ├── Badge (optional)
│   └── Chevron icon (16–20px)
└── Layer: Content (vertical auto layout, padding 16px)
    └── Slot for fields, text, or nested components

Publish Accordion / Item as the atomic unit. Stack multiple item instances in a vertical auto layout for the full accordion list.

---

Single-open vs multi-open

Mode	Behavior	When to use
Single-open	Opening one panel closes others	FAQs, checkout summaries, wizards
Multi-open	Panels stay open independently	Settings with cross-references, filter sidebars
First open by default	Panel 1 expanded on load	Onboarding help, “Getting started”
All collapsed default	User chooses what to open	Long admin settings

Document the mode in the component set description and on the handoff artboard. Engineering cannot infer single-open from visuals alone.

---

States every accordion item needs

State	Header	Chevron	Content
Collapsed	Default background	Points right or down (pick one system-wide)
Expanded	Optional subtle fill	Rotated (e.g., points up)
Hover	surface/hover on header	Same rotation rules
Focus	Visible focus ring on header	aria-expanded=true
Disabled	Muted text; no pointer	Panel not interactive
Error	Error border or icon on header	Expand to show inline alert inside

Use interactive components for hover on the header row. Keep focus ring on the entire header button, not only the chevron.

---

Bordered vs flush styles

Style	Visual	Best for
Bordered	Card-like panels with radius	Standalone FAQ blocks, marketing pages
Flush	Dividers only; edge-to-edge	Settings inside modals or sidebars
Inset	Content indented under header	Dense admin UIs; clearer hierarchy

Bind borders and fills to semantic color tokens—accordion/header/bg, accordion/border, accordion/content/bg.

---

Content inside panels

Content type	Layout tip
Form fields	Use form components; 16px gap between fields
Short text / FAQ answer	text/body-md; max width ~65ch for readability
Nested accordion	Avoid beyond 2 levels—switch to tabs or page nav
Action buttons	Right-align footer actions inside panel; primary only one per panel
Tables	Full-width; note horizontal scroll inside panel

When a panel contains many fields, add a section description under the header title before the first input.

---

Mobile behavior

Desktop	Mobile adaptation
Full accordion stack	Same pattern; increase header touch target to 48px
Sidebar filters	Bottom sheet or full-screen filter modal
8+ sections	Consider search within settings + accordion

Document breakpoint behavior on a sm artboard. Collapsed panels should not unmount content in design specs unless engineering explicitly lazy-loads.

---

Accessibility

Requirement	Spec
Header element	<button> or <summary>—not div-only
Expanded state	aria-expanded="true" | "false"
Panel region	id linked via aria-controls
Keyboard	Enter/Space toggles; optional Up/Down between headers
Focus	Focus stays on header after toggle; do not trap inside panel
Motion	Respect prefers-reduced-motion; note max height animation optional

Run accessibility contrast checks on header text vs background in both expanded and collapsed states.

---

Prototyping limits

Figma cannot enforce single-open logic across separate component instances. For reviews:

1. Build collapsed and expanded frames for key panels.
2. Prototype header click → swap variant or navigate to expanded frame.
3. Add a note: “Engineering: single-open — opening B closes A.”

Use sections to group FAQ vs Settings accordion flows on one page.

---

Handoff to engineering

Deliverable	Where it lives
Single vs multi-open	Component description + handoff table
Default expanded panel(s)	Artboard annotation
Animation (height, chevron rotation)	Dev Mode note (200–300ms ease)
Lazy load rules	If panel content is heavy
Nested form validation	Per-panel error variant
Mobile sheet fallback	sm frame link

Include accordions in your Dev Mode handoff checklist. Publish under Patterns / Accordion in your team library.

---

Real-world examples

FAQ block (single-open, bordered)

Five questions; first collapsed by default. Chevron rotates on expand. Answers use body text with optional link to empty state CTA if no results.

Account settings (multi-open, flush)

Sections: Profile, Security, Notifications, Billing. Users may open Profile + Notifications together. Billing panel contains forms and a modal for payment update.

Filter sidebar (multi-open, inset)

Categories: Price, Brand, Rating. Each panel holds filter chips. Pair with search UI and pagination on results.

Cross-link wireframing when accordion IA is still in lo-fi review.

---

Common mistakes

Mistake	Consequence	Fix
Accordion for main nav	Users lose context	Use tabs or sidebar nav
Tiny chevron-only click target	Mis-taps	Full-width header button
3+ nested accordion levels	Cognitive overload	Flatten IA or use pages
No collapsed preview	Users cannot scan titles	Always show headers
Inconsistent chevron direction	Confusion	One rotation system in the library
Hiding critical fields in collapsed panel	Missed required input	Expand panel with errors automatically
No disabled state	Broken flows for read-only roles	Ship disabled variant
Animating from height: 0 without spec	Janky implementation	Document max-height or CSS grid approach

---

FAQ

Accordion vs collapsible “Show more” text?

Accordions organize named sections with persistent headers. Show more truncates inline body copy—use for long descriptions, not settings groups.

Should expanded panels push content below or overlay?

Push (default) for FAQs and settings—content below reflows. Overlay only inside fixed-height containers (map sidebar)—document z-index and scroll trap rules.

How many panels before switching to tabs?

If users jump between more than 4–5 peer sections repeatedly, prefer tabs. Accordions excel when users expand one section, complete a task, collapse, move on.

Include a “Expand all” control?

Useful for print/export or power-user settings—add a text button above the stack. Not needed for short FAQs (≤5 items).

---

Bottom line

Build accordion items as reusable components with clear expanded/collapsed states, single vs multi-open rules, and full-width accessible headers. Use them for FAQs, settings, and filter groups—not primary app navigation. Document keyboard behavior, defaults, and mobile fallbacks in Dev Mode. Continue with forms, search and filters, and the tutorials hub.