Figma Auto Layout vers CSS Grid : un guide pratique

TL;DR

• Auto Layout correspond à flex pour les flux unidimensionnels et à grid pour les mises en page bidimensionnelles.
• Définissez les lignes/colonnes dans Figma avant l'export ; des calques désorganisés produisent des grids désorganisés.
• Validez le résultat par rapport à votre échelle d'espacement Tailwind et à vos breakpoints.

Pourquoi Grid est la bonne cible pour certains Auto Layouts

Auto Layout est linéaire par défaut, mais lorsque les cartes passent à la ligne, que des largeurs mixtes apparaissent, ou que le contenu nécessite un alignement à la fois en ligne et en colonne, CSS Grid est une meilleure cible.

Choisissez grid quand vous avez besoin de

• Placement bidimensionnel (lignes et colonnes).
• Alignement cohérent entre des hauteurs de contenu variées.
• Contrôle explicite des gaps sur les deux axes.

Choisissez flex quand vous avez besoin de

• Flux horizontal ou vertical simple.
• Dimensionnement basé sur le contenu sans lignes strictes.
• Règles de mise en page minimales avec un CSS plus léger.

Mapper Auto Layout vers CSS Grid

L'objectif est de traduire l'intention, pas chaque pixel. Utilisez ce mapping comme point de départ :

Flux de travail étape par étape

1. Regroupez les calques par ligne/colonne dans Figma.
2. Renommez les frames/composants pour que les classes exportées soient parlantes.
3. Décidez des colonnes du grid (par exemple, 2, 3, 4) et des règles de breakpoints.
4. Exportez et mappez les gaps vers vos tokens d'espacement.
5. Affinez la responsivité avec minmax() ou des classes de breakpoints.

Astuces de mapping avec Tailwind

• Commencez avec grid + gap-*.
• Utilisez grid-cols-* pour des colonnes fixes, ou grid-cols-[repeat(auto-fit,minmax(240px,1fr))] pour des layouts fluides.
• Gardez l'espacement aligné avec votre configuration (gap-4, gap-6, etc.).

Stratégie responsive

• Mobile first : commencez avec une colonne, puis augmentez les colonnes aux breakpoints md/lg.
• Colonnes adaptées au contenu : utilisez auto-fit avec minmax pour éviter les gaps disgracieux.
• Vérifications de dépassement : validez les titres longs ou les hauteurs de contenu variables.

Pièges courants

• Imbriquer trop de frames, ce qui crée des wrappers grid inutiles.
• Ignorer la taille intrinsèque ; les cartes riches en texte nécessitent des lignes plus hautes.
• Tokens incompatibles ; espacement exporté absent de votre échelle Tailwind.

Checklist avant la mise en production

• Le grid correspond à l'espacement de votre design system.
• Les breakpoints correspondent aux règles de layout de votre produit.
• Les composants restent réutilisables hors du contexte grid.

FAQ

Puis-je convertir chaque Auto Layout en grid ?
Utilisez grid uniquement lorsque vous avez besoin d'un contrôle bidimensionnel ; sinon, flex est plus simple et plus léger.

Ai-je besoin d'un plugin ?
Non, mais de bons outils d'export font gagner du temps. Consultez le Figma to Code Converter pour des options.

Comment éviter les layout shifts ?
Définissez des largeurs de colonne prévisibles et testez avec du contenu réel.

Outils recommandés

Comparez les exportateurs et le support de grid sur la page de comparaison.

Prochaines étapes

• Explorez le hub Figma to Code.
• Consultez les astuces d'export responsive dans le guide de comparaison.