Constraints (Figma) – Responsives Verhalten von Elementen im Frame

Constraints in Figma definieren, wie sich ein Kindelement innerhalb seines übergeordneten Frames verhält, wenn der Frame in der Größe verändert wird – sie steuern horizontale und vertikale Fixierung, Skalierung und Zentrierung.

Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Pinning, Responsive Pinning, Layout-Constraints; in anderen Tools „Anchors" (Sketch) oder „Responsive Resize" (Adobe XD)

Was sind Constraints?

Constraints sind Regeln, die festlegen, wie ein Element auf Größenänderungen seines übergeordneten Frames reagiert. Wenn du einen Frame vergrößerst oder verkleinerst – etwa um einen Desktop-Screen in eine Mobile-Ansicht umzuwandeln – bestimmen die Constraints, ob ein Kindelement seine Position beibehält, mitwächst oder sich proportional verschiebt. Constraints sind eines der wichtigsten Werkzeuge für responsives Design in Figma, ohne dabei Code zu schreiben.

Constraints sind nur für Elemente innerhalb von Frames verfügbar (nicht in Groups). Für jedes Kindelement gibt es eine horizontale und eine vertikale Constraint-Achse, die unabhängig voneinander eingestellt werden.

Erklärung

Constraint-Optionen im Detail

Das Constraints-Panel ist in der rechten Seitenleiste unter dem Abschnitt „Constraints" zu finden, wenn ein Kindelement innerhalb eines Frames ausgewählt ist.

Horizontale Constraints (X-Achse):

• Left: Das Element bleibt mit dem linken Rand des Frames fixiert. Sein Abstand zum linken Rand bleibt konstant. (Standard)
• Right: Das Element bleibt mit dem rechten Rand des Frames fixiert. Der Abstand zum rechten Rand bleibt konstant.
• Left and Right: Das Element ist an beiden Seiten fixiert – es wird breiter oder schmaler, wenn der Frame skaliert. Ideal für Elemente, die die volle Breite ausfüllen sollen (z. B. eine Navigation).
• Center: Das Element bleibt horizontal in der Mitte des Frames. Der Abstand zur Mitte bleibt konstant.
• Scale: Das Element skaliert proportional zur Größenänderung des Frames. Alle Abstände und die Breite des Elements ändern sich proportional.

Vertikale Constraints (Y-Achse):

• Top: Fixiert am oberen Rand des Frames. (Standard)
• Bottom: Fixiert am unteren Rand – unverzichtbar für Elemente wie Bottom Navigation Bars.
• Top and Bottom: Das Element streckt sich vertikal, wenn der Frame höher oder kürzer wird.
• Center: Bleibt vertikal zentriert.
• Scale: Skaliert proportional in der Höhe.

Praktische Anwendung

Um Constraints zu setzen, ein Kindelement innerhalb eines Frames auswählen und im rechten Panel die Constraint-Optionen wählen. Eine visuelle Vorschau zeigt, wie das Element bei Größenänderung reagiert.

Der intuitivste Weg ist die visuelle Constraint-Auswahl: Figma zeigt ein kleines Diagramm mit dem Frame und dem Element, in dem man per Klick die Fixierungspunkte setzen kann.

Constraints vs. Auto Layout

Constraints und Auto Layout lösen ähnliche Probleme auf unterschiedliche Weise. Constraints definieren das Verhalten einzelner Elemente relativ zum übergeordneten Frame. Auto Layout hingegen definiert das Verhalten ganzer Gruppen von Elementen relativ zueinander (Abstände, Ausrichtung, Wrapping). In einem modernen Figma-Workflow ergänzen sich beide: Auto Layout kümmert sich um die relative Anordnung von Elementen innerhalb eines Containers, Constraints steuern, wie der Container selbst auf Frame-Größenänderungen reagiert.

Fix Position When Scrolling

Eine spezielle Constraint-Option ist „Fix Position When Scrolling" (im Prototyping-Kontext). Damit kann ein Element – zum Beispiel eine Sticky Navigation Bar – beim Scrollen des Prototypen an seiner Position bleiben, während der restliche Inhalt scrollt. Diese Option erscheint im Constraints-Panel, wenn Prototyping aktiv ist.

Beispiele

1. Sticky Header: Navigation Bar mit Top (vertikal) und Left and Right (horizontal) → bleibt oben, streckt sich über die volle Breite.
2. Floating Action Button: Ein runder Button unten rechts bekommt Bottom und Right → bleibt immer in der unteren rechten Ecke, egal wie groß der Frame ist.
3. Hintergrundbild: Ein Hero-Bild soll sich mit dem Frame mitscalen → Scale (horizontal) und Scale (vertikal).
4. Zentriertes Logo: Ein Logo in der Mitte der Navigationsleiste bekommt Center horizontal → bleibt immer zentriert, egal wie breit die Nav wird.
5. Fußzeile fixiert unten: Ein Footer-Element bekommt Bottom vertikal → bleibt immer am unteren Rand des Screens.

In der Praxis

Shortcuts und Tipps:

• Constraints werden im rechten Panel sichtbar, sobald ein Element innerhalb eines Frames ausgewählt ist. Bei Groups sind keine Constraints verfügbar.
• Constraints testen: Den übergeordneten Frame auswählen und die Ecke ziehen – so sieht man sofort das Verhalten der Kindelemente.
• Beim Erstellen von Responsive-Design-Mockups empfiehlt es sich, Constraints von Anfang an bewusst zu setzen, nicht nachträglich.
• Wichtig: Constraints funktionieren nur eine Ebene tief. Ein verschachteltes Element reagiert auf den direkten Parent-Frame, nicht auf den Root-Frame.

Häufige Fehler:

• Constraints in Groups setzen wollen – das ist nicht möglich. Group in Frame umwandeln.
• „Scale" verwenden, wenn „Left and Right" gemeint ist – Scale verändert proportional, Left and Right streckt.
• Vergessen, dass Constraints im Auto-Layout-Frame anders funktionieren: In Auto-Layout-Frames steuert das Layout-System die Ausrichtung, Constraints sind dort auf „Fixed" gesetzt.

Vergleich & Abgrenzung

In Sketch gibt es „Resizing"-Optionen (Fixed, Stretch, Float) sowie „Pin to Edge"-Optionen, die Figma-Constraints ähneln, aber weniger intuitiv visualisiert werden. In Adobe XD heißen ähnliche Funktionen „Responsive Resize" und werden automatisch berechnet – weniger Kontrolle, aber einfacher für Einsteiger. In CSS entsprechen Figma-Constraints konzeptuell Eigenschaften wie position: fixed, right: 0, width: 100% oder Flexbox-Eigenschaften. Figma-Constraints sind einfacher zu verstehen als CSS-Positioning, decken aber nicht alle CSS-Möglichkeiten ab.

Häufige Fragen (FAQ)

Funktionieren Constraints auch in verschachtelten Frames? Ja, jedes Element reagiert auf seinen direkten Parent-Frame. Ein Element im innersten Frame reagiert auf diesen innersten Frame, nicht auf den äußersten Screen-Frame. Für komplexe responsive Layouts braucht man daher eine gut durchdachte Frame-Hierarchie.

Was passiert mit Constraints, wenn ich Auto Layout aktiviere? Wenn ein Frame in ein Auto-Layout-Frame umgewandelt wird, werden die Constraints der Kindelemente auf „Fixed" gesetzt, da Auto Layout die Positionierung übernimmt. Die ursprünglichen Constraints-Einstellungen gehen verloren – das muss man beim Umwandeln beachten.

Kann ich Constraints für mehrere Elemente gleichzeitig setzen? Ja, mehrere Elemente auswählen und dann die Constraints setzen – die Einstellungen werden auf alle ausgewählten Elemente angewendet, sofern sie sich alle innerhalb von Frames befinden.

Verwandte Einträge

• Auto Layout
• Frames vs. Groups
• Responsive Design in Figma

Weiterführend

• Figma Help Center – help.figma.com/de
• Figma-Dokumentation: „Apply constraints to define how layers resize" – help.figma.com
• DesignCourse: „Figma Constraints Tutorial" (YouTube, 2024)