Souus Tools
Sponsoriser

Développement

Convertisseur de jetons Figma — Concevoir des jetons en CSS/Tailwind

Convertisseur de jetons de conception Figma en ligne gratuit. Transformez les jetons de conception JSON en propriétés personnalisées CSS, variables SCSS, configuration Tailwind ou exportations JS. Aucune inscription requise.

Gratuit Sans inscription Fonctionne dans votre navigateur

Espace de travail de l’outil

Que sont les jetons de conception ?

Les jetons de conception sont les décisions de conception atomiques qui définissent un système de conception visuelle : couleurs, espacement, typographie, rayons de bordure, etc. Stockés sous forme de JSON structuré, ils servent de source unique de vérité entre les outils de conception (comme Figma) et le code. Ce convertisseur transforme le jeton JSON en variables CSS prêtes à l'emploi, variables SCSS, configuration CSS Tailwind ou exportations JavaScript.

Comment convertir des jetons de conception

  1. 1Collez vos jetons de conception JSON. Les jetons doivent avoir une propriété de valeur, comme un objet imbriqué où les nœuds feuilles contiennent une clé appelée valeur avec la valeur du jeton.
  2. 2Sélectionnez votre format de sortie : CSS, SCSS, Tailwind ou JS.
  3. 3Pour la sortie CSS, personnalisez le préfixe de la variable (la valeur par défaut est --).
  4. 4Copiez la sortie générée dans votre projet.

Cas d'utilisation courants

Transfert de la conception au code

Convertissez les exportations de jetons Figma directement en variables CSS pour les utiliser dans vos feuilles de style.

Configuration du thème Tailwind

Générez la configuration du thème CSS Tailwind à partir des jetons de votre système de conception.

Jetons multiplateformes

Exportez des jetons vers différents formats pour les solutions de style Web (CSS/SCSS) et JavaScript.

Questions fréquentes

Quel format JSON est attendu ?

L'outil attend un objet JSON imbriqué dans lequel les nœuds feuilles ont une propriété value. Ceci est compatible avec les jetons Figma, le dictionnaire de styles et la plupart des formats de jetons de conception.

Est-ce que cela prend en charge les références ou les alias ?

Actuellement, cet outil fonctionne avec des valeurs résolues. Les références de jetons telles que color.primary.500 entre accolades ne sont pas résolues automatiquement.

Puis-je l'utiliser avec Tokens Studio pour Figma ?

Oui. Exportez vos jetons au format JSON depuis Tokens Studio et collez-les ici. La structure imbriquée avec des propriétés de valeur est entièrement prise en charge.