Frames sind eigenständige Container-Elemente in Figma, die unabhängige Layout- und Clip-Eigenschaften besitzen, während Groups lediglich Elemente temporär bündeln, ohne eigene Geometrie oder Layout-Logik hinzuzufügen.
Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Frame (F), Group (Strg/Cmd+G), Artboard (ältere Bezeichnung aus anderen Tools)
Was ist der Unterschied zwischen Frames und Groups?
Frames (Tastenkürzel: F) sind die zentralen Container in Figma. Sie besitzen eigene Abmessungen, können Inhalte abschneiden (Clip Content), unterstützen Auto Layout und Constraints, und dienen als Basis für Screens, Komponenten und Prototyping-Flows. Groups (Tastenkürzel: Strg+G / Cmd+G) hingegen sind ein reines Gruppierungsmittel: Sie haben keine eigene Größe, sondern umhüllen lediglich die bounding box der enthaltenen Elemente. Jede Designänderung an einem Kindelement verändert automatisch die Größe der Gruppe.
In modernen Figma-Workflows spielen Frames die dominierende Rolle, da fast alle erweiterten Funktionen – Auto Layout, Constraints, Prototyping-Flows, Component-Erstellung – auf Frames aufbauen. Groups werden hauptsächlich für das schnelle, temporäre Bündeln von Elementen verwendet, die keine spezifischen Layout-Anforderungen haben.
Erklärung
Frames im Detail
Ein Frame wird durch Drücken von F und anschließendes Aufziehen auf der Canvas erstellt. In der rechten Seitenleiste erscheinen dann Frame-spezifische Optionen:
- Clip Content: Wenn aktiv, werden Inhalte außerhalb des Frame-Rahmens ausgeblendet – unverzichtbar für Scroll-Container und Karten-Layouts.
- Auto Layout: Nur Frames können in Auto-Layout-Container umgewandelt werden (Tastenkürzel:
Shift+A). Dies ermöglicht flexibles, CSS-Flexbox-ähnliches Verhalten. - Constraints: Frames ermöglichen es, für jedes Kindelement ein responsives Verhalten zu definieren (z. B. „rechts fixiert" oder „breite proportional skalieren").
- Prototyping: Frames dienen als Screens in Prototyping-Flows. Nur Frames können als Startpunkte für Flows definiert werden.
- Hintergrund: Frames können eine eigene Füllfarbe, einen Rahmen (Stroke) und Effekte (Schatten, Unschärfe) tragen, unabhängig von ihren Kindelementen.
Frames haben auch voreingestellte Gerätegrößen: Bei der Frame-Erstellung bietet Figma rechts im Panel Vorlagen für gängige Gerätegrößen an (iPhone 16, iPad, MacBook, Custom usw.).
Groups im Detail
Eine Group entsteht durch Markieren mehrerer Elemente und Strg+G / Cmd+G. Die Gruppe hat keine eigene visuelle Darstellung – ihre bounding box passt sich automatisch dem Inhalt an. Wenn ein Element in der Gruppe vergrößert wird, wächst auch die Gruppe mit.
Groups unterstützen keine Constraints für ihre Kindelemente – alle Kindelemente skalieren proportional, wenn die Gruppe selbst skaliert wird. Sie unterstützen auch kein Auto Layout.
Eine Group kann in einen Frame umgewandelt werden, indem man sie auswählt und im Rechtsklick-Menü „Frame Selection" wählt (oder Strg+Alt+G / Cmd+Option+G).
Wann welches Element?
| Merkmal | Frame | Group |
|---|---|---|
| Eigene Größe | Ja, fix | Nein, dynamisch |
| Clip Content | Ja | Nein |
| Auto Layout | Ja | Nein |
| Constraints für Kinder | Ja | Nein |
| Prototyping-Screen | Ja | Nein |
| Component-Erstellung | Ja (empfohlen) | Möglich, nicht empfohlen |
| Schnelles Gruppieren | Umständlicher | Einfach per Cmd+G |
Beispiele
- Screen-Design: Ein Mobile-Screen (375×812 px) ist immer ein Frame. Er enthält andere Frames für Header, Content-Bereich und Navigation-Bar.
- Icon-Gruppe: Drei SVG-Pfade, die zusammen ein Icon bilden, werden zu einer Group zusammengefasst, solange kein Clip Content oder responsives Verhalten benötigt wird.
- Karten-Komponente: Eine Produktkarte im E-Commerce-Design ist ein Frame mit Auto Layout – nicht eine Group – damit Inhalte dynamisch umbrechen können.
- Temporäres Bündeln: Beim Verschieben mehrerer Elemente auf der Canvas kann man sie schnell per
Cmd+Ggruppieren, verschieben und dann perCmd+Shift+Gwieder aufheben. - Scroll-Container: Ein horizontaler Scroll-Bereich ist ein Frame mit aktiviertem Clip Content und einer überlangen Content-Fläche darunter.
In der Praxis
Shortcuts:
- Frame erstellen:
F - Group erstellen:
Strg+G/Cmd+G - Gruppe auflösen:
Strg+Shift+G/Cmd+Shift+G - Group in Frame umwandeln: Rechtsklick → „Frame Selection"
Best Practices:
- Fast immer Frame bevorzugen, da Frames mehr Kontrolle bieten und mit Auto Layout, Constraints und Prototyping kompatibel sind.
- Groups nur für temporäres Bündeln oder für einfache Icon-Zusammenstellungen verwenden, bei denen keine Layout-Logik nötig ist.
- Vor der Komponenten-Erstellung sicherstellen, dass das oberste Element ein Frame ist, nicht eine Group.
- Verschachtelte Groups können Performance-Probleme verursachen – lieber in Frames umwandeln.
Häufiger Fehler: Viele Einsteiger verwenden Groups, wo Frames nötig wären, und wundern sich dann, warum Auto Layout oder Constraints nicht funktionieren.
Vergleich & Abgrenzung
In Sketch entsprechen Groups den Figma-Groups, während Artboards den Figma-Frames ähneln – allerdings sind Figma-Frames deutlich mächtiger, da sie auch verschachtelt sein können. In Adobe XD gibt es ebenfalls Artboards (entsprechen Frames) und Groups. Figma ist einzigartig darin, dass Frames beliebig tief verschachtelt werden können und dabei die volle Funktionalität behalten. In CSS-Begriffen ist ein Frame vergleichbar mit einem <div> mit definierten Abmessungen und overflow: hidden, eine Group hingegen mit einem positionslosen <span> um mehrere Elemente.
Häufige Fragen (FAQ)
Kann ich eine Group nachträglich in einen Frame umwandeln? Ja, durch Rechtsklick auf die Group und „Frame Selection" (oder Strg+Alt+G / Cmd+Option+G). Die enthaltenen Elemente bleiben unverändert, die Group-Hülle wird zum Frame.
Warum zeigt Figma manche Elemente als Frame, obwohl ich sie als Group erstellt habe? Wenn du eine Component aus einer Group erstellst, wandelt Figma sie automatisch in einen Frame um. Das ist beabsichtigt, da Components immer auf Frames basieren.
Verliere ich beim Konvertieren von Group zu Frame Daten? Nein, die Konvertierung ist verlustfrei. Alle Kindelemente und Stile bleiben erhalten. Lediglich die bounding-box-Logik ändert sich: Der Frame behält die Größe der ehemaligen Group, skaliert aber nicht mehr automatisch mit dem Inhalt.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/de
- Figma-Dokumentation: „Frames in Figma" – help.figma.com/hc/en-us/articles/360041539473
- Thomas Frank: „Figma for Beginners" (YouTube-Kurs, 2024)
