Guide de disposition automatique

Avant de commencer

Qui peut utiliser cette fonctionnalité

Disponible sur tous les forfaits

Disponible dans Figma Design et Figma Sites. Vous pouvez également accéder à la disposition automatique depuis le Design Mode dans Figma Slides et Figma Buzz.

Toute personne disposant d'un accès de type peut éditer à un fichier peut utiliser la disposition automatique

La disposition automatique peut être utilisée sur les cadres pour que les designs réagissent dynamiquement aux changements de contenu. Cela vous permet de gagner du temps et de rendre vos designs réactifs et adaptatifs.

Les éléments d’un cadre de disposition automatique sont automatiquement disposés dans un cadre en fonction de la direction, de l’espacement, du remplissage, de l’alignement et d’autres propriétés de la disposition automatique. Lorsque le contenu change ou que des éléments sont ajoutés, supprimés ou redimensionnés, la mise en page s'adapte sans nécessiter de repositionnement manuel.

Utilisez la disposition automatique pour créer des designs adaptatifs, tels que :

• Des boutons qui grossissent ou rétrécissent en fonction du texte
• Des listes qui s'adaptent au fur et à mesure que des éléments sont ajoutés, supprimés ou masqués
• Structures bento et tableaux de bord
• Une page web qui s'adapte à différentes tailles d'écran

Ajouter la disposition automatique

Pour commencer à utiliser la disposition automatique sur les designs, sélectionnez un ou plusieurs calques et appuyez sur ⇧ Shift A ou cliquez sur Ajouter une disposition automatique dans la barre latérale de droite. Figma essaiera de déterminer quel flux de disposition automatique (vertical, horizontal ou en grille) vous souhaitez utiliser. Vous pouvez changer de flux à tout moment.

En savoir plus sur l'activation et la désactivation de la disposition automatique sur les designs.

Choisir un flux de mise en page automatique

Une fois que la mise en page automatique est utilisée sur une frame, vous pouvez choisir parmi trois options pour déterminer le flux et l'agencement des objets dans la frame :

• Contraintes verticales
• Contraintes horizontales
• Grille

Horizontal et vertical

L’option Verticale place les objets dans votre cadre le long de l’axe Y. Tous les objets que vous ajoutez, supprimez ou réorganisez suivront l'axe Y. Par exemple : plusieurs éléments d'une liste de tâches ou des publications dans un fil d’actualité ou une chronologie.

L’option Horizontale place les objets dans votre cadre le long de l’axe X. Tous les objets que vous ajoutez, supprimez ou réorganisez suivront l'axe X. Par exemple : une ligne de boutons ou des icônes dans un menu de navigation mobile.

Lorsque vous avez sélectionné l'orientation horizontale, l'option Retour à la ligne est disponible. L'option Retour à la ligne place tous les objets en trop vers la ligne suivante de votre cadre.

Les options de disposition automatique horizontale et verticale possèdent également des propriétés supplémentaires telles que le redimensionnement, l'espacement, l'alignement, etc.

En savoir plus sur les flux de disposition automatique horizontaux et verticaux.

Grille version bêta ouverte

L’option Grille place les objets en colonnes et en rangées, permettant de créer des galeries, des structures de type bento et des mises en page de tableaux de bord qui s’adaptent et se redimensionnent aux différentes tailles de cadre.

À l'inverse du paramètre de retour à la ligne disponible pour les options Horizontale et Verticale, les objets d'une grille ne passent pas à la ligne suivante. Ils sont placés dans une « grille » et peuvent être répartis sur plusieurs lignes ou colonnes.

Les cadres de la disposition automatique de la grille auront également des propriétés supplémentaires telles que le redimensionnement des colonnes et des lignes, la portée, et plus encore.

Découvrez comment utiliser le parcours de disposition automatique de la grille.

Ajuster les propriétés d’espacement

Les types de propriétés disponibles sur votre cadre de la disposition automatique dépendent du flux de la disposition automatique utilisé. Cependant, tous les flux partagent quelques propriétés d’espacement essentielles :

Le remplissage est l’espace vide ou blanc entre le bord d’un cadre de la disposition automatique et ses objets. Vous pouvez définir le remplissage de manière uniforme, verticale et horizontale, ou définir des valeurs différentes pour le remplissage supérieur, droit, bas et gauche.

L'espace entre les éléments correspond à la distance ou à la répartition entre les objets dans un cadre de mise en page automatique. Utilisez une valeur numérique pour spécifier la distance exacte entre les objets. Ou, pour les cadres de la disposition automatique, vous avez également la possibilité de régler l'écart entre les objets sur Auto afin que les objets soient aussi éloignés que possible les uns des autres.

Ajuster la réactivité grâce au redimensionnement

L'une des fonctions les plus puissantes de la disposition automatique est sa capacité à permettre aux objets d'adapter leurs dimensions aux paramètres et objets environnants grâce à la propriété de redimensionnement. Vous pouvez définir le comportement de redimensionnement d'un cadre de la disposition automatique parent pour déterminer comment il se redimensionne en fonction des modifications apportées à son contenu, et inversement.

Les paramètres de redimensionnement peuvent être appliqués sur les axes X et Y à l'aide des menus déroulants largeur et hauteur dans le 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é.

Redimensionnement de propriété	Peut être appliqué à…	Comportement des dimensions
Ajuster au contenu	Cadres de la disposition automatique	L'objet se redimensionne en fonction de ses objets enfants
Remplir le contenant	Éléments enfants des cadres de disposition automatique	L’objet occupe tout l’espace disponible
Largeur/hauteur fixes	Les deux	L'objet reste immobile
Largeur/hauteur minimale	Les deux	L'objet est supérieur ou égal à la valeur minimale
Largeur/hauteur maximales	Les deux	L'objet est inférieur ou égal à la valeur maximale

Ajuster au contenu

Utilisez ajuster au contenu sur n’importe quel cadre de la disposition automatique, afin de conserver les dimensions minimale autour de ses objets tout en respectant les valeurs d’espacement.

Par exemple, supposons que vous ayez un calque de texte de 40 px de large à l'intérieur d'un cadre utilisant la disposition automatique. Le remplissage du cadre est défini à 10 px sur les côtés gauche et droit. Étant donné que son redimensionnement est défini sur ajuster au contenu, la largeur du frame est de 60 px. Si le calque de texte est mis à jour et mesure désormais 50 px de large, la largeur du cadre passera à 70 px.

L’option ajuster au contenu ne peut être appliqué qu’aux cadres de la disposition automatique.

Remplir le contenant

Les calques définis sur Remplir le contenant s'étirent pour occuper tout l'espace disponible dans leur cadre parent, tout en respectant les valeurs d'espacement.

Le remplissage du contenant ne peut être appliqué qu’aux objets enfants des cadres de la disposition automatique et n’est pas disponible pour les cadres de niveau supérieur.

Les objets enfants d'un cadre de disposition automatique seront également définis sur Remplir le contenant s'ils sont redimensionnés manuellement pour occuper tout l'espace disponible du cadre parent.

Largeur ou hauteur fixe

Définissez une largeur ou une hauteur fixe sur un calque pour garantir que ses dimensions restent constantes et inchangées, indépendamment des modifications des valeurs d'espacement environnantes et des objets enfants, parents ou frères et sœurs.

Le terme fixe peut être appliqué à n'importe quel cadre de disposition automatique et à ses éléments enfants.

Si vous redimensionnez manuellement un calque ou spécifiez une valeur pour son champ de largeur ou de hauteur, la propriété de redimensionnement sera fixée sur l'axe correspondant.

Par exemple, supposons que vous ayez un composant bouton qui utilise la disposition automatique et que sa largeur soit définie pour s'ajuster au contenu. Si vous saisissez une valeur telle que 125 dans le champ de largeur, la propriété de redimensionnement sera modifiée en Largeur fixe.

Dimensions minimales et maximales

Définissez une largeur et une hauteur minimales ou maximales pour toute frame de mise en page automatique et ses enfants.

• Ouvrez le menu déroulant Largeur pour trouver Ajouter largeur min et Ajouter largeur max
• Ouvrez le menu déroulant Hauteur pour trouver Ajouter une hauteur min et Ajouter une hauteur max

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.

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 Largeur ou Hauteur et choisissez Supprimer min et max.

Ignorer la mise en page automatique

Un objet pour lequel Ignorer la disposition automatique est activé est exclu d’un flux de disposition automatique tout en le conservant dans le cadre de la disposition 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 Ignorer la disposition 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 disposition automatique parent se redimensionne. Les autres paramètres de disposition 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, puis cliquez sur dans le panneau de droite
• Faites glisser un objet dans un cadre de disposition automatique tout en appuyant sur   ⌃ Control .

Imbriquer les frames de mise en page automatique

La véritable puissance de la réactivité de la mise en page automatique se révèle lorsque l'on combine les comportements de redimensionnement à travers les frames de mise en page automatique imbriquées.

L’imbrication désigne l’action de placer un calque à l’intérieur d’un autre calque, comme placer un bouton à l’intérieur d’un composant ou une forme à l’intérieur d’un cadre.

L’imbrication d’un cadre de disposition automatique dans un autre vous permet de combiner les options de mise en page automatique horizontale, verticale et de grille pour créer des interfaces complexes. Les cadres imbriqués auront à la fois des propriétés parent et enfant, chaque cadre avec son propre remplissage et ses valeurs d'écart distincts, nous permettant de créer des mises en page multidimensionnelles avec des éléments qui circulent dans différents directions et dispositions.

Apprenez à créer des flux de disposition automatique multidimensionnels.

Considérations relatives à d'autres fonctionnalités

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.

Exemple : imaginons que nous ayons une application de suivi des habitudes où chaque habitude dispose d'un écran d'analyse contenant un historique sous forme de calendrier des habitudes et un panneau en bas pour les notes du jour. Cet écran utilise la disposition automatique, mais le panneau de notes ignore le flux de la disposition automatique. Nous pouvons utiliser les contraintes Bas et Gauche et Droite pour nous assurer que le panneau de notes réagit correctement lorsque son cadre parent est redimensionné.

En savoir plus sur les contraintes.

Composants et instances

Comme les composants sont des frames, vous pouvez leur ajouter la mise en page automatique. Il vous faudra alors ajouter la mise en page automatique à chaque composant individuellement. Il n'existe actuellement aucun moyen d'ajouter la mise en page automatique en lot.

Action	Composant principal	Instance
Ajuster le padding vertical et horizontal	✓	✓
Ajuster l’écart	✓	✓
Réorganiser les calques	✓	✕
Ajouter des calques	✓	✕
Supprimer ou enlever des calques	✓	(Ne fait que masquer le calque)

Prototypes avec mise en page automatique

Il y a quelques points à prendre en compte lors de la création de prototypes avec la mise en page automatique.

Les transitions d'animation automatique ne prennent pas en compte le fond d'un cadre. Si vous souhaitez utiliser une transition Glisser dans ou Recouvrir avec une animation automatique, vous devez ajouter un fond. Vous pouvez créer un rectangle dans un cadre normal et y placer votre cadre de disposition automatique. En savoir plus sur les transitions Glisser dans et Recouvrir dans.

Pour appliquer le défilement à une frame, il vous faut du contenu à étendre au-delà des limites de la frame.

Comme les dimensions d'un élément parent de la mise en page automatique sont basées sur le contenu, elles seront redimensionnées pour s'adapter aux objets. Pour répliquer le défilement, il vous faudra placer la mise en page automatique dans une frame normale.

Calques de texte, hauteur maximale et nombre maximal de lignes

Les calques de texte ne peuvent pas avoir à la fois une hauteur maximale et un nombre  maximal de lignes. 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.

Redimensionnement du texte

Les calques de texte ont également leurs propres propriétés de redimensionnement. Dans un cadre de disposition automatique, cela peut offrir 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.

En savoir plus sur le redimensionnement du texte.

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

Ressources

Articles

• Article : activer/désactiver la disposition automatique d’un design
  Prêt à commencer à utiliser la disposition automatique ? Apprenez à utiliser la disposition automatique sur les cadres et les calques pour commencer à rendre vos designs adaptatifs.
• Article : utiliser les flux horizontaux ou verticaux dans la disposition automatique
  Découvrez les propriétés disponibles pour les parcours horizontaux et verticaux dans la disposition automatique.
• Article : utiliser la grille dans le flux de disposition automatique
  Apprenez à travailler avec les colonnes, les lignes et les cellules avec le flux de mise en page en grille.
• Article : créer des parcours de disposition automatique multidimensionnels
  Combinez plusieurs flux de disposition automatique pour construire des composants et des écrans entièrement réactifs.

Projets et apprentissage pratique

• Liste de lecture des tutoriels Figma : apprenez à créer des designs et des composants flexibles
  Cette liste de lecture comprend des tutoriels vidéo qui couvrent les bases de la disposition automatique, la manière d'appliquer la disposition automatique aux designs et des tutoriels pratiques pour parfaire vos connaissances.
• Fichier de la Communauté: initiation à la disposition automatique
  Utilisez une copie du fichier d'initiation à la disposition automatique pour vous exercer pendant votre apprentissage.
• Fichier de la Communauté : initiation à la grille
  Utilisez une copie du fichier d'initiation à la disposition automatique de grille pour vous exercer pendant votre apprentissage.
• Projet : créer une carte réactive avec mise en page automatique et contraintes
  Dans ce projet, apprenez à concevoir une carte réactive pour une application de podcast en utilisant la mise en page automatique, les contraintes, les composants et les outils de forme.