Constraints in Figma: Responsive Design Leicht Gemacht

Constraints legen fest, wie Ebenen reagieren, wenn ihre übergeordneten Rahmen in der Größe verändert werden, und ermöglichen so responsive Designs für verschiedene Bildschirmgrößen und Geräte. Objekte innerhalb eines Rahmens werden als Kindelemente bezeichnet, während der Rahmen selbst der übergeordnete Rahmen ist.

Constraints verfügen über horizontale (x-Achse) und vertikale (y-Achse) Einstellungen. Standardmäßig sind Objekte an den oberen und linken Rand ihres übergeordneten Rahmens gebunden.

Horizontale Constraints

• Links: hält das Objekt relativ zur linken Seite positioniert;
• Rechts: positioniert relativ zur rechten Seite;
• Links + Rechts: Die Größe des Objekts passt sich mit dem Rahmen entlang der x-Achse an;
• Zentriert: hält das Objekt horizontal zentriert;
• Skalieren: passt Größe und Position des Objekts proportional zum Rahmen an.

Vertikale Constraints

• Oben: positioniert relativ zum oberen Rand;
• Unten: positioniert relativ zum unteren Rand;
• Oben + Unten: Die Größe des Objekts passt sich mit dem Rahmen entlang der y-Achse an;
• Zentriert: hält das Objekt vertikal zentriert;
• Skalieren: ähnlich wie horizontales Skalieren, aber für die y-Achse.

Constraints können auch visuell über das Constraints-Feld im Design-Panel festgelegt werden.

Einsatz von Constraints für responsives Design

• Objekte (z. B. Text, Buttons, Bilder) mit Layout-Rastern für präzise Positionierung ausrichten;
• Constraints für jedes Objekt anpassen, je nachdem, wie es sich beim Ändern der Rahmengröße verhalten soll;
• Sicherstellen, dass Gruppen oder maskierte Objekte wie gewünscht funktionieren, indem sie in Rahmen verschachtelt und Constraints erneut angewendet werden. Shortcut ist CTRL + ALT + G (Windows) oder Command + Option + G (Mac);
• Responsivität testen, indem der übergeordnete Rahmen in der Größe verändert wird, um sicherzustellen, dass keine Verzerrungen oder Fehlausrichtungen auftreten.