Design tokens Figma vers Tailwind : couleurs, typographie et espacement

Réponse rapide : une valeur Figma de couleur, de texte ou d'espacement se convertit en Tailwind par correspondance avec l'échelle utilitaire propre à Tailwind — le palier d'espacement le plus proche, la couleur la plus proche, la taille de police correspondante. Quand une valeur sort de cette échelle, le résultat se replie sur une classe à valeur arbitraire comme bg-[#f4f4f5], plutôt que d'inventer une nouvelle couleur de thème absente de votre config.

Les « design tokens » dans un fichier Figma, concrètement

Avant que la correspondance ait du sens, il est utile de préciser ce qui compte comme un token par rapport à une valeur ponctuelle dans Figma :

• Les styles de couleur — un remplissage enregistré et nommé (ex. « Gray/100 ») appliqué de façon cohérente dans tout le fichier, par opposition à une valeur hexadécimale brute choisie une fois et jamais réutilisée.
• Les styles de texte — une combinaison enregistrée de police, taille, graisse et hauteur de ligne, appliquée de façon cohérente aux titres ou au texte courant.
• Les valeurs d'espacement — généralement pas « enregistrées » comme un style au même titre, mais des chiffres de gap/padding Auto Layout cohérents, réutilisés d'un frame à l'autre.

La correspondance vers Tailwind fonctionne d'autant mieux que le fichier Figma utilise réellement ces éléments de façon cohérente. Un fichier où chaque bouton utilise le même style de couleur enregistré « Primary » se convertit proprement en une seule classe Tailwind réutilisée partout. Un fichier où cinq boutons ont chacun un bleu légèrement différent et ponctuel se convertit en cinq valeurs Tailwind légèrement différentes — parce que c'est réellement ce que contient le design, pas un défaut de la conversion.

Comment les valeurs se résolvent vers l'échelle Tailwind

La proposition de valeur de Tailwind repose sur une échelle contrainte et prédéfinie pour l'espacement, la couleur et la typographie — pas une palette ouverte. Convertir vers cette échelle, c'est faire correspondre, pas inventer :

C'est une distinction délibérée : le résultat Tailwind de MarkupGen se résout par rapport à l'échelle par défaut réelle de Tailwind, plutôt que de générer un thème tailwind.config personnalisé pour forcer chaque valeur à « rentrer ». Cela garde le résultat honnête vis-à-vis des vraies valeurs du design — une couleur hors échelle apparaît comme une classe à valeur arbitraire, ce qui est un signal visible qu'il vaut la peine de vérifier avec le designer si elle devrait être rapprochée de la palette partagée, plutôt qu'une erreur d'arrondi silencieuse.

Ce que cela implique pour la relecture de l'export

• Les classes à valeur arbitraire sont un signal, pas un bug. Un groupe de classes bg-[#...] dans le résultat signifie généralement que le design lui-même contient des couleurs ponctuelles quasi identiques qui devraient être regroupées en styles partagés — mieux vaut le signaler à l'équipe design plutôt que de « corriger » uniquement dans le code.
• Vérifiez la cohérence de l'espacement entre les composants répétés, puisque l'échelle Tailwind arrondit chaque valeur indépendamment — un même écart visuel dans deux frames différents devrait se résoudre vers la même classe si le design utilisait le même chiffre.
• Si le projet a déjà un thème tailwind.config, comparez-y les valeurs arbitraires générées — une couleur qui semble hors échelle par rapport à la palette Tailwind par défaut est peut-être déjà une couleur nommée dans votre propre config, qu'il vaut la peine de substituer à la main.

Pour le workflow complet — export via le plugin, génération par l'IA, édition, choix du format de sortie — voir Figma to Tailwind CSS: A Practical Conversion Guide.

Essayez-le sur votre propre design

La façon la plus rapide de voir avec quelle cohérence les couleurs et l'espacement de votre fichier se convertissent est de faire passer un vrai frame dans l'outil. Essayez MarkupGen gratuitement, ou consultez la page du convertisseur Figma vers Tailwind pour voir ce qui est inclus.