La source de vérité design/dev est le seul et unique référentiel fiable partagé entre designers et développeurs qui définit les valeurs sémantiques d’un système de design (couleurs, typographie, espacements, etc.).
- En documentation : ils alimentent des plateformes comme Zeroheight ou Storybook.
- En design : ces tokens alimentent les Variables Figma, les composants, les thèmes clair/sombre, etc.
- En développement : ils sont transformés (via Style Dictionary ou des scripts) en CSS, Tailwind, React, iOS, Android, etc.
L’objectif ?
Éliminer les divergences entre ce qui est conçu et ce qui est codé, en garantissant que toute modification (ex. changement de couleur primaire) se propage automatiquement et de façon cohérente dans tous les environnements.
Exemple concret
- Source de vérité (fichier
tokens.json) - Dans Figma Variable
--color-primary-action=#FF0040 - Dans le code
const primaryAction = "#FF0040"ou.btn { color: var(--color-primary-action); }
Pourquoi c’est crucial ?
- Cohérence visuelle à l’échelle
- Gain de temps (plus de copier-coller de valeurs)
- Moins de bugs UI
- Collaboration fluide design ↔ dev
- Maintenabilité (un seul point de modification)