Sections in Figma sind benannte, farbige Container auf dem Canvas, die zusammengehörige Frames und Designs visuell gruppieren und mit Status-Labels für den Handoff versehen werden können.
Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Canvas-Bereiche, Design-Sektionen, Handoff-Sections
Was sind Sections?
Sections (eingeführt 2022) sind ein Organisationselement auf dem Figma-Canvas, das oberhalb von Frames existiert. Sie sind keine Frames (haben kein Clipping, kein Auto-Layout), sondern reine Gruppierungscontainer mit Name und optionalem Hintergrund. Sections helfen dabei, große Figma-Dateien mit Hunderten von Frames übersichtlich zu halten und den Handoff-Prozess durch Status-Labels zu strukturieren.
Erklärung
Sections erstellen
Sections werden im Toolbar mit dem Section-Tool (Shift+S) erstellt oder über Rechtsklick auf eine Auswahl von Frames → „Add Section". Eine Section erhält standardmäßig einen Namen wie „Section 1", der angepasst werden sollte. Im Layer-Panel erscheinen Sections als übergeordnete Container.
Eigenschaften von Sections
- Name: Frei benennbar; erscheint prominent über der Section auf dem Canvas
- Farbe: Hintergrundfarbe der Section (transparent oder farbig – gut für visuelle Trennung)
- Größe: Sections passen sich dynamisch an ihren Inhalt an, können aber auch manuell skaliert werden
- Kein Clipping: Anders als Frames clippen Sections ihren Inhalt nicht – Elemente können über Section-Grenzen hinausragen
- Navigation: Im Layer-Panel kann man per Klick auf eine Section zum entsprechenden Canvas-Bereich springen
Sections im Layer-Panel
Im Layer-Panel erscheinen Sections als kollabierbare Gruppen. Das reduziert das Layer-Panel-Rauschen in großen Dateien erheblich: Statt hunderte einzelne Frame-Namen zu sehen, sieht man die Section-Namen und kann einzelne Sections auf-/zuklappen.
Status-Labels für Handoff
Sections (und einzelne Frames) können mit Handoff-Status markiert werden:
- Kein Status (Standard)
- Ready for Development (grüner Haken-Badge)
Im Dev Mode können Entwickler nach Status filtern und sehen nur die Sections, die als „Ready for Development" markiert sind. Das schafft einen klaren Kommunikationskanal ohne externe Tools.
Status setzen: Rechtsklick auf Section → „Mark as ready for development"
Sections vs. Pages
Figma-Dateien haben Pages (Reiter oben links), die separate Canvas-Bereiche sind. Sections hingegen befinden sich innerhalb einer Page. Die Entscheidung Sections vs. Pages:
- Pages für grundlegend verschiedene Inhalte: Design Library vs. Product Screens vs. Prototypes
- Sections für thematische Gruppierung innerhalb einer Page: Nach Feature, Flow, Status oder Plattform
Typische Section-Strukturen
Nach Status: „In Progress", „Ready for Review", „Ready for Dev", „Done" Nach Feature: „Authentication", „Dashboard", „Settings", „Onboarding" Nach Plattform: „Mobile iOS", „Mobile Android", „Desktop Web" Nach Sprint: „Sprint 23", „Sprint 24", „Backlog"
Sections in der Thumbnail-Ansicht
In der Figma-Dateiübersicht (Startseite) wird das Thumbnail der Datei automatisch generiert. Gut strukturierte Sections mit klarer Benennung machen Dateien auf der Startseite sofort erkennbar.
Beispiele
- Komponenten-System: Die Design-System-Datei hat Sections „Foundation", „Components/Basics", „Components/Forms", „Components/Navigation", „Components/Feedback" – übersichtlich ohne Scrollen.
- Responsive Design: Ein Feature ist in den Sections „Mobile" und „Desktop" organisiert. Jede Section enthält die jeweiligen Screen-Frames.
- Prototyping/Handoff: Section „Sprint 23 – Ready for Dev" enthält alle Frames, die im aktuellen Sprint implementiert werden sollen. Status ist grün markiert.
- Team-Workflow: Wöchentliche Design-Reviews orientieren sich an den Sections: Designer präsentiert aus „In Review", Product Manager kommentiert, nach Abstimmung wird auf „Ready for Dev" umgestellt.
- Multi-Flow-Prototype: Sections gruppieren einzelne Flows: „Checkout Flow", „Onboarding Flow", „Error States" – jede Section als eigenständiger Prototype-Startpunkt.
In der Praxis
Section erstellen: Shift+S → Bereich auf Canvas aufziehen; oder Frames markieren → Rechtsklick → „Add Section" Section benennen: Section-Header doppelklicken → Namen eingeben Status setzen: Section rechtsklicken → „Mark as ready for development" Im Dev Mode filtern: Dev Mode → Filter → „Ready for development" aktivieren Farbe ändern: Section auswählen → rechtes Panel → Fill-Farbe anpassen Zu Section navigieren: Layer-Panel → Section-Name anklicken → Canvas springt dorthin
Vergleich & Abgrenzung
| Sections | Frames | Pages | |
|---|---|---|---|
| Clipping | Nein | Ja | N/A |
| Auto-Layout | Nein | Ja | N/A |
| Handoff-Status | Ja | Ja | Nein |
| Layer-Panel | Ja (kollapsibar) | Ja | Nein |
| Prototype-Startpunkt | Nein | Ja | N/A |
Sections sind keine Designcontainer, sondern Organisationscontainer. Sie können Frames enthalten, aber Frames haben alle Layoutfunktionen. Sections sind eine Meta-Ebene über den Designs – für Struktur, nicht für Gestaltung.
Häufige Fragen (FAQ)
Kann man Sections verschachteln? Nein. Sections können nicht in anderen Sections verschachtelt werden. Für verschachtelte Organisationsebenen empfiehlt sich Pages für die oberste Ebene und Sections für die zweite Ebene.
Verlangsamen Sections die Figma-Performance? Sections sind sehr leichtgewichtig und haben keinen nennenswerten Performance-Einfluss. Bei sehr großen Dateien (100+ Frames) verbessern sie die Performance sogar, weil das Layer-Panel durch das Kollabieren von Sections kürzer wird.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/hc/en-us/articles/9771500257687
- Figma (2024): Organize designs with sections. Figma Docs.
- Online: Figma Blog – „Sections: The best way to organize your Figma files"
