Avant de commencer

Qui peut utiliser cette fonctionnalité

Les utilisateurs de toutes les équipes ou forfaits.

Les utilisateurs disposant d'un accès pour éditer un fichier peuvent ajouter la disposition automatique aux cadres et aux objets.

À propos de 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éer des boutons qui grossissent ou rétrécissent en fonction du texte.
• Créer des listes qui s'adaptent au fur et à mesure que des éléments sont ajoutés, supprimés ou masqués.
• Combiner des cadres de la disposition automatique pour créer des interfaces complètes.

La disposition automatique est une puissante fonctionnalité offrant de nombreuses possibilité et utilisations. Dans cet article, nous allons vous montrer comment ajouter la disposition automatique à un cadre et comment chacune de ses propriétés fonctionne.

Ajouter la disposition automatique

Vous pouvez ajouter la disposition automatique à un cadre ou à une sélection d'objets. Cela comprend :

• Les cadres nouveaux ou vides
• Les cadres avec contenu déjà existant
• Les composants et ensembles de composants
• Les groupes et autres sélections de calques et/ou d'objets

Vous pouvez ajouter la disposition automatique à un bloc, composant ou ensemble de composants sélectionné à partir de quelques emplacements :

• Utilisez le raccourci clavier Shift A.
• Dans la barre latérale de droite, cliquez sur le bouton ) côté de Disposition automatique lorsqu'un cadre est sélectionné.
• Faites un clic droit sur le cadre ou l'objet et sélectionnez Ajouter la disposition automatique.

Propriétés de disposition automatique

Les cadres avec disposition automatique ont des propriétés différentes des cadres ordinaires. Lorsque vous appliquez la disposition automatique, vous verrez des modifications dans la barre latérale de droite.

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

• Ajouter des Grilles de mise en page à ce cadre
• Appliquer des Contraintes à tous les objets d'un cadre utilisant la disposition automatique
• Utiliser Sélection intelligente sur tous les objets du cadre

Direction

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

• Choisissez vertical pour ajouter, supprimer et réorganiser les objets le long de l'axe Y. Par exemple : des objets dans une liste ou des posts dans un flux ou une chronologie.
• Choisissez horizontal pour ajouter, supprimer et réorganiser les objets le long de l'axe X. Par exemple : une rangée de boutons ou d'icônes dans un menu de navigation pour mobiles.

Figma ne prend actuellement en charge qu'une seule direction à la fois, horizontale ou verticale. Pour créer des conceptions utilisant les deux directions, il vous faudra combiner ou imbriquer différents cadres utilisant la disposition automatique.

Dans l'exemple ci-dessous, nous avons imbriqué un cadre avec la disposition automatique horizontale dans un cadre utilisant la disposition automatique verticale pour créer une carte avec un titre, une description et des heures d'affichage.

Espacement entre les éléments

Vous pouvez contrôler l'espacement entre les éléments dans un cadre de la disposition automatique.

Contrairement à la sélection automatique, il n'est pas possible d'ajuster l'espacement sur le canevas. Utilisez plutôt les champs d'espacement de la section Disposition automatique de la barre latérale de droite :

• Espacement horizontal
• Espacement vertical

Entrez un nombre 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.

Remplissage

Le remplissage contrôle l'espacement vide ou blanc entre les éléments contenus et les limites d'un cadre de la disposition automatique. Vous pouvez définir le remplissage uniformément ou avoir des valeurs différentes pour le remplissage en haut, à droite, en bas et à gauche.

• Entrez une valeur unique dans le champ pour définir un remplissage égal de tous les côtés, ou utilisez l'abréviation CSS pour définir des valeurs individuelles. Par exemple, la saisie de 1,2,3,4 définit les valeurs en haut : 1, à droite : 2, en bas : 3, et à gauche : 4 respectivement. Ou la saisie 1,2 définit les valeurs en haut/en bas : 1 et à gauche/droite : 2.
• Pour définir manuellement un remplissage unique pour chaque côté, cliquez sur pour ouvrir les paramètres d'alignement et de distribution et ajuster chaque valeur individuellement.

Alignement

Choisissez comment aligner les éléments contenus dans un cadre de la disposition automatique. La direction et la distribution du cadre détermineront 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 grille interactive pour sélectionner l'une des neuf options de mise en forme pour les objets appartenant à un cadre.

Si votre distribution est définie sur Espacement, vous disposez de trois options pour chaque direction :

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

Si votre distribution est définie sur Compact, 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

Distribution

Une fois les règles d'alignement définies pour les objets contenus 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 sélectionner :

• Compact : les objets d'un cadre seront regroupés. Utilisez cette option pour garder les objets dans un cadre aussi près que possible et alignés ensemble.
• Espacement : l'espace entre les objets d'un cadre est réparti de manière égale en fonction de la direction et de l'alignement définis pour ce cadre. Utilisez cette option pour étirer des objets dans un cadre.

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 la disposition automatique pour qu'ils s'adaptent aux modifications apportées à leurs contenus. Les paramètres de redimensionnement peuvent être appliqués individuellement à chaque objet contenu sur les axes X et Y à l'aide des menus déroulants et du panneau de redimensionnement.

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.

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.

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.

Contraintes et redimensionnement

Vous ne pouvez pas appliquer de contraintes aux objets contenus dans un cadre de la disposition automatique. Cependant, vous pouvez utiliser la propriété de redimensionnement pour définir la façon dont ces derniers réagissent lorsque leur cadre, ou eux-mêmes, sont redimensionnés.

Vous pouvez toujours appliquer des contraintes à un cadre de la disposition automatique s'il est imbriqué dans un cadre normal. Vous verrez une section Contraintes et redimensionnement, qui vous permettra de définir à la fois les contraintes pour le cadre de la disposition automatique et le comportement de redimensionnement pour tous les objets qu'il contient.

Par exemple : si vous avez créé une barre de navigation à l'aide de la disposition automatique, vous pouvez lui permettre de s'adapter à différentes tailles d'écran. Vous pouvez utiliser des contraintes pour vous assurer que la barre de navigation répond correctement lorsque son cadre parent est redimensionné, et le redimensionnement pour contrôler la manière dont les objets de la barre de navigation réagissent à ces modifications.

En savoir plus sur les contraintes →

Ajouter, modifier et supprimer des objets

Ajouter des objets à un cadre de la disposition automatique

Vous pouvez ajouter n'importe quel calque ou objet à un cadre de la disposition automatique.

1. Cliquez sur un objet et faites-le glisser sur un cadre de la disposition automatique.
2. Utilisez l'indicateur bleu pour choisir l'emplacement de l'objet.

Imbriquer les cadres de la disposition automatique

Vous pouvez imbriquer un cadre de la disposition automatique dans un autre. Cela vous permet de combiner des dispositions horizontales et verticales pour créer des interfaces complexes.

Lorsque vous insérez un cadre de la disposition automatique dans un autre, le cadre imbriqué aura des propriétés parent et enfant.

Dans notre exemple ci-dessous, il existe quatre niveaux de disposition automatique :

1. Les boutons : chaque bouton utilise la disposition automatique horizontale. Cela permet aux boutons de grossir et de rétrécir lorsque nous modifions leur texte.
2. La ligne de boutons : nous ajoutons ensuite les deux boutons à une autre disposition automatique horizontale. Cela permet aux objets de répondre en adéquation aux modifications que nous apportons au contenu d'un élément frère ou sœur.
3. Le post : nous ajoutons ensuite nos boutons à une disposition automatique verticale avec les autres éléments du post. Cela inclut une description, une image ainsi que le profil de l'utilisateur.
4. La chronologie : nous en avons ajouté trois à une disposition automatique verticale pour créer notre chronologie. Le cadre de la disposition automatique est le cadre de premier niveau qui se trouve sur le canevas.

Vous pouvez imbriquer les cadres de disposition automatique de plusieurs manières :

• Faites glisser un cadre de la disposition automatique dans un autre cadre de la disposition automatique
• Créez un nouveau cadre utilisant la disposition automatique autour d'une sélection de cadres de la disposition automatique (et d'autres objets).

1. Sélectionnez le cadre de la disposition automatique et les autres calques à inclure.
2. Utilisez le raccourci clavier Maj + A pour ajouter la disposition automatique.
3. Figma créera un cadre autour de votre sélection et ajoutera la disposition automatique.

Dupliquer des objets

Vous pouvez dupliquer des objets existants pour les ajouter à la disposition automatique. Figma ajoutera la copie à droite (horizontale) ou en dessous (verticale) de l'objet d'origine.

1. Sélectionnez un élément enfant dans un cadre de la disposition automatique.
2. Dupliquez-le à l'aide du raccourci clavier :
   • Mac : Commande ⌘ – D
   • Windows : Ctrl + D

Organiser ou réorganiser des objets

Vous pouvez modifier l'ordre d'affichage des objets dans un cadre de la disposition automatique. Cela ne fonctionnera qu'avec les composants principaux ou les cadres de la disposition automatique en dehors d'un composant.

1. Sélectionnez l'élément enfant. Si le calque appartient à un cadre, il vous faudra utiliser la touche de modification pour effectuer une sélection approfondie :
   • Mac : Commande ⌘
   • Windows : Ctrl
2. Il existe plusieurs façons de réorganiser les objets :
   • Utilisez les touches fléchées de votre clavier pour déplacer l'objet.
   • Cliquez et faites glisser l'objet vers une nouvelle position.

Supprimer des objets

Pour supprimer un objet d'un composant principal ou d'un cadre de la disposition automatique :

• Faites glisser l'objet en dehors du cadre de la disposition automatique.
• Cliquez sur l'icône pour activer/désactiver la visibilité du calque.
• Sélectionnez l'objet et appuyez sur la touche Supprimer ou Retour arrière

Vous ne pouvez pas supprimer un calque ou un objet d'une instance. Si vous essayez, Figma ne fera que basculer la visibilité de ce dernier au lieu de le supprimer.

Supprimer la disposition automatique

Lorsque vous supprimez la disposition automatique, vous avez accès aux propriétés normales d'un cadre.

Il existe plusieurs façons de supprimer la disposition automatique :

• Faites un clic droit sur le cadre et sélectionnez Supprimer la disposition automatique
• Dans la barre latérale de droite, cliquez sur le bouton se trouvant à côté de Disposition automatique

Prototypes avec disposition automatique

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

Les transitions d'Animation automatique ne prennent pas en compte l'arrière-plan d'un cadre. Si vous souhaitez utiliser une transition Glisser dans ou Recouvrir avec l'animation automatique, il vous faudra ajouter un arrière-plan. Vous pouvez créer un rectangle dans un cadre normal et y placer votre cadre de la disposition automatique.

En savoir plus sur Glisser dans et Recouvrir dans transitions →

Pour appliquer le défilement à un cadre, il vous faut du contenu à étendre au-delà des limites du cadre.

Comme les dimensions d'un élément parent de la disposition 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 disposition automatique dans un cadre normal.

Utiliser la disposition automatique avec les composants

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

Principaux composants

✅ Ajuster le le remplissage
vertical et horizontal✅ Ajuster l' espacement entre les objets
✅ Réorganiser des objets au sein d'un composant
✅ Ajouter de nouveaux objets

Instances de composant

✅ Ajuster le le remplissage
vertical et horizontal✅ Ajuster l' espacement entre les objets
Réorganiser des objets au sein d'un composant
Ajouter de nouveaux objets

Mises à jour de la disposition automatique

Mettre à jour l'alignement pour les cadres de la disposition automatique plus anciens

Dans les versions précédentes de la disposition automatique, l'alignement était contrôlé au niveau des éléments enfants. Cela signifie que vous pouvez avoir différents alignements pour différents objets enfants dans un cadre de la disposition automatique.

Nous avons constaté que le comportement était peu fréquent chez les utilisateurs. En novembre 2020, nous avons donc déplacé les contrôles d'alignement vers le cadre parent pour simplifier le fonctionnement de la disposition automatique. Avec la dernière mise à jour, tous les objets enfants doivent être alignés de la même manière.

Si vous avez déjà des cadres de la disposition automatique avec des éléments enfants de différents alignements créés avant novembre 2020, il se peut que vous voyez ce qui suit :

Pour ajuster les valeurs de disposition automatique, il vous faudra d'abord mettre à jour le cadre afin de supprimer l'alignement de chaque élément enfant. Après la mise à jour de votre cadre :

• Figma essaiera de maintenir visuellement votre design original. Dans de nombreux cas, Figma ajoutera des cadres intermédiaires pour permettre des alignements différents. Ces cadres seront nommés Cadres auto-ajoutés.
• Vous pouvez annuler immédiatement cette modification. Cependant, si vous cliquez en dehors de la fenêtre ou si vous actualisez la page, vous ne pourrez pas annuler la mise à jour ultérieurement.
• Si vous avez mis à jour un composant principal, vérifiez que ses instances ont été correctement mises à jour.

Pour créer un design comportant des éléments enfants avec un alignement différent :

1. Sélectionnez l'élément pour lequel vous souhaitez un alignement différent.
2. Ajoutez la disposition automatique à l'élément à l'aide du raccourci clavier Maj A.
3. Définissez le cadre nouvellement créé sur Remplir le contenant dans l'axe dans lequel vous souhaitez que l'alignement soit effectué.
4. Définissez l'alignement selon vos besoins.