CSS to Figma Auto Layout : Flexbox et Grid vers Auto Layout

Si vous écrivez du code front-end, l'Auto Layout de Figma vous semble familier : une direction, un espacement, du padding, un alignement, des enfants en hug ou en fill. On est tenté de croire que le passage CSS to Figma Auto Layout est une traduction un pour un. Ce n'est pas le cas. Flexbox et Grid sont plus riches, le navigateur résout des marges, des pourcentages et des tailles intrinsèques que l'Auto Layout ne modélise pas, et un même rendu visuel peut provenir de CSS très différents.

Ce guide explique comment HTML to Frames transpose les mises en page CSS en Auto Layout, pourquoi chaque résultat est vérifié par rapport au navigateur, où se situent les limites et comment écrire un CSS qui s'importe proprement.

L'approche : la géométrie d'abord, puis la déduction

Un convertisseur naïf lit display: flex et recopie les propriétés. Cela casse vite : un conteneur flex avec gap: 0 et des marges sur les enfants, un élément block qui ressemble seulement à une pile verticale, ou une grille qui s'affiche comme deux rangées bien nettes.

HTML to Frames part de ce que le navigateur a réellement rendu :

1. Construire au pixel près. La page est d'abord construite dans Figma avec des positions absolues issues de la géométrie mesurée par le navigateur.
2. Parcourir de l'intérieur vers l'extérieur. En partant des frames les plus profonds, le plugin déduit piles verticales, piles horizontales, rangées qui passent à la ligne, espacements, padding et alignement à partir des positions et des tailles.
3. Ajouter le sens responsive. Le contenu centré devient Center, les conteneurs à largeur maximale restent centrés, les cartes de même taille et flex-grow deviennent Fill, et dans une barre « logo … menu … icônes », l'élément d'espacement devient Fill.
4. Vérifier. L'Auto Layout est appliqué, puis la position de chaque enfant est comparée à l'original, avec une tolérance de 2 px.
5. Se replier en sécurité. Si cela ne tient pas, un plan plus simple est essayé. S'il échoue aussi, le frame conserve ses positions absolues avec des contraintes adaptées (Stretch, Scale, Center, Min, Max).

Comme la déduction part de la géométrie rendue, une pile d'éléments block devient un Auto Layout vertical tout comme une colonne flex. Le mécanisme CSS compte moins que le résultat. Pour une vue d'ensemble, voir L'Auto Layout expliqué.

Le tableau de correspondance

Voici comment les motifs CSS courants sont généralement transposés. Considérez-le comme le résultat attendu, pas comme une promesse ; la vérification a le dernier mot.

Flexbox en détail

Direction et ordre

flex-direction détermine si un conteneur devient une pile horizontale ou verticale. Comme la déduction s'appuie sur les positions rendues, les directions inversées et order produisent simplement des calques dans l'ordre visuel. Ce que vous voyez dans le navigateur est ce que vous obtenez dans le panneau des calques.

Gap et padding

gap est l'entrée la plus propre : une distance unique et cohérente entre les enfants, qui correspond directement à l'espacement des éléments de l'Auto Layout. Les marges entre éléments frères fonctionnent lorsqu'elles sont cohérentes. Lorsqu'elles ne le sont pas, par exemple 16, 24, 16, le plugin ne peut pas les représenter par un seul espacement, et la vérification choisira un autre plan ou conservera les positions absolues.

Le padding est mesuré à partir de l'endroit où les enfants se trouvent réellement dans le conteneur : padding, largeurs de border et marges internes contribuent tous au résultat.

Justify et align

justify-content correspond à l'alignement sur l'axe principal et align-items à l'alignement sur l'axe secondaire. Le cas intéressant est space-between. Dans un en-tête du type « logo … menu … icônes », le plugin transforme l'élément d'espacement en Fill : au redimensionnement, le logo reste à gauche, les icônes restent à droite et le milieu s'étire. C'est le sens responsive attendu, plutôt qu'une valeur d'espacement fixe qui ne fonctionne qu'à une seule largeur.

flex-grow et Fill

Les enfants avec flex-grow ou flex: 1 deviennent Fill container. Les rangées de cartes égales deviennent des éléments Fill égaux : redimensionner le frame parent redimensionne les cartes ensemble, comme dans le navigateur.

Passage à la ligne

flex-wrap: wrap correspond au mode wrap de l'Auto Layout, qui produit des rangées passant à la ligne. C'est l'équivalent naturel des listes de tags, murs de logos et grilles de cartes construits en Flexbox.

CSS Grid en détail

L'Auto Layout de Figma est un modèle de piles, pas une grille à deux dimensions. Les mises en page Grid sont donc transposées vers la structure la plus proche qui passe la vérification :

• Les grilles uniformes (colonnes égales, espacements égaux) deviennent généralement des rangées qui passent à la ligne.
• Les grilles asymétriques (une barre latérale et une colonne principale, une répartition 2:1) deviennent généralement des piles imbriquées : une pile horizontale de piles verticales, ou l'inverse.
• Les cellules fusionnées ou qui se chevauchent et qui ne se décomposent pas en piles conservent leurs positions absolues avec des contraintes.

Dans tous les cas, le rendu visuel correspond au navigateur dans la tolérance. Ce qui change, c'est la part du frame que vous pouvez redimensionner de façon fluide dans Figma.

Positionnement absolu, centrage et marges auto

position: absolute

Un badge positionné en absolu, une forme décorative ou une surcouche n'ont pas leur place dans une pile, car ils chevauchent leurs éléments frères. Ces éléments conservent leurs positions absolues, et le plugin leur attribue des contraintes pour qu'ils se comportent correctement quand le parent est redimensionné : un badge épinglé en haut à droite reste en haut à droite, une surcouche plein cadre s'étire.

max-width et margin: auto

Le conteneur de contenu classique, max-width: 1200px; margin: 0 auto, devient un conteneur centré dans un frame pleine largeur. C'est aussi là qu'intervient la Site width : le plugin mesure la largeur de design réelle de la page à l'import. Les designs pleine largeur arrivent en 1920 avec le contenu centré, les sites réellement centrés dans un conteneur à la largeur de ce conteneur, et les sites fluides en 1440. La valeur mesurée préserve la logique de votre conteneur.

Marges auto dans un conteneur flex

margin-left: auto sur un enfant flex le repousse à la fin, un motif courant dans les barres de navigation. Comme space-between, c'est déduit de la géométrie, généralement sous la forme d'un élément d'espacement Fill qui maintient l'élément repoussé contre le bord.

Pourquoi la vérification compte

Sans vérification, les convertisseurs n'ont que deux mauvaises options : appliquer l'Auto Layout partout et accepter que certains frames se décalent, se chevauchent ou s'effondrent, ou éviter l'Auto Layout et vous livrer des calques absolus figés.

HTML to Frames applique l'Auto Layout, puis vérifie la position de chaque enfant à 2 px près. Si un frame échoue, un plan plus simple est essayé ; s'il échoue aussi, le frame reste en position absolue. Le design ne casse jamais. Vous pouvez être sûr que ce que vous voyez dans Figma correspond au navigateur, et que l'Auto Layout obtenu tient réellement.

L'écran de résultat affiche la part globale d'Auto Layout et, pour les frames restés en position absolue, indique pourquoi (diagnostics). La question « pourquoi ce n'est pas en Auto Layout ? » devient ainsi quelque chose sur quoi vous pouvez agir dans votre CSS.

Dans nos tests sur de vrais sites, l'Auto Layout a été déduit sur environ 86 à 97 % des frames, par exemple 93 % sur un site produit et 88 % sur Linear et Stripe. Vos chiffres dépendent de la façon dont le CSS est écrit.

Les limites à connaître

• La sémantique de grille à deux dimensions n'existe pas dans l'Auto Layout ; les grilles deviennent des rangées qui passent à la ligne ou des piles imbriquées, et les fusions complexes peuvent rester en position absolue.
• Un espacement incohérent entre éléments frères ne peut pas s'exprimer par un espacement unique.
• Les chevauchements (marges négatives, enfants en absolu) gardent ces éléments en position absolue.
• Les transformations skew et 3D, les clip-paths path(), les masques multicouches et les couleurs Display-P3 ne sont pas encore convertis.
• Le contenu intégré comme les iframes, canvas WebGL et vidéos sans image d'aperçu arrive sous forme de capture de son bloc.
• Une largeur à la fois. Chaque écran est mis en page à sa propre largeur. Utilisez le Responsive set (Desktop, Tablet, Mobile) pour capturer chaque breakpoint dans un frame distinct.

Conseils : écrire un CSS qui s'importe proprement

Ces habitudes rendent vos mises en page plus souvent transposables en Auto Layout, et ce sont de toute façon de bonnes pratiques CSS.

1. Utilisez gap plutôt que des marges entre éléments frères. Une valeur cohérente correspond directement à l'espacement des éléments.
2. Gardez un espacement cohérent au sein d'un conteneur. Les espacements mixtes forcent des replis.
3. Préférez Flexbox pour les mises en page à une dimension. Navigations, barres d'outils, groupes de boutons et rangées de cartes se transposent directement.
4. Utilisez Grid avec des pistes égales pour les grilles de cartes. Des colonnes uniformes deviennent des rangées propres qui passent à la ligne.
5. Enveloppez les mises en page asymétriques dans des conteneurs explicites. Une barre latérale et une zone de contenu dans leur propre rangée flex produisent des piles imbriquées claires.
6. Utilisez flex: 1 pour les éléments qui doivent s'étirer. Cela signale un Fill.
7. Centrez le contenu avec max-width et margin: 0 auto. Il devient un conteneur centré qui reste centré.
8. Réservez position: absolute aux vraies surcouches. Ne l'utilisez pas pour la mise en page ordinaire.
9. Évitez les marges négatives pour la mise en page. Elles créent des chevauchements impossibles à empiler.
10. Nommez les couleurs avec des propriétés personnalisées. Avec Styles & variables (Pro), --brand-primary devient une variable brand/primary.
11. Utilisez du vrai texte. Le texte dans des images ne peut pas devenir des calques de texte modifiables.

Voir votre propre correspondance

Le moyen le plus rapide de comprendre comment votre CSS est transposé, c'est de l'importer. Collez du code ou envoyez un dossier via le parcours HTML to Figma, capturez un build local avec l'extension Chrome, ou demandez à un outil d'IA de l'envoyer via MCP. Ouvrez ensuite l'écran de résultat, vérifiez la part d'Auto Layout et lisez les diagnostics des frames restés en position absolue.

Activez Reference screenshot (Pro) pour ajouter un calque masqué et verrouillé de la page d'origine, afin de basculer entre l'import et le rendu du navigateur. Activez Detailed layers (Pro) lorsque vous voulez une structure de calques plus détaillée.

Pour en savoir plus sur la façon dont les pages deviennent des frames, lisez la page sur la conversion HTML to frame, et consultez les fonctionnalités pour tout ce que l'outil d'import prend en charge. La documentation détaille chaque option d'import.