Contraintes définissent comment les calques réagissent lorsque vous redimensionnez leurs cadres parents, permettant des conceptions réactives pour différentes tailles d'écran et appareils. Les objets à l'intérieur d'un cadre sont appelés objets enfants, tandis que le cadre lui-même est le cadre parent.

Les contraintes possèdent des réglages horizontaux (axe x) et verticaux (axe y). Par défaut, les objets sont contraints aux bords supérieur et gauche de leur cadre parent.

Contraintes horizontales

• Gauche : maintient l'objet positionné par rapport au côté gauche ;
• Droite : positionne par rapport au côté droit ;
• Gauche + Droite : la taille de l'objet s'ajuste avec le cadre le long de l'axe x ;
• Centré : maintient l'objet centré horizontalement ;
• Mise à l'échelle : ajuste la taille et la position de l'objet proportionnellement au cadre.

Contraintes verticales

• Haut : positionne par rapport au bord supérieur ;
• Bas : positionne par rapport au bord inférieur ;
• Haut + Bas : la taille de l'objet s'ajuste avec le cadre le long de l'axe y ;
• Centré : maintient l'objet centré verticalement ;
• Mise à l'échelle : similaire à la mise à l'échelle horizontale mais pour l'axe y.

Les contraintes peuvent également être définies visuellement à l'aide de la boîte de contraintes dans le panneau de conception.

Utilisation des contraintes pour le design réactif

• Aligner les objets (par exemple, texte, boutons, images) avec les grilles de mise en page pour un positionnement précis ;
• Ajuster les contraintes de chaque objet selon le comportement souhaité lors du redimensionnement du cadre ;
• S'assurer que les groupes ou objets masqués se comportent comme prévu en les imbriquant dans des cadres et en réappliquant les contraintes. Le raccourci est CTRL + ALT + G (Windows), ou Command + Option + G (Mac) ;
• Tester la réactivité en redimensionnant le cadre parent pour vérifier qu'aucune distorsion ou désalignement ne se produit.