Explorez les propriétés de disposition automatique – Figma Learn - Centre d'aide

Cet article est disponible à la fois pour l’ancienne interface utilisateur Figma et la nouvelle interface utilisateur Figma. Utilisez le bouton en bas à gauche de la page pour sélectionner votre interface utilisateur actuelle. Faites connaissance avec UI3 : la nouvelle conception de Figma →

Avant de commencer

Qui peut utiliser cette fonctionnalité

Disponible sur tous les forfaits

Les utilisateurs disposant d’un accès can edit(peut modifier) un fichier peuvent ajouter la disposition automatique aux cadres et aux objets.

Vous connaissez déjà les propriétés de disposition automatique ? Découvrez comment utiliser la disposition automatique →

La disposition automatique est une propriété que vous pouvez ajouter aux cadres et aux composants. Elle vous permet de créer des designs capables de grossir ou de rétrécir pour mieux se réajuster à la taille de leur contenu au fur et à mesure. Cela est très pratique lorsqu'il vous faut ajouter de nouveaux calques, ajouter davantage de texte ou maintenir l'alignement au fur et à mesure de l'évolution de vos designs.

Il existe de nombreuses façons d'utiliser la disposition automatique :

Créez des boutons qui grossissent ou rétrécissent en fonction du texte.
Créez des listes qui s’adaptent au fur et à mesure que des éléments sont ajoutés, supprimés ou masqués.
Combiner les cadres de la disposition automatique pour créer des interfaces complètes.

La mise en page automatique est une fonctionnalité puissante avec de nombreuses pièces mobiles et utilisations. Dans cet article, nous allons détailler le fonctionnement des différents aspects de la mise en page automatique.

Explorez le fichier d'initiation à la disposition automatique dans la communauté Figma →

Les cadres de disposition automatique ont des propriétés différentes des cadres classiques. Lorsque vous appliquez la disposition automatique, vous observerez quelques modifications dans le panneau de droite.

Vous ne pourrez pas effectuer les opérations suivantes pour les cadres de disposition automatique :

Ajouter des layout grids (grilles de mise en page) à ce cadre
🚫 Appliquer des constraints (contraintes) à tous les objets d’un cadre de mise en page automatique, sauf si l’option Ignore auto layout (Ignorer la mise en page automatique) est activée pour l’objet
🚫 Utiliser la sélection intelligente sur tous les objets situés dans le cadre

Flux de mise en page

Direction

Direction décrit la manière dont le cadre de la disposition automatique va s'ajuster.

Vertical : Ajouter, supprimer et réorganiser des 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.
Horizontal : 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.
Envelopper : Disposer des objets sur plusieurs lignes et colonnes dans un cadre. Les objets s’écoulent horizontalement et passent à la ligne suivante. Par exemple : des galeries de photos ou un ensemble de balises.

trois séries de dessins, tous avec les mêmes éléments : trois cercles, un rose, un jaune, un vert. La première série de cercles est placée dans le sens vertical. Le deuxième ensemble de cercles est placé dans une direction horizontale. Le troisième ensemble de cercles est enveloppé, avec les cercles roses et jaunes dans la première rangée et le cercle vert dans la deuxième rangée.

Ordre d’empilement des plans de travail

Lorsque plusieurs calques ont un espacement négatif et créent une pile, le dernier objet (le plus à droite ou le plus en bas) de la pile est placé au-dessus par défaut.

Vous pouvez modifier l’ordre visuel de la pile comme indiqué sur le canevas.

Avec le cadre de disposition automatique sélectionné, cliquez sur depuis le panneau de droite pour ouvrir les paramètres de disposition automatique. À côté de la pile de plans de travail, sélectionnez :

Premier en haut : la première couche de la pile sera en haut
Dernière en haut : la dernière couche de la pile sera en haut

comparaison côte à côte du dernier en haut et du premier en haut

Remarque : notez que lorsque l’ordre d’empilement change, l’ordre des calques dans le panneau des calques reste le même. L’empilement des canevas est uniquement un changement visuel qui se produit sur le canevas.

Ignorer la mise en page automatique

Remarque : Ignorer la mise en page automatique était auparavant connu sous le nom de position absolue. La fonctionnalité a un nouveau nom, mais elle fonctionne toujours de la même manière.

Un objet pour lequel Ignore auto layout (Ignorer la mise en page automatique) est activé est exclu d’un flux de mise en page automatique tout en le conservant dans le cadre de mise en page automatique. L’objet et ses frères et sœurs environnants s’ignorent, même lorsqu’ils se redimensionnent et se déplacent.

À l’instar de la position absolue en CSS, un objet qui ignore la mise en page automatique peut être placé précisément à l’endroit voulu par rapport à son conteneur parent.

Les objets pour lesquels l’option Ignore auto layout (Ignorer la mise en page automatique) est activée sont traités comme des objets dans un cadre normal. Cela signifie que vous pouvez appliquer des contraintes pour déterminer comment ils réagissent lorsque le cadre de mise en page automatique parent se redimensionne. Les autres paramètres de mise en page automatique, tels que les options de redimensionnement et de mise en page, ne sont pas disponibles pour ces objets.

Vous pouvez faire en sorte qu’un objet ignore le flux de disposition automatique en effectuant l’une des opérations suivantes :

Sélectionnez l'enfant d'un cadre de disposition automatique et cliquez sur dans le panneau de droite.
Faites glisser un objet dans un cadre de disposition automatique tout en appuyant sur ⌃ Control .

Dans un fichier Figma Design, un curseur fait glisser une icône X dans un cadre de mise en page automatique tout en maintenant la touche de contrôle enfoncée. Le curseur libère l’icône X dans le coin supérieur droit du cadre.

Espacement

Espacement entre les éléments

Utilisez l’espace entre les éléments pour définir la distance, ou la répartition, entre les objets dans un cadre de mise en page automatique.

L’écart entre les éléments comporte deux paramètres différents :

Auto : Régler l'écart entre les objets pour qu'il soit le plus grand possible. Tapez Auto dans le champ ou sélectionnez-le dans le menu déroulant.
Un espace spécifié : Indiquez la distance entre les objets. Entrez une valeur dans le champ, déplacez les valeurs à l’aide des touches fléchées ou faites varier la valeur dans le champ à l’aide du curseur.

Pour basculer rapidement entre ces deux paramètres, cliquez sur la case d’alignement et appuyez sur X.

Si la direction du cadre de mise en page automatique est définie sur vertical ou horizontal, vous pourrez définir l’espace entre les éléments verticalement ou horizontalement, respectivement. Si la direction du cadre est définie sur « wrap » (envelopper), vous pourrez définir l’espace horizontal et vertical entre les éléments.

Astuce ! Maintenez la touche ⇧ Maj enfoncée tout en faisant glisser les poignées pour augmenter et diminuer les valeurs à l’aide de vos valeurs big nudge (reconnaissance).

Remplissage

Le remplissage contrôle l’espace vide ou blanc entre les limites d’un cadre de mise en page automatique et les objets enfants du cadre. Vous pouvez définir le rembourrage de manière uniforme, verticale et horizontale, ou définir des valeurs différentes pour le rembourrage supérieur, droit, bas et gauche.

Ajustez les marges intérieures à l’aide des commandes du plan de travail ou des champs d’espacement dans le panneau de droite.

Pour accéder aux commandes du plan de travail, sélectionnez un cadre de disposition automatique et passez la souris dessus. Des poignées roses apparaîtront, similaires à celles de la sélection automatique.

Cliquez sur les poignées pour ouvrir les champs de saisie et entrer une valeur numérique.
Vous pouvez également cliquer sur la poignée et la faire glisser pour modifier l’espacement.

Astuce : Consultez notre guide des raccourcis clavier ↓ pour connaître les raccourcis permettant de régler le rembourrage sur les côtés opposés, sur tous les côtés, et plus encore!

Une carte de blog vert clair contenant un titre, une description et un bouton « Lire la suite ». La mise en page automatique est appliquée à cet actif. Le raccourci clavier permettant de modifier le rembourrage de tous les côtés s’affiche en dessous. Un curseur utilise ce raccourci clavier tout en cliquant et en faisant glisser la poignée rose supérieure du cadre de mise en page automatique.

Les commandes des marges intérieures dans le panneau de droite sont divisées par défaut entres marges intérieures verticales (haute et basse) et horizontales (gauche et droite).

Pour définir un remplissage individuel, cliquez sur pour utiliser les champs de remplissage en haut, à droite, en bas et à gauche.
Pour définir des marges intérieures uniformes ou utiliser un raccourci CSS, maintenez la touche Commande ⌘ ou Contrôle enfoncée et cliquez dans n'importe quel champ de marges intérieures. Vous pouvez également saisir un raccourci CSS. Par exemple, en entrant 1,2,3,4, vous définissez les valeurs haut, droite, bas et gauche sur 1, 2, 3 et 4 respectivement. La saisie de 1,2 définit les valeurs haut/bas sur 1 et gauche/droite sur 2.

Astuce ! Appuyez sur la touche onglet pour te déplacer entre les champs de saisie.

Tracés de mise en page

Par défaut, les traits ne sont pas pris en compte dans le calcul de la taille des objets et n’affectent donc pas leur cadre parent ou leurs frères et sœurs environnants.

Ce n’est peut-être pas l’idéal lors du transfert aux développeurs, car cela ne représente pas avec précision la façon dont le CSS affiche les bordures.

Choisissez si les traits occuperont de l’espace dans un cadre de mise en page automatique en accédant aux paramètres de mise en page automatique et en utilisant la liste déroulante à côté du trait pour sélectionner inclus dans la mise en page ou exclus de la mise en page.

Alignement

Définir l’alignement sur les objets enfants

Choisissez comment aligner les éléments enfants dans un cadre de disposition automatique. La direction du cadre de disposition automatique et la répartition, ou l'espace entre les éléments, déterminent les options d'alignement disponibles.

Contrairement aux objets d'un cadre normal, vous ne pourrez pas contrôler l'alignement des objets individuellement. Pour cette raison, vous définissez l'alignement des objets contenus via leur cadre de disposition automatique.

Utilisez la zone d’alignement dans le panneau de droite pour sélectionner l’une des neuf options de mise en forme pour les objets appartenant à un cadre.

Sélectionnez la case et utilisez les touches fléchées pour basculer entre les différents paramètres d’alignement.
Sélectionnez la case et appuyez sur W/A/S/D pour définir l’alignement sur le bord du cadre.

Un cadre de mise en page automatique vert avec 3 carrés jaunes. Un curseur fait défiler les différentes options de la boîte d’alignement dans le panneau de droite.

Si l’écart entre les éléments est réglé sur Auto, vous disposez de trois options pour chaque direction :

Disposition automatique verticale : à gauche, au centre, à droite
Disposition automatique horizontale : en haut, au centre, en bas

Un cadre de disposition automatique vert avec 3 carrés jaunes. Un curseur clique sur les différentes options de la case d’alignement lorsque Auto est appliqué à l’espace entre les éléments.

Si l'espace entre les éléments est défini sur un nombre spécifique, vous disposez des mêmes neuf options pour chaque direction :

En haut à gauche
Au centre en haut
En haut à droite
À gauche
Au centre
À droite
En bas à gauche
En bas au centre
En bas à droite

Remarque : Lorsqu'une ou plusieurs propriétés de redimensionnement sont définies pour enserrer le contenu, certaines sélections n'entraîneront pas de dispositions visuellement différentes sur le canevas. En effet, le fait d'enserrer le contenu supprime tout espace supplémentaire autour des éléments d'un cadre.

Alignement de la ligne de base du texte

La ligne de base est la ligne invisible dans laquelle se trouve du texte ou un calque. En typographie, les jambages descendront en dessous de cette ligne.

Dans certains cas, l’alignement des lignes de base des calques peut créer un meilleur équilibre, par exemple lors de l’alignement des lignes de base des calques de texte avec des tailles de police différentes, ou lors de l’alignement d’une icône avec un calque de texte.

comparaison côte à côte de l’icône et du texte avec et sans alignement de la ligne de base du texte

Pour aligner les calques par leurs lignes de base, sélectionnez les calques que vous souhaitez aligner et cliquez sur depuis le panneau de droite pour ouvrir les paramètres de mise en page automatique. En regard de l’alignement de la ligne de base du texte, cliquez sur pour activer l’alignement de la ligne de base.

Astuce ! Cliquez sur la case d’alignement dans le panneau de droite et appuyez sur B pour activer ou désactiver l’alignement de la ligne de base du texte.

Redimensionnement

L'une des fonctions les plus puissantes de la disposition automatique consiste à pouvoir contrôler les dimensions des objets dans un cadre de la disposition automatique.

Définissez le comportement de redimensionnement des cadres de disposition automatique parents afin de l’adapter aux modifications apportées à leurs objets enfants. Les paramètres de redimensionnement peuvent être appliqués aux objets sur les axes des abscisses et des ordonnées individuellement à l'aide des menus déroulants du panneau de droite.

Lorsque vous passez la souris sur une option de redimensionnement dans la liste déroulante, des lignes apparaissent sur le plan de travail pour indiquer comment le cadre de délimitation du design sera redimensionné et modifié.

une couche à l’intérieur d’un cadre mobile est sélectionnée. Une zone met en évidence la section de redimensionnement du panneau de droite.

Remarque : Les calques de texte possèdent également leurs propres propriétés de redimensionnement. Dans un cadre de la disposition automatique, cela peut produire des résultats utiles.

Si vous souhaitez que vos cadres de mise en page automatique soient complètement fluides, nous vous déconseillons d’utiliser des zones de texte de taille fixe. Les calques de texte de taille fixe ne seront pas redimensionnés pour s’adapter à votre texte, ce qui peut entraîner un chevauchement entre les calques dans un cadre de mise en page automatique.

Pour en savoir plus sur le redimensionnement du texte →

Largeur ou hauteur fixe

Lorsqu'un cadre de la disposition automatique est réglé sur Largeur ou hauteur Fixe, les valeurs des dimensions du cadre restent les mêmes, quel que soit son contenu. La taille des cadres ne répond pas aux modifications apportées aux objets qu'ils contiennent, comme une chaîne de texte qui change de longueur.

Dimensions minimales et maximales

Vous pouvez définir une largeur et une hauteur minimales ou maximales pour tout cadre de disposition automatique et ses enfants.

Ouvrez le menu déroulant Width contenant Add min width et Add max width
Ouvre le menu déroulant Height (Hauteur) pour trouver Add min height (Ajouter la hauteur minimale) et Add max height (Ajouter la hauteur maximale)

Sélectionnez une option dans le menu déroulant Width (Largeur) ou Height (Hauteur). Dans le nouveau champ qui apparaît, saisissez une valeur ou utilisez le menu déroulant pour appliquer une variable numérique.

Un composant de balise de sujet étiqueté sujet avec une bordure noire et un arrière-plan blanc, qui utilise une disposition automatique horizontale. Un curseur ajoute une largeur minimale de 80 pixels au composant, puis change l’étiquette en « design d’intérieur ». Le composant s'étend horizontalement pour accueillir le texte.

Si un objet contient un paramètre min ou max, son icône de largeur ou de hauteur gagnera deux lignes, une de chaque côté. Vous pouvez survoler ces icônes pour prévisualiser les limites de dimension sur le canevas.

Lorsque vous désélectionnez et resélectionnez un objet, ses champs de dimensions min et max sont masqués dans le panneau de droite. Pour y accéder à nouveau, cliquez sur l’icône de la largeur ou de la hauteur.

Pour supprimer un paramètre min ou max, ouvrez le menu déroulant Width (Largeur) ou Height (Hauteur) et choisissez Remove min and max (Supprimer min et max).

Remarque : Les calques ne peuvent pas avoir à la fois une hauteur maximale et un nombre défini de lignes maximales. L’ajout d’une hauteur maximale réglera le nombre maximum de lignes sur Auto. La définition du nombre maximal de lignes sur un nombre supprimera le paramètre de hauteur maximale du calque. En savoir plus sur le nombre maximal de lignes →

Enserrer le contenu

Appliquez Enserrer le contenu à un cadre de la disposition automatique pour qu'il se redimensionne en fonction de son contenu. Le cadre conserve les dimensions les plus petites possibles pour entourer les objets à l'intérieur, tout en respectant la valeur de remplissage.

Astuce ! Double-cliquez sur le bord vertical ou horizontal du cadre de délimitation d’un objet de mise en page automatique pour le définir sur Hug contents (Épouser le contenu).

Remarque : Si des objets contenus dans un cadre de la disposition automatique sont définis sur Remplir le contenant, le cadre parent n'enserrera plus le contenu et deviendra Fixe par rapport à l'axe.

Remplir le contenant

Les objets d'un cadre de la disposition automatique qui sont définis sur Remplir le contenant s'étendent à la largeur et/ou à la hauteur de leur cadre parent.

Les objets enfants d’un cadre de mise en page automatique seront également définis sur Fill container (Remplir le conteneur) s’ils sont redimensionnés manuellement à la largeur totale du cadre parent.

Astuce ! Maintenez la touche ⌥ Option ou Alt enfoncée et double-cliquez sur le bord vertical ou horizontal du cadre de délimitation d’un objet de mise en page automatique pour le définir sur Fill container (Remplir le conteneur).

Une note sur les contraintes

Vous ne pouvez pas appliquer de contraintes aux objets enfants dans un cadre de mise en page automatique, sauf si l’objet ignore le flux de mise en page automatique. Au lieu de cela, vous pouvez utiliser la propriété de redimensionnement pour définir la manière dont les objets réagissent lorsque le cadre, ou les objets dans le cadre, sont redimensionnés.

Vous pouvez toujours appliquer des contraintes au cadre de mise en page automatique lui-même s’il est imbriqué dans un cadre standard. La section Constraints (Contraintes) et les options de redimensionnement apparaissent, vous permettant de définir à la fois les contraintes du cadre de mise en page automatique et le comportement de redimensionnement de tous les objets qu’il contient.

Par exemple : si vous avez créé un ensemble de balises à l’aide de la disposition automatique, vous souhaiterez peut-être qu’il 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.

Un cadre mobile avec un panneau popup au bas de l’écran. Un curseur sélectionne le panneau, clique sur le bouton de contraintes et modifie les contraintes horizontales de « gauche » à « gauche et droite ». Lorsque vous redimensionnez horizontalement le cadre mobile, le panneau s’agrandit.

En savoir plus sur les contraintes →

Guide des raccourcis clavier

Raccourcis de base

Action	Mac	Windows
Ajouter la disposition automatique	`⇧ Shift A`	`⇧ Shift A`
Proposer une disposition automatique	`Ctrl` `⇧ Maj A`	`Ctrl` `Alt` `⇧ Maj` `A`
Supprimer la disposition automatique	`⌥ Option` `⇧ Maj A`	`Alt` `⇧ Maj A`
Modifier les marges intérieures sur tous les côtés (à partir du panneau de droite)	`⌘Commande` + clic pour remplir le champ de saisie	`Ctrl` + clic pour remplir le champ de saisie

Dans la boîte d’alignement

Cliquez sur la case d'alignement dans le panneau de droite et appuyez sur les touches suivantes pour :

Action	Mac et Windows
Définir l’alignement	`↓` / `→` / `←` / `↑`
Définir l’alignement sur l’arête	`W` / `A` / `S` / `D`
Basculer l’alignement de la ligne de base	`B`
Basculer l’écart entre	`X`

Dans le plan de travail :

Utilisez ces raccourcis clavier lorsque vous faites glisser les poignées sur le plan de travail pour :

Action	Mac	Windows
Définir le rembourrage sur les côtés opposés	`⌥ Option`	`Alt`
Mettre un rembourrage sur tous les côtés	`⌥ Option⇧ Shift`	`Alt⇧ Maj`
Régler le rembourrage ou l’espacement avec un grand coup de pouce	`⇧ Maj`	`⇧ Décalage`

Utilisez ces raccourcis clavier et cliquez sur des zones spécifiques d’un cadre de mise en page automatique :

Action	Mac	Windows
Saisissez la valeur de remplissage sur les côtés opposés	⌥ `Option` + Cliquer sur la zone de remplissage	`Alt` + Cliquez sur la zone des marges intérieures
Saisissez la valeur de remplissage sur tous les côtés	`⌥ Option⇧ Shift` + Zone de remplissage des clics	`Alt⇧ Shift` + Zone de remplissage des clics
Définir l’ajustement au contenu	Double-clique sur le bord vertical ou horizontal	Double-clique sur le bord vertical ou horizontal
Définir le remplissage du contenant	`⌥ Option` + Double-cliquez sur le bord vertical ou horizontal	`Alt` + Double-cliquez sur le bord vertical ou horizontal