-25% sur toutes les formations avec le code : 
Qu’est-ce que l’Auto layout sur Figma ?
L’Auto Layout (mise en page automatique) est une propriété que vous pouvez ajouter aux cadres et aux composants. Elle vous permet de créer des conceptions qui s’agrandissent ou se rétrécissent en fonction de leur taille, et qui s’adaptent à l’évolution de leur contenu. C’est une solution idéale lorsque vous devez ajouter de nouveaux calques, adapter des chaînes de texte plus longues ou maintenir l’alignement à mesure que vos conceptions évoluent.
Il existe de nombreuses façons d’utiliser l’Auto Layout :
- Créer des boutons qui s’agrandissent ou se réduisent au fur et à mesure que vous modifiez le texte.
- Créer des listes qui s’adaptent lorsque des éléments sont ajoutés, supprimés ou masqués.
- Combiner des cadres de Auto Layout pour créer des interfaces complètes.
Dans cet article, nous allons vous montrer comment ajouter la mise en page automatique à un cadre et comment chacune de ses propriétés fonctionne.
Ajouter un Auto layout
Vous pouvez ajouter la mise en page Auto à un cadre ou à une sélection d’objets. Cela comprend :
- Les nouveaux cadres ou vides
- les cadres avec un contenu existant
- les composants et les ensembles de composants
- les groupes ou autres sélections de calques et/ou d’objets.
Remarque : la mise en page automatique n’est possible que pour les cadres. Si vous sélectionnez des objets qui ne sont pas dans un cadre, Figma créera un cadre Auto Layout autour d’eux.
Vous pouvez ajouter un Auto Layout à un cadre, un composant ou un jeu de composants de différentes manières :
- Utilisez le raccourci clavier Shift A.
- Dans la barre latérale droite, cliquez sur l’icône + à côté de Auto Layout après avoir sélectionné un cadre.
- Cliquez avec le bouton droit de la souris sur le cadre ou l’objet et sélectionnez Add Auto layout
Conseil ! Vous pouvez ajouter l’Auto Layout aux composants. Vous devrez ajouter la mise en page automatique à chaque composant individuellement.
Auto layout
Les cadres avec Auto layout ont des propriétés différentes des cadres normaux. Lorsque vous appliquez un Auto layout, vous constaterez certains changements dans la barre latérale droite.
Vous ne pouvez pas effectuer les opérations suivantes sur les cadres à mise en page automatique :
- Ajouter des grilles de mise en page à ce cadre.
- Appliquer des contraintes à tout objet dans un cadre Auto Layout
- Utiliser la sélection intelligente sur tous les objets du cadre.
Direction
La direction décrit la manière dont le cadre Auto Layout s’écoulera.
Choisissez la direction verticale pour ajouter, supprimer et réorganiser les objets le long de l’axe des ordonnées. Par exemple : des objets dans une liste, ou des messages dans un fil d’actualité ou une chronologie.
Choisissez l’option horizontale pour ajouter, supprimer et réorganiser des objets le long de l’axe des abscisses. Par exemple : une rangée de boutons, ou des icônes dans un menu de navigation mobile.
Figma ne prend actuellement en charge qu’une seule direction à la fois, horizontale ou verticale. Pour construire des designs qui utilisent les deux directions, vous devrez combiner ou imbriquer des cadres de mise en page automatique.
Espacement entre les éléments
Vous pouvez contrôler l’espacement entre les éléments dans un cadre Auto layout.
Contrairement à la sélection intelligente, il n’est pas possible d’ajuster l’espacement dans le canvas. Utilisez plutôt les champs d’espacement dans la section Auto layout de la barre latérale droite :
- Horizontal space between
- Vertical space between
Saisissez un nombre dans le champ, déplacez les valeurs à l’aide de vos touches fléchées ou effacez le champ à l’aide de votre curseur.
Padding
Le Padding contrôle l’espace vide ou blanc entre les objets enfants et les limites d’un cadre Auto layout. Vous pouvez définir le Padding de manière uniforme ou avoir des valeurs différentes pour le Padding supérieur, droit, inférieur et gauche.
- Saisissez une seule valeur dans le champ pour définir un padding égal sur tous les côtés, ou utilisez la syntaxe CSS pour définir des valeurs individuelles. Par exemple, en saisissant 1,2,3,4, vous définissez les valeurs suivantes : top : 1, droite : 2, bas : 3, et gauche : 4 respectivement. Ou bien, en saisissant 1,2, vous définissez les valeurs top/bottom : 1 et gauche/droite : 2.
- Pour définir manuellement un padding unique pour chaque côté, cliquez sur pour ouvrir les paramètres d’alignement et de distribution et ajustez chaque valeur individuellement.
Alignement
Choisissez comment aligner les objets enfants dans un cadre Auto Layout. La direction et la distribution déterminent les options d’alignement disponibles.
Contrairement aux objets d’un cadre normal, vous ne pouvez pas contrôler l’alignement des objets individuellement. C’est pourquoi vous définissez l’alignement des objets enfants sur le cadre Auto layout parent.
Utilisez la grille interactive pour choisir parmi neuf options de mise en page pour les enfants d’un cadre.
Si votre distribution est définie sur Space between, vous disposez de trois options pour chaque direction :
- Vertical Auto layout : Gauche, Centre, Droite
- Horizontal Auto layout : Haut, Centre, Bas
Si votre distribution est définie sur Packed, vous disposez des mêmes neuf options pour chaque direction :
- Haut gauche
- En haut au centre
- En haut à droite
- Gauche
- Centre
- Droite
- Bas gauche
- Centre du bas
- Bas droit
Distribution
Une fois que vous avez défini les règles d’alignement des objets enfants dans un cadre, choisissez la manière dont ces objets seront distribués dans ce cadre.
Dans le panneau d’alignement, cliquez sur la flèche pour faire votre choix :
Packed : Les objets d’un cadre seront regroupés. Utilisez cette option pour que les objets d’un cadre soient aussi proches que possible les uns des autres et alignés.
Space between : L’espace entre les objets d’un cadre est réparti de manière égale dans la direction et l’alignement définis pour le cadre. Utilisez cette option pour étirer les objets dans un cadre.
Resizing
L’une des fonctions les plus puissantes de la mise en page automatique est sa capacité à contrôler les dimensions des objets dans un cadre Auto layout.
Définissez le comportement de redimensionnement des cadres Auto Layout parents afin qu’ils s’adaptent à toute modification apportée à leurs objets enfants. Les paramètres de redimensionnement peuvent être appliqués individuellement aux objets sur les axes X et Y à l’aide des menus déroulants et du panneau de redimensionnement.
- Largeur ou hauteur fixe
Lorsqu’un cadre Auto layout est défini sur Largeur ou hauteur fixe, les valeurs des dimensions du cadre restent les mêmes, quel que soit le contenu qu’il contient. La taille du cadre ne réagit pas aux modifications des objets qu’il contient, comme une chaîne de texte dont la longueur change.
Hug content Définissez un cadre auto layout sur Hug content pour qu’il se redimensionne en fonction de ses objets enfants. Le cadre conservera les dimensions les plus petites possibles pour entourer les objets qu’il contient, tout en respectant la valeur du padding.
Fill container Les objets d’un cadre auto layout définis sur Fill container s’étirent sur la largeur et/ou la hauteur de leur cadre parent.
- Constraints and resizing (Contraintes et redimensionnement)
Vous ne pouvez pas appliquer de contraintes aux objets enfants d’un cadre Auto Layout. En revanche, vous pouvez utiliser la propriété de redimensionnement pour définir la façon dont les objets réagissent lorsque le cadre, ou les objets qu’il contient, sont redimensionnés.
Vous pouvez toujours appliquer des contraintes à un cadre Auto Layout s’il est imbriqué dans un cadre normal. Vous verrez apparaître une section Constraints and resizing, qui vous permet de définir à la fois les contraintes du cadre Auto Layout et le comportement de redimensionnement des objets qu’il contient.
Par exemple, si vous avez créé une barre de navigation à l’aide de l’Auto layout, vous pouvez souhaiter qu’elle s’adapte à différentes tailles d’écran. Vous pouvez utiliser les contraintes pour vous assurer que la barre de navigation réagit correctement lorsque son cadre parent est redimensionné, et le redimensionnement pour contrôler la façon dont les objets de la barre de navigation réagissent à ces changements.
Vous voulez aller plus loin dans la prise en main de Figma ?
Je vous propose une formation complète de 5h qui va vous permettre de devenir complètement autonome sur l’outil :
