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

• Ausrichtung von Objekten (z. B. Text, Buttons, Bilder) mit Layout-Rastern für präzise Positionierung;
• Anpassung der Constraints für jedes Objekt je nach gewünschtem Verhalten bei Größenänderung des Rahmens;
• Sicherstellen, dass Gruppen oder maskierte Objekte wie beabsichtigt funktionieren, indem sie in Rahmen verschachtelt und Constraints erneut angewendet werden. Shortcut ist CTRL + ALT + G (Windows) oder Command + Option + G (Mac);
• Testen der Responsivität durch Größenänderung des übergeordneten Rahmens, um sicherzustellen, dass keine Verzerrungen oder Fehlausrichtungen auftreten.