01
Étude de cas / concept-design-system
Étude
Automatisation de design system
Un pont entre les tokens de design et le code : une source unique qui descend jusqu’aux composants sans recopie manuelle.
- Rôle
- Conception & développement, de bout en bout
- Stack technique
- TypeScript · Tailwind CSS · Style Dictionary
02
Aperçu
- Le problème
- Sur un produit qui grandit, le design system dérive. Une couleur change dans l’outil de maquette mais pas dans le code, un espacement existe en deux versions, et chaque écran rejoue les mêmes décisions à la main. La cohérence devient un travail de relecture au lieu d’être une propriété du système.
- La manière
- Le principe est de tenir une seule source de vérité pour les tokens — couleur, typographie, espacement, rayon — et de la faire descendre par génération plutôt que par copie. Les tokens deviennent des variables de thème, les variables alimentent les primitives, et les primitives sont les seuls endroits où une décision visuelle est écrite. Le travail porte autant sur la chaîne de génération que sur la discipline qu’elle impose : on ne peut plus écrire une valeur en dur, le système refuse l’écart par construction.
03
Sur ses vrais écrans
En images
04
En détail
L’intention
La plomberie du design plutôt qu’un écran. La question : comment empêcher un design system de dériver quand le produit grandit et que plusieurs mains y touchent.
Une seule source
Les tokens — couleur, typographie, espacement, rayon — vivent à un seul endroit. Tout le reste en descend : variables de thème, puis primitives. La règle est simple et dure : une valeur visuelle ne s’écrit qu’au sommet, jamais au cas par cas dans un composant.
La génération comme garde-fou
Plutôt que de recopier les valeurs d’un outil de maquette vers le code, on les génère. Le bénéfice n’est pas le gain de temps mais l’impossibilité de l’écart : si la valeur n’est pas dans la source, elle n’existe pas dans l’interface.
La contrainte est le produit
L’intérêt de l’exercice est ce qu’il interdit. Pas de couleur en dur, pas d’espacement arbitraire, pas de seconde version d’un même token. La cohérence cesse d’être une relecture pour devenir une propriété du système.
Portée
En développement. Un terrain pour tenir la rigueur dans la durée.