Les constraints ou contraintes dans Figma permettent à un élément enfant de se redimensionner automatiquement par rapport à son parent. Ainsi, lorsque vous étirerez un Frame pour le redimensionner, les éléments contenus dans ce Frame adopteront un comportement responsif en fonction des contraintes définies. C’est un outil assez avancé dans Figma, qui une fois maitrisé, est un véritable gain de productivité.

Que ce soit pour vos maquettes UX et UI, les contraintes sont donc des outils très efficaces pour designer des interfaces web responsive. Ces fonctionnalités s'appliqueront à tous types d'éléments du design comme les images, les composants, les textes, les boutons, les groupes, etc.

Il existe plusieurs types de contraintes Figma que vous pourrez utiliser selon les besoins du projet. Lors des phases de conception, de prototypage, de design, elles vous permettront d’affecter plusieurs comportement responsif à un ou plusieurs éléments enfants : les contraintes horizontales et les contraintes verticales.

Contraintes Horizontales

Les Horizontal constraints ou contraintes horizontales, vont permettre de définir comment va réagir votre layer / calque lorsque vous ajusterez votre frame horizontalement.

Voici les différentes contraintes horizontales que vous pourrez appliquer aux éléments enfants :

• Left : va fixer la position de votre calque sur la partie gauche du Frame. Quand vous étirerez votre Frame vers la gauche, l’élément enfant suivra.
• Right : va fixer la position de votre calque sur la partie droite du Frame. Quand vous étirerez votre Frame vers la droite, l’élément enfant suivra.
• Left and right : maintient la position du calque lorsque vous modifierez celle du Frame par la gauche et par la droite. Cela pourra cependant affecter la taille du claque, en l’agrandissant ou le rétrécissant.
• Center : maintient la position du calque par rapport au centre horizontale du frame.
• Scale : la taille ainsi que la position de votre élément enfant seront réajustés de manière propositionnelle (en pourcentage) à celles du Frame. Par exemple, prenons un Frame de 100 px qui contient un calque de 80 px. Dans ce cas l’élément enfant représente 80% du Frame. Si on passe le Frame à 200px, soit +20%, le calque passera lui à 160 px, +20% également.

Contraintes Verticales

Les contraintes verticales dans Figma vont vous permettre de définir comment va réagir un élément enfant lorsque les dimensions verticales du Frame sont modifiées.

Il existe plusieurs types de contraintes verticales :

• Top : fixe la position du calque sur la partie haute du frame.
• Bottom : fixe la position du calque sur la partie basse frame.
• Top and bottom : maintient la position du calque lorsque vous modifierez celle du Frame par le haut et par le bas. Cela pourra cependant affecter la taille du claque, en l’agrandissant ou le rétrécissant.
• Center : maintient la position du calque par rapport au centre vertical du frame.
• Scale : tout comme pour le scale horizontale, la tailles et la position de votre calque s’ajusteront proportionnellement à ceux du Frame.

Utilisations des contraintes dans Figma

Les contraintes Figma s’appliquent à tout élément contenu dans un Frame :

• Claque dans un Frame
• Frame dans un Frame
• Pour vos groupes

Les contraintes peuvent être utilisées pour définir comment réagiront vos éléments dans vos prototypes. Par exemple lorsque vous créerez des animations.

Ajouter des contraintes dans Figma

1. Sélectionnez l’élément enfant contenu dans le frame. Dans la slide bare de design (à droite de votre écran), vous verrez une section “Constraints”.
2. Les encoches bleues représentent les contraintes horizontales et verticales appliquées sur votre calque. Vous pourrez soit ajuster vos contraintes verticales et horizontales en cliquant sur les tirets interactifs ; soit ajuster en sélectionnant vos contraintes depuis les drop down listes.
3. L’option “Fix position when scrolling” vous permettra de figer la position de votre calque au scroll. Vous pourrez ainsi créer des “Sticky Element” dans votre site.

Ignorer les contraintes dans Figma

Parfois vous aurez besoin de redimensionner la taille de votre frame ou layer, sans pour autant affecter le reste des éléments. Plutôt que d’enlever les contraintes une par une, utiliser les raccourcis claviers suivant pendant le redimensionnage :

Mac : Maintenir “Cmd” + redimensionnez

Windows : Maintenir “Ctrl” + redimensionnez