Auto Layout dans Figma : la correspondance avec CSS Flexbox (et quand Grid reste nécessaire)

Si vous avez déjà ouvert un fichier Figma et vu "Auto Layout" activé sur un frame, vous avez déjà eu sous les yeux quelque chose de très proche de Flexbox — les designers de Figma ont délibérément repris ce modèle mental. Comprendre cette correspondance n'est pas juste anecdotique : c'est ce qui permet de passer d'un fichier de design à du CSS fonctionnel sans deviner chaque valeur d'espacement à l'œil.

Ce que contrôle réellement Auto Layout

Auto Layout est la façon dont Figma transforme un frame en véritable conteneur de mise en page, plutôt qu'en simple groupe de formes positionnées de manière absolue. Une fois activé sur un frame, plusieurs propriétés deviennent configurables :

• Direction — les enfants s'empilent verticalement ou horizontalement.
• Espacement (gap) — la distance fixe entre chaque élément enfant.
• Padding — l'espace entre le bord du frame et ses enfants, réglable côté par côté.
• Alignement — la façon dont les enfants s'alignent sur l'axe principal et l'axe secondaire.
• Comportement de redimensionnement — le frame et ses enfants s'ajustent-ils au contenu, remplissent-ils l'espace disponible, ou gardent-ils une taille fixe.

Rien n'est arbitraire ici. Chaque propriété existe parce qu'elle correspond à une information dont un véritable moteur de mise en page a besoin — c'est exactement pourquoi elle se traduit si proprement en CSS.

La correspondance directe avec Flexbox

Propriété Auto Layout Figma	Équivalent CSS Flexbox
Direction (verticale/horizontale)	flex-direction: column / row
Espacement entre les éléments	gap
Padding	padding
Alignement sur l'axe principal	justify-content
Alignement sur l'axe secondaire	align-items
Ajuster au contenu (hug)	width: fit-content / height: fit-content
Remplir le conteneur (fill)	flex: 1 ou width: 100% / height: 100%
Taille fixe	width / height explicites

Ce tableau explique pourquoi Auto Layout paraît si intuitif à quiconque connaît déjà Flexbox — et pourquoi Flexbox paraît si intuitif aux designers venus de Figma. Les deux décrivent le même modèle de boîte, sous des noms différents.

Les pièges classiques de la traduction manuelle

Même avec une correspondance claire, les développeurs qui reproduisent Auto Layout à la main butent souvent sur les mêmes détails :

• L'alignement mixte se retrouve aplati. Figma permet à chaque enfant de surcharger l'alignement du groupe ; il est facile de survoler ce détail et d'appliquer une seule valeur align-items à tout le monde, perdant ainsi les surcharges individuelles qui nécessitent align-self.
• L'ambiguïté entre "hug" et "fill". Un frame réglé pour s'ajuster à son contenu ressemble à un frame de largeur fixe sur une seule taille d'écran, mais se comporte de façon totalement différente dès que le contenu ou la taille d'écran change. Se tromper ici est une cause fréquente de mises en page qui cassent sur du contenu réel.
• gap négligé. Certains développeurs continuent d'utiliser des astuces à base de margin au lieu de gap, héritage des anciennes pratiques Flexbox — devenu inutile maintenant que gap bénéficie d'un excellent support navigateur, et cela réintroduit exactement les bugs d'espacement que gap était censé résoudre.
• Les frames Auto Layout imbriqués deviennent des conteneurs flex imbriqués sans réflexion. Chaque frame imbriqué constitue son propre contexte flex, et une traduction littérale, un pour un, peut générer plus d'éléments wrapper que nécessaire.
• Padding appliqué au mauvais élément. Il est facile d'appliquer le padding d'un frame à un enfant plutôt qu'au conteneur, ce qui fausse l'espacement basé sur gap entre les éléments frères.

Quand Flexbox n'est pas la bonne cible — pensez Grid

Auto Layout est un modèle à axe unique : très efficace pour les lignes et les colonnes, y compris en combinaisons imbriquées. Mais certains designs sont véritablement bidimensionnels, et les forcer dans du Flexbox imbriqué produit un code plus difficile à maintenir que le design original. Passez à CSS Grid dès que vous observez :

• Une mise en page où les éléments doivent s'aligner à la fois sur les lignes et les colonnes — grilles de cartes, tableaux de bord, galeries d'images.
• Un comportement explicite du type "cet élément s'étend sur deux colonnes" ou "sur deux lignes", que Grid gère nativement avec grid-column / grid-row, et que Flexbox ne peut pas exprimer directement.
• Des designs où le nombre de colonnes doit s'adapter à la largeur disponible (repeat(auto-fit, minmax(...))) plutôt qu'à une liste fixe de breakpoints.
• Des zones qui se chevauchent ou se superposent au sein d'une même grille, ce qui reste simple avec le système de placement de Grid mais laborieux avec Flexbox.

Une règle simple : si l'Auto Layout d'un frame Figma ne s'imbrique jamais que dans une seule direction à la fois, Flexbox constitue une traduction fidèle. Si vous vous surprenez à construire une grille de frames Auto Layout pour simuler un alignement lignes-colonnes, c'est généralement le signe que l'interface de Figma compense l'absence d'un véritable mode de mise en page Grid bidimensionnel — et il vaut mieux, dans ce cas, générer du vrai CSS Grid.

Comment MarkupGen automatise cette correspondance

Cette correspondance est bien connue, mais l'appliquer correctement sur chaque frame, chaque valeur de gap, chaque conteneur imbriqué d'un vrai fichier de design est fastidieux — et c'est exactement ce type de travail de traduction répétitif que MarkupGen est conçu pour éliminer. Le processus tient en quatre étapes : exporter le frame depuis Figma via le plugin dédié, qui récupère structure, styles et images directement dans votre espace de travail ; l'IA de MarkupGen construit le HTML et le CSS à partir de cette structure réelle, en mappant automatiquement la direction, le gap, le padding et l'alignement d'Auto Layout vers une structure Flexbox équivalente au lieu de laisser cela au hasard d'une estimation manuelle ; vous affinez ensuite le contenu, les polices et la mise en page visuellement dans un éditeur intégré ; puis vous exportez le package final. Les breakpoints responsives sont générés automatiquement à partir des contraintes de redimensionnement du design, et vous pouvez choisir le format de sortie — HTML/CSS classique, Tailwind CSS, ou composants React — selon votre stack. Chaque export reçoit aussi un score de qualité IA automatique, pour évaluer d'un coup d'œil si le code généré est prêt à être livré. Le résultat privilégie un HTML propre et sémantique, sans <div> imbriqués superflus — un point qui compte autant pour la maintenabilité que pour le SEO.

Essayez-le sur votre propre design

Comprendre la correspondance entre Auto Layout et Flexbox vous rend plus rapide pour relire du code généré, et plus pertinent pour repérer où un design a réellement besoin de Grid. Si vous préférez éviter entièrement la traduction manuelle, essayez MarkupGen gratuitement sur votre propre fichier Figma, ou consultez le guide complet de conversion Figma vers HTML pour découvrir le workflow de bout en bout.