Constraints sind Regeln in Figma, die festlegen, wie sich ein Element relativ zu seinem übergeordneten Frame verhält, wenn dieser in Größe oder Position verändert wird – essenziell für responsives Design.
Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Einschränkungen, Responsive Constraints, Layout-Constraints
Was sind Constraints?
Constraints (deutsch: Einschränkungen oder Bindungen) definieren das Verhalten von Elementen bei der Größenänderung ihres Elternelements (Parent-Frame). Sie beantworten die Frage: "Wenn ich diesen Frame breiter mache – wohin bewegt sich das Element, und ändert sich seine Größe?"
Constraints werden im Design-Panel unter "Constraints" eingestellt und gelten für jedes Element innerhalb eines Figma: Frames vs. Groups – Grundlegende Strukturelemente im Vergleich-Frames. Sie sind horizontal und vertikal separat konfigurierbar.
Erklärung
Constraint-Optionen (Horizontal)
Left (Standard): Das Element bleibt am linken Rand des Frames fixiert. Beim Verbreitern des Frames entsteht Leerraum rechts.
Right: Das Element bleibt am rechten Rand fixiert. Beim Verbreitern bewegt sich das Element nach rechts mit.
Left and Right: Das Element dehnt sich horizontal aus – bleibt an beide Seiten gebunden. Nützlich für volle Breiten-Elemente wie ein Navigation-Banner.
Center: Das Element bleibt horizontal zentriert. Beim Verbreitern des Frames bleibt der Abstand zu beiden Seiten proportional.
Scale: Das Element skaliert proportional zur Frame-Breite – alle Abstände und die Größe ändern sich relativ.
Constraint-Optionen (Vertikal)
Identische Logik auf der Y-Achse:
- Top: Fixiert am oberen Rand
- Bottom: Fixiert am unteren Rand
- Top and Bottom: Dehnt sich vertikal aus
- Center: Bleibt vertikal zentriert
- Scale: Skaliert proportional zur Frame-Höhe
Constraints innerhalb von Komponenten
Constraints sind besonders wichtig bei Figma: Components – Wiederverwendbare UI-Bausteine im Design System. Wenn eine Komponenten-Instance in der Größe verändert wird, bestimmen die Constraints der internen Elemente, wie sich die Komponente anpasst. Ein gut strukturierter Button hat z.B.:
- Label: Left and Right (dehnt sich mit dem Button)
- Icon: Left oder Right (bleibt am Rand)
- Hintergrund-Shape: Left and Right + Top and Bottom (füllt immer den vollen Button)
Constraints vs. Auto Layout
Constraints und Figma: Auto-Layout – Dynamische Layouts ohne manuelles Ausrichten lösen ähnliche Probleme auf unterschiedliche Weise:
- Constraints sind passiv – sie reagieren auf manuelle Größenänderungen des Parent-Frames
- Auto Layout ist aktiv – es berechnet Größe und Position von Elementen dynamisch basierend auf Inhalt und Regeln
Für die meisten modernen Layouts empfiehlt Figma primär Auto Layout; Constraints bleiben relevant für einfache Anpassungen und für Elemente außerhalb von Auto-Layout-Frames.
Responsive Previews und Constraints
Um Constraints zu testen, kann man den Parent-Frame direkt auf der Canvas skalieren und beobachten, wie sich die Elemente anpassen. Figma bietet keine nativen Breakpoint-Vorschauen wie ein Browser – hierfür sind Plugins wie Responsive oder Breakpoints erforderlich.
Beispiele
Beispiel 1: Navigation Bar Ein Nav-Bar-Frame hat folgende Constraints:
- Logo (links): Horizontal Left, Vertikal Center
- Navigations-Links (Mitte): Horizontal Center, Vertikal Center
- CTA-Button (rechts): Horizontal Right, Vertikal Center
Bei 1440px breitem Frame stimmt alles. Wenn man den Frame auf 1280px verkleinert, bleibt das Logo links, der CTA rechts – die Links bleiben zentriert.
Beispiel 2: Vollbild-Hero-Section Ein Hero-Bild hat Constraints "Left and Right" horizontal und "Top and Bottom" vertikal. Es dehnt sich immer vollständig aus, egal wie groß der Frame ist.
Beispiel 3: Modal / Overlay Ein Modal-Dialog hat "Center" horizontal und "Center" vertikal. Bei jeder Frame-Größe bleibt das Modal in der Bildschirmmitte.
Beispiel 4: Footer mit Social-Icons Der Footer-Frame hat Left and Right. Die Social-Icons innerhalb haben "Right"-Constraint – bei schmalem Frame rücken die Icons mit dem rechten Rand mit.
In der Praxis
Constraints sind besonders in folgenden Kontexten unverzichtbar:
Responsive Mockups: Wenn ein Design für verschiedene Bildschirmbreiten (Desktop, Tablet, Mobile) angepasst wird, sparen gut gesetzte Constraints erheblich Zeit.
Design-System-Komponenten: Komponenten, die in verschiedenen Größen eingesetzt werden, benötigen präzise Constraints, damit sie korrekt skalieren.
Präsentationen für Stakeholder: Wenn Frame-Größen für unterschiedliche Gerätegrößen angepasst werden, bleiben alle Elemente korrekt positioniert.
Tipps für die Praxis:
- Constraints immer von innen nach außen setzen: Zuerst die innersten Elemente, dann die Container
- "Left and Right" kombinieren mit "Top and Bottom" für vollständig flexible Container
- Constraints-Verhalten durch manuelles Ziehen der Frame-Ecken testen
- Bei komplexen Layouts Auto Layout bevorzugen – Constraints für einfache Fälle und Legacy-Designs
Vergleich & Abgrenzung
Constraints vs. Auto Layout: Auto Layout ist mächtiger und flexibler für dynamische Inhalte. Constraints sind einfacher und ohne Konfigurationsaufwand – aber passiv. In modernen Figma-Projekten wird Auto Layout bevorzugt; Constraints bleiben als Ergänzung.
Constraints vs. Grid Layouts: Grids (Spalten/Zeilen-Raster) definieren die visuelle Struktur eines Layouts. Constraints definieren das Verhalten bei Größenänderungen. Beides ergänzt sich – Grids helfen beim Design, Constraints beim Skalieren. Mehr zu Grids im Eintrag Grids und Layouts in Figma.
Figma Constraints vs. CSS Positioning: Figma-Constraints ähneln CSS-Konzepten wie position: absolute mit left, right, top, bottom und width: 100%. "Scale" entspricht in etwa relativen Größenangaben in Prozent.
Häufige Fragen (FAQ)
Warum funktionieren meine Constraints nicht? Häufigste Ursache: Das Element liegt in einer Group statt in einem Frame. Constraints funktionieren nur innerhalb von Frames. Groups respektieren keine Constraints. Lösung: Group in einen Frame umwandeln (Rechtsklick > Frame selection).
Können Constraints auf Top-Level-Frames gesetzt werden? Nein – Constraints gelten nur für Elemente innerhalb eines Frames. Das oberste Frame hat keine Constraints (es hat keinen Parent-Frame).
Wie interagieren Constraints mit Variants? Jede Variante einer Komponente hat eigene Constraints. Beim Wechsel zwischen Varianten bleiben die Constraints der jeweiligen Variante aktiv.
Soll ich eher Constraints oder Auto Layout nutzen? Für neue Projekte: Auto Layout für alle Container, die sich an Inhalte anpassen müssen. Constraints für einfache, statische Anpassungen und für Elemente wie Overlays oder Vollbild-Hintergründe.
Verwandte Einträge
- Figma: Auto-Layout – Dynamische Layouts ohne manuelles Ausrichten – Dynamische Layouts in Figma
- Figma: Frames vs. Groups – Grundlegende Strukturelemente im Vergleich – Frames als Voraussetzung für Constraints
- Grids und Layouts in Figma – Grids und Layout-Raster
- Figma: Components – Wiederverwendbare UI-Bausteine im Design System – Constraints in Komponenten
- Figma: Variants – Alle Zustände einer Komponente in einem Set – Constraints bei Varianten
Weiterführend
- Figma Help Center (2024): Apply Constraints to Define How Layers Respond to Resizing.
- Figma (2022): Responsive Design in Figma. Figma Blog.
- Babich, N. (2021): Mastering Figma Constraints. UX Planet.
- Monteiro, M. (2019): Ruined by Design. Mule Design. (Kontextuell: Design-Verantwortung bei responsiven Systemen)
