Guide complet sur la mise en page automatique dans Figma
Guide pratique de la mise en page automatique de Figma : créer une fiche produit, un formulaire de soumission et une page complète à l'aide de cette fonctionnalité
27 novembre 2025
19 min
Contenu :
- Qu'est-ce que la mise en page automatique dans Figma ?
- Comment ajouter et configurer la mise en page automatique dans Figma
- Propriétés clés de la disposition automatique
- Exemples d'utilisation
- Comment ignorer les propriétés de mise en page automatique
- FAQ : Principales nuances d'utilisation de la mise en page automatique
Qu'est-ce que la mise en page automatique dans Figma ?
La mise en page automatique est l'outil de Figma qui permet d'agencer et d'espacer automatiquement les éléments d'un groupe en fonction des règles que vous définissez. Si vous modifiez un élément, tel que la longueur du texte ou la taille de l'image, tout le reste s'ajuste automatiquement, vous évitant ainsi d'avoir à effectuer des réglages manuels.
Au lieu de spécifier des valeurs exactes pour divers paramètres, vous définissez des règles:
- Flux ( anciennement appelé Direction) : horizontal, vertical ou renvoi à la ligne.
- Gap: Espacement entre les éléments et remplissage à l'intérieur du cadre parent.
- Alignement et répartition des éléments enfants.
- Comportement de redimensionnement (Hug, Fixed, Fill) : pour agrandir ou réduire les composants en fonction du contenu.
Comment ajouter et configurer la mise en page automatique dans Figma
Raccourcis de mise en page automatique :
- Maj + A — appliquer la mise en page automatique.
- Maj + Alt/Option + A — supprimer la disposition automatique.
- Ctrl/Cmd + Maj + G — dissocier les éléments.
- Ctrl/Cmd + D — dupliquer (cloner) un cadre Auto Layout.
Vous pouvez appliquer la mise en page automatique à un seul cadre (qui peut contenir plusieurs éléments tels que du texte, des formes et des images) ou à une sélection d'éléments ; Figma les intégrera automatiquement dans un nouveau cadre de mise en page automatique. Exemples d'éléments auxquels la mise en page automatique peut être appliquée :
Voyons comment fonctionne la disposition automatique avec les cadres. Créez deux cadres, sélectionnez-les, puis cliquez sur le bouton « Utiliser la disposition automatique » ou appuyez sur Maj + A.
- Cadre (simple)
- Cadre + Cadre
- Élément + Élément (Figma les placera dans un nouveau cadre)
Voyons comment fonctionne la disposition automatique avec les cadres. Créez deux cadres, sélectionnez-les, puis cliquez sur le bouton « Utiliser la disposition automatique » ou appuyez sur Maj + A.
Vous trouverez le paramètre Auto Layout dans la barre latérale droite de l'inspecteur lorsqu'un cadre ou une sélection est actif.
Pour vérifier si la disposition automatique a été appliquée, ouvrez le panneau Calques. Une icône de disposition automatique apparaîtra à côté du nom du cadre, et les cadres sélectionnés seront regroupés dans un seul cadre de disposition automatique.
Le panneau Calques se trouve à gauche. Vous pouvez également l'ouvrir à l'aide du raccourci Opt/Ctrl + 1.
Si vous disposez déjà d'un cadre contenant des éléments, vous pouvez tout de même appliquer la disposition automatique. Vous n'aurez alors plus besoin d'ajuster manuellement la taille du cadre : il vous suffira de définir les marges et l'espacement, et le cadre s'adaptera automatiquement à son contenu.
Auto Layout en action : si vous redimensionnez le rectangle vert, le cadre s'ajustera automatiquement à la nouvelle taille.
Propriétés clés de la disposition automatique
Passons en revue les principaux paramètres de disposition automatique et leur comportement dans les dispositions réactives. Vous trouverez ces commandes dans le panneau de droite lorsqu'un élément avec disposition automatique activée est sélectionné.
Débit
Le flux définit le comportement des éléments lorsqu'il n'y a pas assez d'espace dans un cadre Auto Layout. Ce paramètre vous permet de choisir si les objets restent sur une seule ligne/colonne ou s'ils passent automatiquement à la ligne suivante lorsque le cadre manque d'espace.
1
Forme libre : vous pouvez déplacer les éléments n'importe où dans le cadre. Bien que cette option apparaisse sous Disposition automatique, elle désactive effectivement la disposition automatique pour ces éléments.
Forme libre — placez les éléments librement (désactive la disposition automatique).
2
Vertical : les éléments sont placés les uns sous les autres.
Les objets s'empilent automatiquement dans une colonne.
3
Horizontal : les objets sont alignés horizontalement. Dans ce mode, un paramètre supplémentaire apparaît : Envelopper. Il détermine si les éléments débordent du cadre (et sont coupés) ou s'enroulent sur la ligne suivante lorsque l'espace vient à manquer.
Disposition horizontale avec retour à la ligne désactivé.
Disposition horizontale avec retour à la ligne activé.
4
Grille : nouveau mode qui place automatiquement les éléments sur une grille. Un panneau Grille s'affiche pour vous permettre de personnaliser la grille. Les éléments sont automatiquement mis à jour lorsque vous modifiez la grille.
Lorsque vous modifiez la grille, les éléments s'y ajustent automatiquement.
Redimensionnement
Cette section contient les commandes W (largeur) et H (hauteur). Elles permettent de définir la largeur et la hauteur de l'ensemble du cadre avec la mise en page automatique appliquée.
Vous pouvez choisir entre deux modes :
- Corrigé : la largeur et la hauteur du cadre restent inchangées, quels que soient les autres paramètres ou la taille des éléments qu'il contient.
- Ajustement (adapté au contenu) : la largeur et la hauteur du cadre s'ajustent en fonction du remplissage configuré et de la taille des éléments qu'il contient.
Lorsque Hug est activé, modifier l'espacement entre les carrés permet d'agrandir ou de réduire le cadre.
Écart
Ce paramètre contrôle l'espacement entre les éléments dans une disposition automatique. Vous pouvez définir les espacements horizontaux et verticaux indépendamment.
Exemple : l'espacement vertical et horizontal entre les carrés dans la disposition automatique est de 40 px.
Alignement
Ce paramètre contrôle l'alignement des éléments dans une mise en page automatique : à gauche, à droite, au centre, en haut ou en bas. Il devient disponible lorsque le flux de la mise en page est défini sur Horizontal ou Vertical.
Si l'option Wrap est activée, l'alignement détermine également la position des lignes/colonnes irrégulières. Par exemple, le carré violet peut être centré par défaut, mais vous pouvez le fixer à gauche ou à droite à la place.
Rembourrage
Ce paramètre contrôle l'espacement entre les bords du cadre et son contenu. Le remplissage peut être défini individuellement pour chaque côté. Tous les nouveaux éléments que vous ajoutez s'aligneront automatiquement et respecteront ces paramètres de remplissage.
Paramètres supplémentaires
Plusieurs paramètres supplémentaires sont disponibles pour la mise en page automatique. Passons-les en revue un par un.
Pour accéder à d'autres paramètres, cliquez sur « Paramètres de mise en page automatique » sous « Mise en page automatique ».
1
Contours : contour autour d'un cadre ou d'un élément. Vous pouvez choisir si le contour doit être placé à l'intérieur ou à l'extérieur des bords de l'élément.
Voici à quoi ressemble le cadre lorsque le trait est activé et désactivé.
2
Empilement du canevas : définitcomment les éléments se chevauchent lorsqu'il y a un écart négatif. Choisissez si le premier ou le dernier élément doit être placé devant.
Ce paramètre n'est pas disponible lorsque la mise en page est définie sur Grille.
3
Aligner la ligne de base du texte : aligne les éléments de texte sur la même ligne de base.
Ce paramètre n'est pas disponible lorsque la mise en page est définie sur Grille.
Lorsque cette option est activée, les éléments de texte s'alignent parfaitement sur la ligne de base.
Exemples d'utilisation
Soyons honnêtes, tous ces termes peuvent sembler intimidants. Sans pratique concrète, ils ne restent pas en mémoire et n'ont pas beaucoup de sens. Alors plutôt que d'apprendre la théorie par cœur, voyons comment fonctionne Auto Layout en pratique. Nous allons créer trois éléments d'interface courants : un bouton, une fiche produit et un formulaire d'inscription.
Si vous êtes novice en matière de solutions sans code, utilisez ce code promo exclusif pour obtenir un mois de Plan personnel Tilda au lieu des deux semaines d'essai standard.
Voir les instructions pour l'activer
Bouton
Créons un bouton à l'aide d'un cadre et d'un calque de texte. Normalement, vous devriez ajuster manuellement la largeur du cadre pour qu'elle corresponde à la longueur du texte. Mais que se passe-t-il si le texte s'allonge ? Vous devriez redimensionner le cadre à nouveau. Et si votre interface ou votre site web comporte de nombreux boutons, cela devient rapidement fastidieux.
Comme vous pouvez le voir, lorsque la longueur du texte dépasse le cadre, vous devez ajuster manuellement le deuxième bouton.
Activons la disposition automatique pour réduire les ajustements manuels.
- Appliquez la disposition automatique au cadre (Maj + A).
- Définissez Hug afin que la largeur du bouton s'adapte à la longueur du texte.
- Ajustez le remplissage afin que le texte ne colle pas aux bords du cadre.
Lorsque la disposition automatique est activée, le bouton s'ajuste automatiquement à la longueur de la légende.
Fiche produit
Les fiches produits sont principalement utilisées dans les boutiques en ligne. Il peut y en avoir des centaines, voire des milliers. Chaque fiche contient des titres et des descriptions de différentes longueurs, ainsi que des images de différentes tailles.
Avec la mise en page automatique, vous pouvez simplement remplacer le texte et les images — tout le reste s'ajuste automatiquement.
Une carte sans mise en page automatique : avec peu de texte, tout semble correct.
Mais si le texte devient plus long, une partie du contenu déborde hors de la carte.
À l'intérieur de la carte, différents éléments nécessitent différents espacements :
• l'espace entre le titre et la description est une valeur.
• l'espace entre le texte et l'image en est une autre.
Pour que la carte se redimensionne automatiquement, nous allons la construire à l'aide de plusieurs calques Auto Layout.
• l'espace entre le titre et la description est une valeur.
• l'espace entre le texte et l'image en est une autre.
Pour que la carte se redimensionne automatiquement, nous allons la construire à l'aide de plusieurs calques Auto Layout.
1
Commencez par appliquer la disposition automatique au calque du titre et de la description. Définissez un flux vertical et un espacement de 12 pixels afin que la hauteur s'ajuste automatiquement à différentes longueurs de texte.
2
Ensuite, appliquez la mise en page automatique aux éléments image et texte ensemble. Cela permet à la carte de s'adapter à des images de différentes tailles. Ajoutez un remplissage autour de la carte et définissez la couleur d'arrière-plan sur blanc.
Vous pouvez désormais remplacer l'image ou ajouter un texte plus long : Figma ajuste automatiquement la hauteur de la carte.
Lorsque nous ajoutons une autre ligne de texte, la carte se réajuste et rien ne se casse.
Formulaire de contact/soumission
Un formulaire sur un site Web comprend généralement plusieurs champs de saisie et un bouton. Cependant, si vous redimensionnez le cadre, les champs ne s'étirent pas automatiquement et l'espacement entre eux peut être perturbé.
Un formulaire sans mise en page automatique : les champs ne s'étirent pas et rien ne s'ajuste automatiquement.
Maintenant, mettons en pratique tout ce que nous avons appris et créons un formulaire avec trois champs de saisie standard.
1
Ajoutez une étiquette de champ et un cadre qui servira de zone de saisie.
Libellé du champ de saisie futur et élément qui servira de champ de saisie.
2
Appliquez la mise en page automatique, puis définissez le flux sur Horizontal. Donnez à l'étiquette une largeur fixe afin que tous les noms de champs s'alignent correctement. Définissez la largeur du champ de saisie sur Remplir. Ainsi, lorsque vous redimensionnez le conteneur, le champ de saisie s'ajuste automatiquement à sa largeur.
3
Dupliquez le champ deux fois supplémentaires (par exemple, Nom et E-mail).
4
Sélectionnez les trois champs, regroupez-les et appliquez à nouveau la disposition automatique. Définissez la largeur du groupe sur Remplir. Désormais, lorsque vous redimensionnez le conteneur du formulaire, les champs qu'il contient s'ajustent automatiquement.
Le formulaire est prêt. Ajoutez autant de champs que nécessaire et placez le bouton « Soumettre » en dessous, comme celui que nous avons créé précédemment.
Création d'une mise en page « fluide » avec la mise en page automatique
La mise en page automatique permet de créer des pages Web entières avec un espacement qui s'ajuste automatiquement. Vous commencez par définir la distance entre le titre et la description, puis vous ajoutez un espacement sous l'image, le bouton et le reste du cadre. Étape par étape, vous obtenez une mise en page entièrement automatisée dans Figma.
Lors de la création d'une mise en page, il est très pratique que le contenu s'adapte automatiquement aux différentes tailles d'écran. C'est ce que l'on appelle souvent le « responsive design » (conception réactive). Pour y parvenir, nous devons créer une mise en page fluide.
Pour cet exemple, prenons notre fiche produit, dupliquons-la deux fois et alignons les trois fiches sur une grille. Elles s'adapteront ainsi à la largeur du cadre.
1
Commencez par créer un cadre, puis ajoutez une grille à 12 colonnes.
2
Ajoutez trois fiches produit et placez-les de manière à ce que chacune occupe quatre colonnes.
3
Pour chaque conteneur de carte, définissez la largeur sur Remplir afin que les cartes s'étirent lorsque vous redimensionnez le conteneur principal.
4
Pour le conteneur qui contient les trois cartes, définissez une largeur fixe. Dans les paramètres Contraintes, choisissez l'option « L + R » afin que la mise en page s'étire en fonction de la largeur du cadre.
Vous pouvez désormais remplacer ou ajouter rapidement n'importe quel élément, et même redimensionner le cadre principal. Tous les éléments s'ajusteront automatiquement à sa largeur.
Gardez à l'esprit que dans Figma, la largeur et les contraintes d'un élément sont liées, et que certaines combinaisons ne fonctionnent pas ensemble.
Si vous définissez la largeur d'un cadre Auto Layout sur « Hug contents » (Envelopper le contenu), il sera redimensionné en fonction du contenu qu'il contient. Mais si un calque à l'intérieur de ce cadre utilise les contraintes « Left + Right » (Gauche + Droite), il s'étendra d'un côté à l'autre du conteneur parent. Ces deux paramètres sont contradictoires : dans le premier cas, c'est le contenu qui détermine la taille, et dans le second, c'est le conteneur. Lorsque cela se produit, Figma donne automatiquement la priorité à l'un des deux paramètres.
Si vous avez besoin qu'un élément s'étire en même temps que son cadre parent (comme dans l'exemple précédent avec les fiches produits), commencez par attribuer une largeur fixe à l'élément. Vous pouvez ensuite activer les contraintes « Left + Right » (Gauche + Droite) et il sera redimensionné correctement en même temps que le parent.
Si vous définissez la largeur d'un cadre Auto Layout sur « Hug contents » (Envelopper le contenu), il sera redimensionné en fonction du contenu qu'il contient. Mais si un calque à l'intérieur de ce cadre utilise les contraintes « Left + Right » (Gauche + Droite), il s'étendra d'un côté à l'autre du conteneur parent. Ces deux paramètres sont contradictoires : dans le premier cas, c'est le contenu qui détermine la taille, et dans le second, c'est le conteneur. Lorsque cela se produit, Figma donne automatiquement la priorité à l'un des deux paramètres.
Si vous avez besoin qu'un élément s'étire en même temps que son cadre parent (comme dans l'exemple précédent avec les fiches produits), commencez par attribuer une largeur fixe à l'élément. Vous pouvez ensuite activer les contraintes « Left + Right » (Gauche + Droite) et il sera redimensionné correctement en même temps que le parent.
Comment ignorer les propriétés de disposition automatique (positionnement absolu)
Que faire si vous devez ajouter un petit élément, comme une étiquette de réduction ou un bouton « Ajouter aux favoris », à l'intérieur d'une fiche produit qui utilise la mise en page automatique ?
Dans ce cas, le paramètre de positionnement absolu est la solution. Il vous permet de placer librement un élément à l'intérieur d'un cadre de mise en page automatique tout en ignorant les règles de mise en page appliquées aux autres éléments. Cette option devient disponible une fois que vous activez « Ignorer la mise en page automatique ».
Examinons de plus près un exemple où nous devons ajouter une petite étiquette de remise à une fiche produit.
1
Commencez par créer l'étiquette de réduction.
2
Ajoutez-le à la fiche produit. Si vous le déposez simplement dans le cadre Auto Layout, il s'ajustera en fonction des règles de mise en page existantes et apparaîtra quelque part entre les autres éléments.
3
Activez « Ignorer la disposition automatique ». Vous pouvez désormais positionner l'étiquette où vous le souhaitez.
Le paramètre de positionnement absolu remplace la disposition automatique, vous permettant de placer les éléments où vous le souhaitez, par exemple juste au-dessus de l'image du produit.
FAQ : Principales nuances d'utilisation de la mise en page automatique
Comment supprimer la disposition automatique dans Figma
Vous pouvez supprimer la disposition automatique à l'aide du même bouton de la barre d'outils que vous avez utilisé pour l'appliquer. Vous pouvez également utiliser le raccourci Maj + Option + A sur Mac ou Maj + Alt + A sur Windows. Cela permet de rétablir le cadre normal à la place du cadre de disposition automatique.
Si vous souhaitez ensuite dissocier des éléments individuels qui sont regroupés, vous pouvez utiliser le raccourci Cmd/Ctrl + Maj + G.
Quand utiliser la mise en page automatique
- Vous avez besoin d'éléments pour maintenir un espacement cohérent. Exemple : un bouton avec des icônes et du texte.
- Vous devez mettre à jour régulièrement le contenu. Exemple : une liste de services dont le nombre d'éléments varie.
- Votre mise en page doit être entièrement réactive sur différentes tailles d'écran. Exemple : conception d'une page avec des versions pour ordinateur de bureau et mobile.
- Vous modifiez souvent la structure. Exemple : les éléments de menu que vous ajoutez ou supprimez fréquemment.
- Vous utilisez de nombreux éléments de conception répétitifs. Exemple : les en-têtes et les pieds de page qui apparaissent sur plusieurs pages.
Pourquoi l'option Remplir le conteneur est-elle disponible pour certains éléments mais pas pour d'autres ?
L'option de redimensionnement « Remplir le conteneur » n'apparaît que pour les éléments placés à l'intérieur d'un cadre Auto Layout. En effet, « Remplir le conteneur » indique à l'élément enfant de s'agrandir ou de se réduire selon la logique du parent Auto Layout.
Vous ne pouvez pas définir l'option Remplir le conteneur sur un cadre de niveau supérieur ou sur un élément qui ne se trouve pas dans un cadre de disposition automatique, car il n'existe aucun parent de disposition automatique dont l'espace pourrait être « rempli » par l'élément.
Quand ne pas utiliser la disposition automatique
La mise en page automatique n'est pas toujours nécessaire. Par exemple, si vous créez quelque chose de simple, comme une bannière unique que vous ne prévoyez pas de réutiliser, il n'est pas nécessaire de configurer des règles d'espacement ou de mise en page automatiques. Il vous suffit de placer le titre et l'image à l'intérieur du cadre une seule fois, à des distances fixes. La configuration de la mise en page automatique pour une mise en page que vous ne modifierez ni ne réutiliserez jamais n'apporte aucun avantage réel.
Une bannière simple comme celle-ci n'a pas vraiment besoin d'Auto Layout.
Si vous avez aimé l'article, partagez-le avec vos amis. Nous vous remercions de votre attention.
Lire aussi :
Manuel de formation gratuit sur la conception, la mise en place et l'exploitation de
pages d'atterrissage à forte conversion
pages d'atterrissage à forte conversion
Guide pratique gratuit de l'animation web avec des exemples, des techniques,
et des conseils sur la façon de les utiliser
