Figma Auto Layout pour un design flexible et responsive

Figma Auto Layout est le moyen le plus rapide d'arrêter de dessiner des cadres statiques pour construire des composants qui se comportent comme de vraies interfaces. Si tu veux des boutons, des listes de cartes et des formulaires qui grandissent et rétrécissent selon leur contenu, tu dois apprendre les règles réactives d'Auto Layout plutôt que de réaligner chaque élément à la main. Dans ce guide, nous expliquons la logique avec une analogie CSS Flexbox, puis nous construisons pas à pas un vrai bouton et une carte.

Que fait réellement Auto Layout ?

Quand tu appliques Auto Layout à un frame, Figma gère ce frame comme un conteneur flex. Les éléments enfants ne sont plus des cadres déplaçables librement : ce sont des éléments alignés sur un axe, avec un espacement fixe entre eux, qui respectent le padding du conteneur. Supprime un élément et les autres se décalent automatiquement ; allonge le texte et le conteneur s'agrandit. Concrètement, tu obtiens :

Direction : empilement horizontal ou vertical — l'équivalent de flex-direction en CSS.
Gap : un espace fixe entre les éléments — identique à gap.
Padding : l'espacement intérieur du conteneur, réglable par côté.
Alignement : une grille 3x3 qui positionne les éléments sur les axes principal et transversal.

Sélectionne un frame et appuie sur Shift + A pour ajouter Auto Layout instantanément ; appuie de nouveau sur le même raccourci pour le retirer.

Régler direction, gap et padding

Ajouter Auto Layout ouvre une nouvelle section dans le panneau de droite. Le premier réglage est la direction : horizontale (→) ou verticale (↓). Si l'icône et le libellé d'un bouton sont côte à côte, choisis horizontale ; si le titre et la description d'une carte s'empilent, choisis verticale.

Le deuxième réglage est le gap, l'espace entre les éléments. Tu peux saisir une valeur fixe en pixels, ou choisir « Auto » pour pousser les éléments aux deux extrémités du conteneur (la logique de justify-content: space-between en CSS). Pour le padding, tu peux saisir une seule valeur pour tous les côtés, des valeurs horizontale/verticale séparées, ou régler chacun des quatre côtés individuellement.

Enfin, il y a le contrôle d'alignement : clique sur un point de la grille 3x3 pour aligner les éléments à gauche/centre/droite et en haut/milieu/bas. Une carte verticale veut généralement « haut-gauche », tandis qu'un bouton préfère « centre ».

Resizing : le réglage qui rend un composant vraiment flexible

La partie la plus puissante mais la plus mal comprise d'Auto Layout est le comportement de resizing. Le frame conteneur comme chaque élément enfant disposent de trois options par axe, horizontal et vertical :

Fixed (fixe) : la taille est définie manuellement et ne change pas.
Hug contents (épouser le contenu) : le conteneur rétrécit pour s'ajuster exactement au contenu — comme un bouton qui se réduit à son libellé.
Fill container (remplir le conteneur) : l'élément occupe l'espace disponible dans son parent — similaire à flex-grow: 1 en CSS.

La bonne combinaison change tout. Par exemple, mets un conteneur de bouton en Hug horizontalement et il grandit quand le libellé s'allonge ; mets l'élément texte intérieur en Fill et le conteneur en Fixed, et le bouton garde une largeur fixe avec le texte centré. « Fill » ne peut être choisi que pour des éléments à l'intérieur d'un frame Auto Layout ; sur le frame le plus extérieur, cette option n'apparaît pas.

Pas à pas : un bouton flexible

Construisons un bouton vraiment responsive :

Crée un calque de texte et tape « Envoyer ».
Le texte sélectionné, appuie sur Shift + A — Figma enveloppe le texte dans un frame Auto Layout.
Laisse la direction horizontale, règle le padding à 16 horizontal et 10 vertical.
Mets le resizing du frame en Hug contents sur les deux axes.
Ajoute un rayon de coin et une couleur de remplissage.

Maintenant, quand tu changes le libellé de « Envoyer » à « Envoyer le formulaire », le bouton s'élargit tout seul et le padding reste constant. Transforme-le en Composant (Ctrl/Cmd + Alt + K) et chaque instance conserve ce comportement flexible. Cela correspond proprement à du CSS :

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
}

Listes de cartes et Auto Layout imbriqué

Dans les vrais projets, la puissance vient de l'Auto Layout imbriqué. Une carte typique se construit ainsi :

Auto Layout vertical extérieur : le corps de la carte (padding 24, gap 12).
À l'intérieur, un texte de titre et un texte de description — tous deux en Fill container horizontalement.
En bas, un Auto Layout horizontal pour les boutons, gap 8.

Place cette carte dans un Auto Layout vertical extérieur avec un gap, et dupliquer la carte crée automatiquement une liste. Supprime une carte et la liste comble le vide sans laisser de trou. Pour une grille multi-colonnes, active l'option Wrap : un Auto Layout horizontal renvoie à la ligne suivante les éléments qui ne tiennent pas — comme flex-wrap: wrap en CSS.

Erreurs fréquentes et astuces

Mauvais resizing : si un élément grandit de façon inattendue, il est probablement en « Fixed » là où il devrait être « Fill », ou l'inverse. Vérifie cela en premier.
Le texte ne passe pas à la ligne : si un texte long déborde sur une seule ligne, mets le calque de texte en Fill horizontal et Auto/Hug vertical ; assure-toi que le texte est en mode « Auto height » plutôt que « Auto width ».
Espacement négatif : Figma accepte un gap négatif, pratique pour des piles d'avatars qui se chevauchent.
Position absolue : pour sortir un élément du flux Auto Layout (par exemple un badge dans le coin), sélectionne-le et active la position absolue.

Questions fréquentes

Auto Layout est-il identique à CSS Flexbox ?

Pas identique, mais la logique est presque la même. Direction, gap, padding et alignement correspondent directement aux concepts de Flexbox ; « Fill container » équivaut grosso modo à flex-grow, et « Hug contents » au comportement d'ajustement au contenu. C'est pourquoi le passage au frontend devient bien plus propre.

Comment retirer Auto Layout ?

Sélectionne le frame et appuie de nouveau sur Shift + A, ou utilise l'option de suppression à côté de la section Auto Layout dans le panneau de droite. Les éléments restent libres à leur dernière position.

Combien de niveaux imbriqués puis-je utiliser ?

Il n'y a pas de limite stricte en pratique ; 3 à 4 niveaux d'Auto Layout imbriqué sont normaux dans les composants complexes. Nomme tout de même tes calques de façon claire et évite les conteneurs inutiles, sinon la maintenance devient plus difficile.

Tu veux construire un design system de zéro ou convertir ton fichier Figma existant en composants responsives ? Je conçois des interfaces basées sur Auto Layout, faciles à transmettre aux développeurs. Parlons de ton projet : contacte-moi.