Tokens, composants, patterns. Comment un système bien tenu fait parler design et code dans la même langue.
Catégorie · Frontend & UI
Une langue commune pour le design et le code.
Un design system est bien plus qu'une bibliothèque de composants. Il repose sur trois niveaux : les tokens (couleurs, espacements, typographie sous forme de valeurs nommées), les composants (bouton, champ, carte comme briques réutilisables) et les patterns (la manière de les combiner en mises en page et en parcours).
L'essentiel : les mêmes tokens s'appliquent dans Figma et dans le code — un bleu est partout exactement le même bleu.
Ce qu'il apporte en exploitation.
Pour les produits que nous faisons évoluer et exploitons sur plusieurs années, un système entretenu est le levier contre la dérive. Les nouvelles fonctionnalités ressemblent à l'existant, les changements de design passent par les tokens en un seul endroit, et l'intégration de nouveaux développeurs prend des jours plutôt que des semaines.
Le prix à payer, sans détour.
Un design system est un investissement qui ne devient rentable qu'à partir d'une certaine taille et d'une certaine durée de vie. Pour un projet ponctuel, le construire ne vaut pas la peine. Et un système que personne n'entretient devient vite une collection de composants obsolètes qui sème plus de confusion qu'elle n'aide.