Figma Auto Layout réduit de 40 % le temps passé à réorganiser manuellement des composants selon les données de la communauté Figma en 2026. Cette fonctionnalité est devenue le socle de tout design system sérieux, et la maîtriser change radicalement la vitesse de production d’interfaces.
Les trois directions de l’Auto Layout
L’Auto Layout s’applique sur trois axes : horizontal, vertical et grille. Le mode horizontal aligne les éléments sur une ligne, le mode vertical les empile, et la grille (disponible depuis la version avancée) les répartit en colonnes et rangées avec un contrôle fin des gouttières.
Le choix de la direction dépend du composant. Une barre de navigation utilise l’horizontal. Une liste de paramètres préfère le vertical. Un sélecteur de couleurs gagne à être structuré en grille.
Spacing modes : packed vs space between
Le mode Packed regroupe les éléments ensemble, avec un espacement fixe entre chacun. C’est le comportement par défaut, adapté aux boutons ou aux tags. Le mode Space Between distribue l’espace disponible entre les éléments, à la manière du justify-content: space-between en CSS Flexbox.
Le spacing mode est l’une des propriétés les plus mal comprises de l’Auto Layout. Comprendre la différence entre Packed et Space Between, c’est comprendre la moitié du responsive design en Figma.
Le padding interne s’applique de façon uniforme (tous côtés identiques) ou personnalisée (top, right, bottom, left indépendants). Pour un bouton, un padding horizontal de 16 px et vertical de 8 px est un point de départ courant.
Tailles minimales et maximales
Figma permet de définir des tailles min et max sur chaque axe d’un frame Auto Layout. Un bouton peut ainsi avoir une largeur minimale de 80 px pour éviter qu’il devienne illisible, et aucune largeur maximale pour s’adapter au contenu.
Ces contraintes correspondent directement aux propriétés CSS min-width, max-width, min-height et max-height. Elles sont particulièrement utiles pour les composants qui doivent s’adapter à des longueurs de texte variables.
Tableau des propriétés clés et leurs équivalents CSS
| Propriété Figma | Équivalent CSS | Usage typique |
|---|---|---|
| Direction : Horizontal | flex-direction: row | Barre de navigation, tags |
| Direction : Vertical | flex-direction: column | Formulaire, liste de résultats |
| Spacing : Packed | justify-content: flex-start | Bouton, chip |
| Spacing : Space Between | justify-content: space-between | Header, footer |
| Padding | padding | Tous les composants |
| Min Width / Max Width | min-width / max-width | Bouton, input, card |
| Wrap | flex-wrap: wrap | Galerie, tags multiples |
Bouton responsive : l’exemple de base
Un bouton responsive en Auto Layout se construit avec une frame en direction horizontale, un padding horizontal de 16 px et vertical de 10 px, et un spacing Packed. L’icône éventuelle et le label sont placés à l’intérieur. La largeur est définie sur Hug : le bouton grandit avec son contenu.
En définissant une largeur minimale de 80 px et en activant le mode Fill dans un conteneur parent, ce même bouton devient capable de s’étirer pour remplir une colonne entière, comme un bouton « pleine largeur » sur mobile.
Card flexible et barre de navigation
Une card flexible combine deux niveaux d’Auto Layout : un frame vertical principal pour empiler l’image, le contenu texte et les actions, avec un frame horizontal imbriqué pour les boutons en bas. Ce nested Auto Layout est la clé des composants complexes.
Pour une barre de navigation, le frame principal est horizontal avec Space Between. Le logo est à gauche, les liens au centre dans un sous-frame horizontal Packed, et le CTA à droite. En redimensionnant le frame parent, toute la barre s’adapte sans toucher aux éléments individuels.
Le nested Auto Layout n’est pas une complexité supplémentaire, c’est la traduction fidèle de la façon dont les développeurs imbriquent leurs composants Flexbox en production.
L’Auto Layout et les variables Figma
En 2026, l’Auto Layout s’intègre pleinement avec les variables Figma. Le padding, le gap et les tailles min/max peuvent être liés à des tokens de design (espacements 4, 8, 16, 24 px). Modifier une variable suffit à mettre à jour tous les composants qui l’utilisent.
Cette combinaison variables + Auto Layout rapproche Figma d’un système de design codé. Les ingénieurs reçoivent des fichiers où les valeurs correspondent directement aux tokens de leur codebase, ce qui réduit les frictions au moment du handoff.
- Utiliser Hug sur la largeur pour les composants dont la taille dépend du contenu
- Utiliser Fill pour les composants qui doivent remplir leur conteneur parent
- Utiliser Fixed uniquement quand la dimension est imposée par la charte
- Toujours nommer les frames Auto Layout avec le même vocabulaire que les développeurs
Maîtriser l’Auto Layout, c’est construire des composants qui se comportent comme du vrai code. Les allers-retours entre design et développement diminuent, et les prototypes reflètent fidèlement ce qui sera livré en production.
