Figma Sections: Organize Pages, Prototype Flows, and Hand Off Without Chaos

Quick answer

Sections in Figma are labeled containers on the canvas that group related frames—think “Onboarding,” “Checkout,” or “Settings.” Select frames → right-click → Add section (or use the toolbar). Sections can show titles, backgrounds, and prototype flow starting points when you connect screens inside them. Use sections when a single page holds many flows; use pages for major product areas (organize files at scale). Pair with prototype basics and team habits from multiplayer etiquette. Browse more on the Figma guides hub.

---

Who this is for

• Product designers with 20+ screens on one page who lose track of flows.
• Design leads standardizing how files look in reviews and FigJam walkthroughs.
• Researchers and PMs who need labeled flows without opening every frame name.

---

Sections vs pages vs frames (pick the right container)

Container	Scope	Best for	When to avoid
Page	Entire tab in the file	Product areas: App, Marketing, Archive	One page with 200 ungrouped screens
Section	Region on a page	Flow groups, sprint deliverables, workshop boards	Replacing a proper component library
Frame	Single screen or component	UI artboards, components	Naming 40 top-level frames with no grouping
Team library	Cross-file	Shared components	Duplicating full flows into every feature file

Verdict: if reviewers say “I cannot find checkout,” add sections before adding another page—or after, if the page is already correct but dense.

---

Create and label a section (step by step)

1. Shift-select the frames that belong to one flow (e.g. login steps).
2. Right-click → Add section (or Section in the toolbar).
3. Double-click the section title → name with flow + state, e.g. Auth / Login → MFA → Home.
4. Optional: set section background color low contrast so frames stay hero (gray #F5F5F5 at 30–40% opacity works).
5. Collapse sections when presenting: click the collapse chevron on the section header.

Naming pattern (recommended)

[Area] / [Flow] / [Variant or sprint]

Examples:

• Checkout / Guest / Happy path
• Checkout / Guest / Error states
• Settings / Notifications / v2 exploration

Match naming to file organization rules so search and layer panel stay aligned.

---

Sections and prototype flows

Sections help prototype mode feel navigable:

1. Place the first screen of a flow inside its section.
2. Connect hotspots as usual (create a prototype).
3. In prototype settings, set flow starting point on the entry frame—Figma can show flow labels tied to sections in presentation.

Practice	Why it helps
One starting frame per section	Stakeholders open the right story
Dead-end frames in a sub-section	Edge cases do not clutter main path
Link to animation limits doc in comments	Sets expectations on motion

For password or restricted flows, see prototype security basics.

---

Sections for design critiques and research

Use case	Setup
Design critique	Section per designer; pin comment on section title
A/B concepts	Search / Concept A vs Search / Concept B side by side
Usability test	Section = task; hide other sections via focus mode in presentation
Handoff sprint	Section = Jira epic; link ticket URL in section description field

Common mistake: one giant section called “Screens” — defeats the purpose. Split by user journey, not by file export batch.

---

Sections with team libraries and branching

When team libraries update mid-sprint:

• Keep exploration in a section named Sandbox / … on a lower page.
• Move approved frames into 100 – Shipped sections only after review.
• On branches, duplicate the section not individual frames when testing a flow refactor (multiplayer etiquette).

Verdict: sections are organizational, not a substitute for publishing components—buttons still live in the library.

---

Sections + related layout work

Adjacent topic	Link when
Wireframing speed	Early flows before visual polish
Mobile frames	Section per platform breakpoint
Slide decks	One section per chapter when presenting in Figma
Dev Mode handoff	Mark “Ready for dev” sections with cover color

---

Presentation and stakeholder mode

1. Collapse inactive sections before sharing screen in Zoom.
2. Use background colors to separate shipped vs exploration (green tint vs neutral).
3. For exec reviews, duplicate a single section to a slide deck page rather than scrolling the master file.

---

Common mistakes

1. Sections without titles — looks tidy in edit mode, useless in prototype.
2. Mixing shipped and experiment in one section — move experiments to 900 – Archive page.
3. Nesting sections too deep — two levels max (area → flow).
4. Ignoring zoom — set section width to fit frames + padding so presentation zoom works.
5. No link to specs — paste Confluence/Notion URL in section description for PMs.

---

Troubleshooting

Cannot add section to selection

Selections must be frames or sections—unlock layers and avoid selecting only vectors. Group into frames first if needed.

Prototype flow does not show expected order

Check starting frame and broken links—orphan frames outside sections still appear in the flow list.

Section background hides grid

Lower background opacity or disable show background during pixel-nudge sessions.

File slow with many sections

Archive old sections to another page or file; thousands of hidden layers still cost performance (browser limitations).

---

FAQ

How many sections per page?

Aim for 3–8 sections per active page. More than ~12 usually means you need another page or file split.

Do sections export to code?

No—sections are for organization and presentation. Engineers need frames and specs in Dev Mode.

Sections vs FigJam?

Use FigJam for workshops; move approved frames into Figma sections on the production page.

Should user flows match section names exactly?

Yes—when Auth / Login is the section title, frame names should start with Auth / Login / … for searchability.

---

Recommended next steps

1. Open your busiest page and group frames into named sections by user journey.
2. Set prototype starting points per section and run one stakeholder walkthrough.
3. Read organize files, team libraries, and prototype animation limits so structure and motion stay aligned.

Sections turn a wall of frames into a map—invest ten minutes per page and every review gets faster.