Frames und Groups in Figma sind zwei grundlegend verschiedene Container-Typen – Frames verhalten sich wie eigenständige Layouts mit Eigenschaften, Groups sind reine Sammlungen ohne eigene Gestaltungsregeln.
Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Frame = Rahmen, Artboard (aus Sketch/XD), Group = Gruppe
Was ist ein Frame?
Ein Frame ist der zentrale Container in Figma. Er definiert einen abgegrenzten Bereich mit eigener Breite, Höhe, Hintergrundfarbe und Clipping-Verhalten. Frames können verschachtelt werden und sind die Basis für Auto-Layout, Constraints, Prototyping-Verbindungen und den Export einzelner Screens.
Was ist eine Group?
Eine Group fasst mehrere Ebenen zu einer handlichen Einheit zusammen, ohne eigene Layouteigenschaften zu besitzen. Ihre Begrenzungsbox ergibt sich rein rechnerisch aus dem gemeinsamen Bounding-Box aller enthaltenen Elemente.
Erklärung
Frame – der eigentliche Baustein
Frames sind in Figma das Äquivalent zu Artboards in Adobe XD oder Sketch. Jede Seite beginnt typischerweise mit einem Frame, der die Bildschirmgröße repräsentiert (z. B. 375 × 812 für iPhone 14). Frames besitzen folgende Eigenschaften, die Groups fehlen:
- Feste Abmessungen: Breite und Höhe sind explizit gesetzt; Inhalte können geclippt werden.
- Constraints: Kindelemente können relativ zum Frame fixiert werden (links, rechts, zentriert, skalieren).
- Auto-Layout: Nur Frames können Auto-Layout aktivieren, das Kinderlemente automatisch ausrichtet und umbricht.
- Hintergrund & Fill: Ein Frame kann eine eigene Füllfarbe oder ein Bild als Hintergrund erhalten.
- Prototyping: Nur Frames können als Startpunkt oder Ziel von Prototype-Verbindungen dienen.
- Export: Frames erscheinen im Export-Panel als eigenständige Export-Kandidaten.
- Clip Content: Inhalte außerhalb des Frame-Rahmens können unsichtbar gemacht werden.
Verschachtelte Frames (sogenannte Nested Frames) erlauben komplexe Layouts: Ein Screen-Frame enthält mehrere Section-Frames, die wiederum Component-Frames enthalten.
Group – der pragmatische Helfer
Groups entstehen typischerweise durch Cmd+G (Mac) oder Ctrl+G (Windows), wenn man mehrere Elemente schnell zusammenfassen will. Sie haben keine eigenen Layouteigenschaften – ihre Bounding Box passt sich dynamisch an die enthaltenen Elemente an. Verschiebt man alle Kindelemente, verschiebt sich die Group mit. Groups eignen sich für:
- Temporäres Zusammenfassen von Elementen bei der Exploration
- Organisieren von Layern ohne Layout-Konsequenzen
- Vektornetzwerke aus mehreren Pfaden
Wichtiger Unterschied beim Klicken: In einer Group gelangt man mit einem einfachen Klick direkt zum Kindelement; beim Frame muss man doppelklicken, um ins Innere zu gelangen.
Wann Frame, wann Group?
Als Faustregel gilt: Im modernen Figma-Workflow werden Groups kaum noch gebraucht. Frames sind fast immer die bessere Wahl, weil sie strukturiertes Layout, Clipping und Prototyping ermöglichen. Groups bleiben nützlich für Ad-hoc-Selektion und für Vektorgruppen.
Beispiele
- Komponenten-System: Jede Button-Komponente ist ein Frame (mit Auto-Layout), nicht eine Group – nur so lassen sich Padding, Gap und Hintergrundfarbe konsistent steuern.
- Responsive Design: Ein Card-Frame mit Constraints „Left & Right" dehnt sich proportional aus, wenn der übergeordnete Grid-Frame breiter wird. Eine Group würde nicht skalieren.
- Prototyping/Handoff: Der Entwickler sieht im Dev-Mode Frame-Namen als CSS-Klassen-Vorlagen; Group-Namen erscheinen weniger prominent und werden oft ignoriert.
- Team-Workflow: Frames tragen aussagekräftige Namen wie „Header/Desktop" und sind im Layer-Panel besser navigierbar als anonyme Groups.
- Kombination mit Varianten: Komponenten-Varianten benötigen zwingend Frames; Groups können keine Varianten-Properties tragen.
In der Praxis
Frame erstellen: F-Taste drücken → Preset wählen (iPhone, Desktop etc.) oder Bereich aufziehen. Group erstellen: Elemente markieren → Cmd+G / Ctrl+G. Group in Frame umwandeln: Rechtsklick auf Group → Frame Selection – die Group wird zu einem Frame mit identischer Bounding Box. Clipping aktivieren: Im rechten Panel unter Frame → Häkchen bei Clip Content. Doppelklick-Navigation: Innerhalb eines Frames gelangt man mit Doppelklick zu Kindelementen; Esc steigt wieder auf.
Vergleich & Abgrenzung
| Eigenschaft | Frame | Group |
|---|---|---|
| Feste Abmessungen | Ja | Nein (dynamisch) |
| Auto-Layout | Ja | Nein |
| Constraints | Ja | Nein |
| Clip Content | Ja | Nein |
| Prototyping-Ziel | Ja | Nein |
| Hintergrundfarbe | Ja | Nein |
Im Vergleich zu Sketch entspricht der Frame dem Artboard; in Adobe XD gibt es ebenfalls Artboards. Neu in Figma ist die Möglichkeit, Frames beliebig zu verschachteln – was XD-Artboards nicht können.
Häufige Fragen (FAQ)
Kann ich nachträglich eine Group in einen Frame umwandeln? Ja – einfach die Group auswählen und im Kontextmenü Frame Selection wählen. Alternativ drückt man Cmd+Option+G (Mac) bzw. Ctrl+Alt+G (Windows). Die Umwandlung ist verlustfrei; alle Kindelemente bleiben erhalten.
Warum sehe ich im Export-Panel keine Groups? Groups werden nicht automatisch als Export-Einheit angeboten, Frames schon. Wer eine Group exportieren möchte, muss ihr manuell einen Export-Eintrag hinzufügen oder sie vorher in einen Frame umwandeln.
Verliere ich etwas, wenn ich alle Groups durch Frames ersetze? Praktisch nicht. Der einzige Unterschied ist, dass Frames eine Hintergrundfarbe und Clip Content besitzen können – beides lässt sich deaktivieren, sodass sie sich wie transparente Gruppen verhalten.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/hc/en-us/articles/360039832054
- Figma (2024): Frames vs. Groups. Figma Blog.
- Online: UX Collective – uxdesign.cc (Artikel „Figma Frames vs Groups explained")
