Constraints bepalen hoe lagen reageren wanneer je hun ouderframes vergroot of verkleint, waardoor responsieve ontwerpen voor verschillende schermformaten en apparaten mogelijk zijn. Objecten binnen een frame worden kinderobjecten genoemd, terwijl het frame zelf het ouderframe is.

Constraints hebben horizontale (x-as) en verticale (y-as) instellingen. Standaard zijn objecten beperkt tot de bovenkant en linkerkant van hun ouderframe.

Horizontale constraints

• Links: houdt het object gepositioneerd ten opzichte van de linkerkant;
• Rechts: positioneert ten opzichte van de rechterkant;
• Links + Rechts: de grootte van het object past zich aan met het frame langs de x-as;
• Midden: houdt het object horizontaal gecentreerd;
• Schaal: past de grootte en positie van het object proportioneel aan het frame aan.

Verticale constraints

• Boven: positioneert ten opzichte van de bovenrand;
• Onder: positioneert ten opzichte van de onderrand;
• Boven + Onder: de grootte van het object past zich aan met het frame langs de y-as;
• Midden: houdt het object verticaal gecentreerd;
• Schaal: vergelijkbaar met horizontaal schalen, maar dan voor de y-as.

Constraints kunnen ook visueel worden ingesteld met behulp van het constraints-vak in het ontwerppaneel.

Constraints gebruiken voor responsief ontwerp

• Objecten (zoals tekst, knoppen, afbeeldingen) uitlijnen met layoutraster voor nauwkeurige positionering;
• Constraints voor elk object aanpassen op basis van het gewenste gedrag bij het wijzigen van het frameformaat;
• Zorgen dat groepen of gemaskeerde objecten correct functioneren door ze in frames te nesten en constraints opnieuw toe te passen. Sneltoets is CTRL + ALT + G (Windows), of Command + Option + G (Mac);
• Responsiviteit testen door het ouderframe te vergroten of verkleinen om te controleren of er geen vervorming of verkeerde uitlijning optreedt.