De Figma à Tailwind CSS : guide pratique de conversion

Tailwind CSS est l'un des formats de sortie les plus demandés lors du passage d'une maquette Figma au code, et aussi l'un des plus fastidieux à produire manuellement. Chaque valeur d'espacement, de couleur et de typographie de la maquette doit être traduite mentalement en « la bonne » classe utilitaire Tailwind — et c'est précisément cette étape de traduction qui grignote silencieusement le temps de handoff.

Pourquoi la conversion manuelle de Figma vers Tailwind est si lente

Tout l'intérêt de Tailwind repose sur une échelle contrainte et cohérente : espacements, couleurs et typographie s'alignent sur un ensemble de tokens prédéfinis plutôt que sur des valeurs arbitraires. C'est excellent une fois le code écrit. Mais pour y arriver depuis un fichier Figma, quelqu'un doit faire cette mise en conformité à la main :

• Deviner le palier d'espacement. Un designer fixe un padding à 18px. Est-ce p-4 (16px), p-5 (20px), ou faut-il une valeur arbitraire comme p-[18px] ? Multipliez cette décision par chaque gap, marge et padding du fichier.
• Faire correspondre les couleurs au thème. Le sélecteur de couleurs de Figma ignore totalement la palette de votre tailwind.config. Une valeur hexadécimale doit être comparée aux gris, bleus et couleurs de marque du thème, sinon on finit avec des classes ponctuelles du type bg-[#f4f4f5] éparpillées dans le code plutôt que bg-gray-100.
• Reconstituer les échelles typographiques. Tailles de police, hauteurs de ligne et graisses doivent correspondre systématiquement aux utilitaires text-* et font-*, sinon des titres visuellement identiques dans Figma finissent avec trois combinaisons de classes différentes dans le code.
• Recommencer pour chaque breakpoint. Rien de tout cela n'est un coût ponctuel — cela se répète pour chaque variante responsive, à la main, avec les préfixes sm:, md: et lg: en plus.

Aucune de ces étapes n'est difficile en soi. Mais c'est exactement le type de travail répétitif et peu créatif où les incohérences s'installent — et des classes utilitaires incohérentes vont à l'encontre de l'intérêt même de Tailwind.

Comment MarkupGen génère du Tailwind à partir d'une vraie maquette

MarkupGen est conçu pour supprimer cette étape de traduction, plutôt que d'accélérer son exécution manuelle. Le workflow reste identique, que vous exportiez en CSS classique ou en Tailwind :

1. Exporter le frame depuis Figma via le plugin MarkupGen. Il capture la structure, les styles et les images du frame et les envoie dans votre workspace.
2. L'IA construit le markup à partir de la structure et du style réels de la maquette, pas d'une approximation grossière.
3. Affiner le contenu, les polices et la mise en page visuellement dans l'éditeur intégré avant toute finalisation.
4. Exporter le package de code final dans le format choisi.

Ce qui compte le plus pour cet article, c'est l'étape 4 : quand Tailwind CSS est choisi comme format de sortie, les classes utilitaires sont générées à partir des vrais tokens d'espacement, de couleur et de typographie de la maquette — pas devinées à partir d'une capture d'écran. Une valeur de padding du frame Figma est associée à l'utilitaire d'espacement Tailwind le plus proche, une couleur de remplissage est résolue par rapport aux valeurs de couleur réelles de la maquette, et les tailles/graisses de police se traduisent en classes text-* et font-* correspondantes. C'est exactement le travail de traduction qu'un développeur ferait à la main, sauf qu'il est effectué directement depuis les données de la maquette plutôt qu'à l'œil.

Le HTML/CSS classique et React sont les deux autres formats de sortie disponibles — Tailwind n'est que l'un des trois, sélectionnable à chaque export selon ce qu'attend le codebase cible.

L'Auto Layout devient des classes utilitaires Flexbox

La plupart des fichiers Figma réels utilisent l'Auto Layout pour tout ce qui ressemble à un composant, donc sa traduction compte autant que la couleur ou l'espacement. MarkupGen convertit la direction, l'espacement (gap), le padding et l'alignement de l'Auto Layout en une structure CSS Flexbox équivalente, et pour un export Tailwind, cela se traduit par les classes flex correspondantes — la direction devient l'utilitaire flex-row / flex-col approprié, le gap devient un utilitaire gap-*, le padding devient p-* / px-* / py-*, et les réglages d'alignement deviennent des utilitaires items-* / justify-*. Les breakpoints responsives et le comportement fluide sont eux aussi générés automatiquement, à partir des contraintes de redimensionnement déjà définies sur le frame, sans passe manuelle supplémentaire. Pour approfondir la correspondance entre chaque propriété d'Auto Layout et son équivalent Flexbox, voir Auto Layout to CSS.

Relire les classes générées avant de livrer

La conversion automatique produit les bonnes classes utilitaires pour l'immense majorité d'une maquette, mais une relecture avant merge reste utile :

• Repérer les valeurs isolées. Si la maquette utilise une valeur d'espacement légèrement en dehors de l'échelle Tailwind, évaluez s'il vaut mieux ajuster la maquette vers un palier standard ou conserver la valeur exacte.
• Vérifier la cohérence des couleurs sur toute la page, en particulier là où un composant apparaît plusieurs fois — une même couleur visuelle doit toujours donner la même classe utilitaire.
• Confirmer la hiérarchie des titres et les balises sémantiques, puisque le rendu est généré en HTML propre et sémantique, sans <div> imbriqués superflus par défaut.
• Utiliser l'éditeur intégré pour ajuster contenu, polices ou mise en page visuellement plutôt qu'en modifiant à la main les classes exportées, puis réexporter une fois satisfait.

Chaque export reçoit aussi un score de qualité IA automatique, donnant un signal rapide pour savoir si un export est prêt à livrer ou mérite un second regard avant d'aller plus loin.

Essayez sur votre propre maquette

Si vous convertissez encore vos valeurs Figma en classes Tailwind à la main, voyez à quel point ce travail disparaît quand les classes proviennent des vrais tokens de la maquette plutôt que d'une estimation. Essayez MarkupGen gratuitement sur l'un de vos frames Figma, ou consultez le guide général Figma vers HTML pour découvrir le workflow complet en quatre étapes. Pour toute question, écrivez à support@markupgen.com.