Contraintes

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 dans un cadre sont appelés objets enfants, tandis que le cadre lui-même est le cadre parent.

Les contraintes ont 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 ;
• Centre : maintient l'objet centré horizontalement ;
• É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 ;
• Centre : maintient l'objet centré verticalement ;
• Échelle : similaire à l'échelle horizontale mais pour l'axe y.

Les contraintes peuvent également être définies visuellement en utilisant la boîte de contraintes dans le panneau de conception.

Utilisation des contraintes pour un design réactif

• Alignez les objets (par exemple, texte, boutons, images) avec des grilles de mise en page pour un positionnement précis ;
• Ajustez les contraintes pour chaque objet en fonction de son comportement lorsque le cadre est redimensionné ;
• Assurez-vous 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) ;
• Testez la réactivité en redimensionnant le cadre parent pour vous assurer qu'aucune distorsion ou désalignement ne se produit.