Constraints legen fest, wie Ebenen reagieren, wenn ihre übergeordneten Rahmen in der Größe verändert werden. Dadurch werden responsive Designs für verschiedene Bildschirmgrößen und Geräte ermöglicht. 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 entsprechend dem gewünschten 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 STRG + ALT + G (Windows) oder Command + Option + G (Mac);
• Testen der Responsivität durch Größenänderung des übergeordneten Rahmens, um Verzerrungen oder Fehlausrichtungen zu vermeiden.