Ajouter une mise en page automatique à un design
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 à un fichier peuvent ajouter la mise en page automatique aux frames et aux objets.
Utilisez la mise en page automatique pour créer des designs réactifs qui s'adaptent à différentes tailles d'écrans en réorganisant le contenu. Par exemple :
- 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 frames de la mise en page automatique pour créer des interfaces complètes.
Remarque : cet article explique comment ajouter une disposition automatique aux designs et comment réorganiser les objets enfants dans un flux de disposition automatique. Pour en savoir plus sur le redimensionnement, l'espacement, l'alignement et d'autres propriétés de disposition automatique, consultez la rubrique Explorer les propriétés de disposition automatique →
Les frames de la mise en page automatique ont des propriétés différentes des frames classiques. Lorsque vous appliquez la mise en page automatique, vous pouvez observer quelques changements dans le panneau de droite. Vous ne pourrez pas effectuer les opérations suivantes sur les frames de mise en page automatique :
- Ajouter des grilles de mise en page à cette frame
- 🚫 Appliquer des contraintes à tous les objets situés dans une frame de mise en page automatique, sauf si la position absolue est activée pour ces objets
- 🚫 Utiliser la sélection intelligente sur tous les objets situés dans la frame
Ajouter la mise en page automatique
Vous pouvez ajouter la mise en page automatique à une frame ou à une sélection d'objets. Cela inclut :
- Les frames nouvelles ou vides
- Les frames avec contenu déjà existant
- Les composants et ensembles de composants
- Les groupes et autres sélections de calques et/ou d'objets
Il existe plusieurs manières d'ajouter une mise en page automatique à une sélection :
- Utilisez le raccourci clavier ⇧ Maj A.
- Dans le panneau de droite, cliquez sur à côté de Auto layout.
- Effectuez un clic droit sur une frame ou un objet et sélectionnez Add auto layout.
Lorsque vous utilisez la disposition automatique, les objets imbriqués sont réglés sur auto space between, fill container et center aligned. Découvrez les différentes propriétés de la disposition automatique →
Remarque : la mise en page automatique n'est prise en charge que sur les frames. Si vous sélectionnez des objets qui ne sont pas dans une frame, Figma crée une frame de mise en page automatique autour d'eux.
Proposer une mise en page automatique
La mise en page automatique vous permet de rendre un design réactif en un clic.
Lorsque vous utilisez Suggest auto layout, Figma tente de déterminer quels objets d'une frame ou d'un composant doivent être placés dans une frame de mise en page automatique, puis ajoute autant de frames de mise en page automatique que nécessaire pour rendre tout le design réactif. Figma crée ces frames de mise en page automatique en même temps, tout en essayant de préserver la configuration de vos designs.
En plus de vous faire gagner du temps, ce processus vous évite la lourde tâche d'ajouter une mise en page automatique frame par frame.
Remarque : l'option Suggest auto layout convient aux designs moyennement complexes, tels que des cartes, des barres de navigation ou des écrans mobiles. Si vous travaillez sur un design volumineux ou complexe, comme un site Web, nous vous conseillons d'utiliser l'option de mise en page automatique par petits groupes.
Il existe plusieurs façons d'accéder à cette option :
- Utiliser le raccourci clavier :
- macOS : ⌃ Contrôle ⇧ Maj A
- Windows : ⌃ Contrôle Alt ⇧ Maj A
- Effectuez un clic droit sur la frame ou l'objet et accédez à More layout options > Suggest auto layout.
- Sélectionnez Suggest auto layout dans le menu Actions.
Après avoir utilisé cette action, toutes les frames de mise en page automatique imbriquées qui ont été créées sont indiquées par un point bleu dans la section des calques du panneau de gauche.
Remarque : il peut arriver que vous trouviez un objet dans une frame de mise en page automatique différente de celle prévue, ou orienté à l'horizontale alors que vous le vouliez vertical. L'option Suggest auto layout fait peut-être parfois des erreurs, mais elle est conçue pour vous aider à travailler plus efficacement.
Pour les éléments un peu plus complexes, nous vous conseillons de créer une frame, de regrouper ou d'utiliser la mise en page automatique sur les éléments imbriqués avant d'utiliser Suggest auto layout sur la frame parente.
Ajouter, modifier et supprimer des objets
Ajouter des objets à une frame de mise en page automatique
Vous pouvez ajouter n'importe quel calque ou objet à une frame de mise en page automatique.
- Cliquez sur un objet et faites-le glisser sur une frame de mise en page automatique.
- Utilisez l'indicateur bleu pour choisir l'emplacement de l'objet.
Remarque : la taille de l'objet détermine s'il peut être ajouté à la frame de mise en page automatique. Si l'une des dimensions de l'objet est plus grande que la frame parent, vous ne verrez pas l'option permettant de l'ajouter à la mise en page automatique.
Utilisez la touche de combinaison pour contourner le comportement par défaut de Figma et ajouter des objets plus grands à une mise en page automatique ou pour ajouter des objets à une mise en page automatique imbriquée :
- macOS : ⌘ Commande
- Windows : Ctrl
En savoir plus sur les éléments parents, enfants et de même niveau →
Imbriquer les frames de mise en page automatique
Vous pouvez imbriquer une frame de mise en page automatique dans un autre. Cela vous permet de combiner des mises en page horizontales et verticales pour créer des interfaces complexes.
Lorsque vous insérez une frame de mise en page automatique dans un autre, la frame imbriquée aura des propriétés parent et enfant.
Dans notre exemple ci-dessous, il existe quatre niveaux de mise en page automatique :
- Les boutons : chaque bouton utilise la mise en page automatique horizontale. Cela permet aux boutons de grossir et de rétrécir lorsque nous modifions leur texte.
- La ligne de boutons : nous ajoutons ensuite les deux boutons à une autre mise en page 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.
- Le post : nous ajoutons ensuite nos boutons à une mise en page automatique verticale avec les autres éléments du post. Cela inclut une description, une image ainsi que le profil de l'utilisateur.
- La chronologie : nous en avons ajouté trois à une mise en page automatique verticale pour créer notre chronologie. La frame de mise en page automatique est la frame de premier niveau qui se trouve sur le plan de travail.
Vous pouvez imbriquer les frames de mise en page automatique de plusieurs manières :
- Faites glisser une frame de mise en page automatique dans une frame de mise en page automatique existante.
- Créez une nouvelle frame de mise en page automatique autour d'une sélection de frames de mise en page automatique (et d'autres objets).
- Sélectionnez la frame de mise en page automatique et les autres calques à inclure.
- Utilisez le raccourci clavier ⇧ Maj A pour ajouter une mise en page automatique.
- Figma crée une frame autour de votre sélection et ajoutera la mise en page automatique.
Astuce : vous pouvez contourner le comportement de frame parent par défaut de Figma. Maintenez la touche de modification enfoncée pour conserver un objet dans sa frame actuelle ou empêcher Figma de l'insérer ailleurs.
- macOS : ⌘ Commande
- Windows : Ctrl
En savoir plus sur les éléments parents, enfants et de même niveau →
Dupliquer des objets
Vous pouvez dupliquer des objets existants pour les ajouter à la mise en page automatique. Figma ajoutera la copie à droite (horizontale) ou en dessous (verticale) de l'objet d'origine.
- Sélectionnez un élément enfant dans une frame de mise en page automatique.
- Dupliquez-le à l'aide du raccourci clavier :
- macOS : ⌘ Commande D
- Windows : Contrôle D
Organiser ou réorganiser des objets
Remarque : il est impossible de réorganiser les objets d'une instance. Vous devrez modifier l'ordre des objets dans le composant principal ou détacher l'instance pour réorganiser les objets. Des informations sur la mise en page automatique des composants sont disponibles plus bas ↓
Vous pouvez modifier l'ordre d'affichage des objets dans une frame de mise en page automatique. Cela ne fonctionnera qu'avec les composants principaux ou les cadres de la mise en page automatique en dehors d'un composant.
- Sélectionnez l'élément enfant. Si le calque appartient à une frame, il vous faudra utiliser la touche de modification pour effectuer une sélection approfondie :
- macOS : ⌘ Commande
- Windows : Ctrl
- 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'une frame de mise en page automatique :
- Faites glisser l'objet en dehors de la frame de mise en page automatique.
- Cliquez sur à côté de Appearance dans le panneau de droite, ou à côté du calque dans le panneau de gauche pour modifier 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.
Astuce : modifier la visibilité d'un calque ou d'un objet affectera aussi sa visibilité dans une frame de mise en page automatique. Si vous souhaitez créer un espace à l'endroit où l'objet devrait se trouver, vous pouvez ajuster l'opacité de l'objet. Dans le panneau de droite, réglez les paramètres Layer sur 0%.
Supprimer la mise en page automatique
Lorsque vous supprimez la mise en page automatique, vous avez accès aux propriétés normales d'une frame.
Il existe plusieurs façons de supprimer la mise en page automatique :
- Faites un clic droit sur la frame et sélectionnez Supprimer la mise en page automatique
- Dans le panneau de droite, cliquez sur le bouton à côté de l'option Auto layout
- Utilisez les raccourcis clavier :
- macOS : ⌥ Option⇧ MajA
- Windows : Alt⇧ MajA
Conseil : vous pouvez supprimer la disposition automatique de la frame de niveau supérieur sélectionnée et de tous ses objets imbriqués en utilisant l'option Remove all auto layout dans Actions.
Autres considérations
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'une frame. Si vous souhaitez utiliser une transition Slide in ou Move in avec une animation automatique, vous devez ajouter un fond. Vous pouvez créer un rectangle dans une frame normale et y placer votre cadre de la disposition automatique. Transitions Slide in et Move in →
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.
Remarque : le mode présentation prend en compte le défilement des frames longues par défaut. Il vous suffira d'utiliser cette méthode si vous souhaitez cacher le contenu extérieur.
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'espacement entre les objets | ✓ | ✓ |
| Réorganiser les calques | ✓ | ✕ |
| Ajouter des calques | ✓ | ✕ |
| Supprimer ou enlever des calques | ✓ | (Ne fait que masquer le calque) |
Souhaitez-vous ajouter des icônes aux instances ? Nous vous recommandons d'ajouter une icône générique, avec une opacité de 0 %, au composant principal. Vous pourrez ensuite remplacer l'icône par un autre composant de votre bibliothèque.
Avant de commencer
Qui peut utiliser cette fonctionnalité
Disponible sur tous les forfaits
Les utilisateurs disposant d'un accès can edit à un fichier peuvent ajouter la mise en page automatique aux frames et aux objets.
Utilisez la mise en page automatique pour créer des designs réactifs qui s'adaptent à différentes tailles d'écrans en réorganisant le contenu. Par exemple :
- 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 frames de la mise en page automatique pour créer des interfaces complètes.
Remarque : cet article explique comment ajouter une disposition automatique aux designs et comment réorganiser les objets enfants dans un flux de disposition automatique. Pour en savoir plus sur le redimensionnement, l'espacement, l'alignement et d'autres propriétés de disposition automatique, consultez la rubrique Explorer les propriétés de disposition automatique →
Les frames de la mise en page automatique ont des propriétés différentes des frames classiques. Lorsque vous appliquez la mise en page automatique, vous pouvez observer quelques changements dans le panneau de droite. Vous ne pourrez pas effectuer les opérations suivantes sur les frames de mise en page automatique :
- Ajouter des grilles de mise en page à cette frame
- 🚫 Appliquer des contraintes à tous les objets situés dans une frame de mise en page automatique, sauf si la position absolue est activée pour ces objets
- 🚫 Utiliser la sélection intelligente sur tous les objets situés dans la frame
Ajouter la mise en page automatique
Vous pouvez ajouter la mise en page automatique à une frame ou à une sélection d'objets. Cela inclut :
- Les frames nouvelles ou vides
- Les frames avec contenu déjà existant
- Les composants et ensembles de composants
- Les groupes et autres sélections de calques et/ou d'objets
Il existe plusieurs façons d'ajouter une mise en page automatique à une frame ou à un composant sélectionné :
- Utilisez le raccourci clavier ⇧ Maj A.
- Dans la barre latérale de droite, cliquez sur côté de Auto layout lorsqu'une frame est sélectionnée
- Effectuez un clic droit sur une frame ou un objet et sélectionnez Add auto layout.
Lorsque vous utilisez la disposition automatique, les objets imbriqués sont réglés sur auto space between, fill container et center aligned. Découvrez les différentes propriétés de la disposition automatique →
Remarque : la mise en page automatique n'est prise en charge que sur les frames. Si vous sélectionnez des objets qui ne sont pas dans une frame, Figma crée une frame de mise en page automatique autour d'eux.
Proposer une mise en page automatique
La mise en page automatique vous permet de rendre un design réactif en un clic.
Lorsque vous utilisez Suggest auto layout, Figma tente de déterminer quels objets d'une frame ou d'un composant doivent être placés dans une frame de mise en page automatique, puis ajoute autant de frames de mise en page automatique que nécessaire pour rendre tout le design réactif. Figma crée ces frames de mise en page automatique en même temps, tout en essayant de préserver la configuration de vos designs.
En plus de vous faire gagner du temps, ce processus vous évite la lourde tâche d'ajouter une mise en page automatique frame par frame.
Remarque : l'option Suggest auto layout convient aux designs moyennement complexes, tels que des cartes, des barres de navigation ou des écrans mobiles. Si vous travaillez sur un design volumineux ou complexe, comme un site Web, nous vous conseillons d'utiliser l'option de mise en page automatique par petits groupes.
Il existe plusieurs façons d'accéder à cette option :
- Utiliser le raccourci clavier :
- macOS : ⌃ Contrôle ⇧ Maj A
- Windows : ⌃ Contrôle Alt ⇧ Maj A
- Effectuez un clic droit sur la frame ou l'objet et accédez à More layout options > Suggest auto layout.
- Sélectionnez Suggest auto layout dans le menu Actions.
Après avoir utilisé cette action, toutes les frames de mise en page automatique imbriquées qui ont été créées sont indiquées par un point bleu dans la section des calques du panneau de gauche.
Remarque : il peut arriver que vous trouviez un objet dans une frame de mise en page automatique différente de celle prévue, ou orienté à l'horizontale alors que vous le vouliez vertical. L'option Suggest auto layout fait peut-être parfois des erreurs, mais elle est conçue pour vous aider à travailler plus efficacement.
Pour les éléments un peu plus complexes, nous vous conseillons de créer une frame, de regrouper ou d'utiliser la mise en page automatique sur les éléments imbriqués avant d'utiliser Suggest auto layout sur la frame parente.
Ajouter, modifier et supprimer des objets
Ajouter des objets à une frame de mise en page automatique
Vous pouvez ajouter n'importe quel calque ou objet à une frame de mise en page automatique.
- Cliquez sur un objet et faites-le glisser sur une frame de mise en page automatique.
- Utilisez l'indicateur bleu pour choisir l'emplacement de l'objet.
Remarque : la taille de l'objet détermine s'il peut être ajouté à la frame de mise en page automatique. Si l'une des dimensions de l'objet est plus grande que la frame parent, vous ne verrez pas l'option permettant de l'ajouter à la mise en page automatique.
Utilisez la touche de combinaison pour contourner le comportement par défaut de Figma et ajouter des objets plus grands à une mise en page automatique ou pour ajouter des objets à une mise en page automatique imbriquée :
- macOS : ⌘ Commande
- Windows : Ctrl
En savoir plus sur les éléments parents, enfants et de même niveau →
Imbriquer les frames de mise en page automatique
Vous pouvez imbriquer une frame de mise en page automatique dans un autre. Cela vous permet de combiner des mises en page horizontales et verticales pour créer des interfaces complexes.
Lorsque vous insérez une frame de mise en page automatique dans un autre, la frame imbriquée aura des propriétés parent et enfant.
Dans notre exemple ci-dessous, il existe quatre niveaux de mise en page automatique :
- Les boutons : chaque bouton utilise la mise en page automatique horizontale. Cela permet aux boutons de grossir et de rétrécir lorsque nous modifions leur texte.
- La ligne de boutons : nous ajoutons ensuite les deux boutons à une autre mise en page 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.
- Le post : nous ajoutons ensuite nos boutons à une mise en page automatique verticale avec les autres éléments du post. Cela inclut une description, une image ainsi que le profil de l'utilisateur.
- La chronologie : nous en avons ajouté trois à une mise en page automatique verticale pour créer notre chronologie. La frame de mise en page automatique est la frame de premier niveau qui se trouve sur le plan de travail.
Vous pouvez imbriquer les frames de mise en page automatique de plusieurs manières :
- Faites glisser une frame de mise en page automatique dans une frame de mise en page automatique existante.
- Créez une nouvelle frame de mise en page automatique autour d'une sélection de frames de mise en page automatique (et d'autres objets).
- Sélectionnez la frame de mise en page automatique et les autres calques à inclure.
- Utilisez le raccourci clavier ⇧ Maj A pour ajouter une mise en page automatique.
- Figma crée une frame autour de votre sélection et ajoutera la mise en page automatique.
Astuce : vous pouvez contourner le comportement de frame parent par défaut de Figma. Maintenez la touche de modification enfoncée pour conserver un objet dans sa frame actuelle ou empêcher Figma de l'insérer ailleurs.
- macOS : ⌘ Commande
- Windows : Ctrl
En savoir plus sur les éléments parents, enfants et de même niveau →
Dupliquer des objets
Vous pouvez dupliquer des objets existants pour les ajouter à la mise en page automatique. Figma ajoutera la copie à droite (horizontale) ou en dessous (verticale) de l'objet d'origine.
- Sélectionnez un élément enfant dans une frame de mise en page automatique.
- Dupliquez-le à l'aide du raccourci clavier :
- macOS : ⌘ Commande D
- Windows : Contrôle D
Organiser ou réorganiser des objets
Remarque : il est impossible de réorganiser les objets d'une instance. Vous devrez modifier l'ordre des objets dans le composant principal ou détacher l'instance pour réorganiser les objets. Des informations sur la mise en page automatique des composants sont disponibles plus bas ↓
Vous pouvez modifier l'ordre d'affichage des objets dans une frame de mise en page automatique. Cela ne fonctionnera qu'avec les composants principaux ou les cadres de la mise en page automatique en dehors d'un composant.
- Sélectionnez l'élément enfant. Si le calque appartient à une frame, il vous faudra utiliser la touche de modification pour effectuer une sélection approfondie :
- macOS : ⌘ Commande
- Windows : Ctrl
- 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'une frame de mise en page automatique :
- Faites glisser l'objet en dehors de la frame de mise en page automatique.
- Cliquez sur 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.
Astuce : désactiver la visibilité d'une frame ou d'un objet le masquera au sein de la frame de mise en page automatique. Si vous souhaitez créer un espace à l'endroit où l'objet doit se trouver, vous pouvez à la place ajuster l'opacité de l'objet. Dans la barre latérale droite, réglez les paramètres Layer sur 0%.
Supprimer la mise en page automatique
Lorsque vous supprimez la mise en page automatique, vous avez accès aux propriétés normales d'une frame.
Il existe plusieurs façons de supprimer la mise en page automatique :
- Faites un clic droit sur la frame et sélectionnez Supprimer la mise en page automatique
- Dans la barre latérale de droite, cliquez sur le bouton se trouvant à côté de Disposition automatique
- Utilisez les raccourcis clavier :
- macOS : ⌥ Option⇧ MajA
- Windows : Alt⇧ MajA
Conseil : vous pouvez supprimer la disposition automatique de la frame de niveau supérieur sélectionnée et de tous ses objets imbriqués en utilisant l'option Remove all auto layout dans Actions.
Autres considérations
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'une frame. Si vous souhaitez utiliser une transition Slide in ou Move in avec une animation automatique, vous devez ajouter un fond. Vous pouvez créer un rectangle dans une frame normale et y placer votre cadre de la disposition automatique. Transitions Slide in et Move in →
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.
Remarque : le mode présentation prend en compte le défilement des frames longues par défaut. Il vous suffira d'utiliser cette méthode si vous souhaitez cacher le contenu extérieur.
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'espacement entre les objets | ✓ | ✓ |
| Réorganiser les calques | ✓ | ✕ |
| Ajouter des calques | ✓ | ✕ |
| Supprimer ou enlever des calques | ✓ | (Ne fait que masquer le calque) |
Souhaitez-vous ajouter des icônes aux instances ? Nous vous recommandons d'ajouter une icône générique, avec une opacité de 0 %, au composant principal. Vous pourrez ensuite remplacer l'icône par un autre composant de votre bibliothèque.