Les design tokens (couleurs, espacements, typo) sont la couche d'abstraction entre le design (Figma) et le code. Style Dictionary, Figma Variables et des builds CSS/JS/Android/iOS permettent une seule source de vérité.

Les tokens sont des paires clé-valeur (color.primary, spacing.md) définies en JSON ou en Figma Variables. Style Dictionary (ou des outils similaires) les transforme en thèmes CSS, en variables JS ou en ressources natives. Figma peut exporter des tokens ; le code les consomme pour les composants. Pour les design systems et les apps multi-plateforme, les tokens évitent la dérive entre maquettes et implémentation. La gouvernance (qui met à jour quoi) et la synchro (Figma → repo) sont à cadrer.

Conseil : commencer par couleurs et espacements, puis étendre à la typo et aux rayons.

Points forts / Points faibles

Points forts

  • Single source of truth design-dev
  • Multi-plateforme (web, mobile, desktop)
  • Évolution du design sans tout refactorer
  • Figma Variables et outils (Style Dictionary) alignés

Points faibles

  • Mise en place et maintenance à organiser
  • Synchro Figma ↔ code à automatiser
  • Courbe d'apprentissage pour toute l'équipe