Qu'est-ce qu'un design system ?
Un design system est l'ensemble partagé des décisions de design, des composants et des règles qu'une équipe utilise pour construire un produit de façon cohérente. Il comprend généralement des jetons de design, une bibliothèque de composants, des règles d'usage et de la documentation, maintenus comme source unique de vérité pour le design et le code.
De quoi il est fait
La plupart des design systems qui fonctionnent ont quatre couches, et ceux qui échouent n'ont généralement pas la première.
Les jetons de design : les valeurs nommées sous tout le reste — couleur, typographie, espacement, rayon, ombre, mouvement.
Les composants : les briques réutilisables, construites pour référencer des jetons plutôt que des valeurs en dur. Un bouton, un champ de formulaire, une modale.
Les règles : quand utiliser quel composant, comment rédiger pour lui, ce qu'exige l'accessibilité.
La documentation : la surface lisible où l'on retrouve tout cela.
Ce qu'il n'est pas
Ce n'est pas une bibliothèque de composants. Une bibliothèque est une couche. Un design system sans jetons vous donne des composants cohérents posés sur des valeurs incohérentes.
Ce n'est pas un fichier Figma. Un fichier Figma en est une représentation. Si le code ne référence pas les mêmes décisions, vous avez deux design systems qui se ressemblent.
Ce n'est pas la documentation. La documentation décrit le système. Les équipes qui commencent par un site de documentation avant d'avoir arrêté les jetons ont écrit la description de rien.
Pourquoi ils dérivent
Un design system ne s'effondre pas, il s'érode. Personne ne décide de l'abandonner. Des valeurs s'accumulent simplement en dehors de lui :
- Une designer a besoin d'une couleur absente de la palette et en choisit une dans le fichier.
- Un développeur sous contrainte écrit
padding: 14pxau lieu d'ajouter un pas d'espacement. - Un assistant IA génère un composant avec des hexadécimaux inventés, faute de pouvoir lire le système.
Chaque cas se défend isolément. Ensemble, ils produisent une base de code avec plusieurs design systems parallèles que personne n'a décidé de créer.
La parade n'est pas la discipline, qui ne passe pas à l'échelle. C'est de faire du système le chemin de moindre résistance : disponible dans chaque outil qui le consomme, au format que cet outil attend, sans étape manuelle.
Combien de temps pour en construire un
À la main, un premier système cohérent représente en général de plusieurs jours à plusieurs semaines. Non parce qu'une décision serait difficile, mais parce qu'il y en a des centaines et qu'elles interagissent. Des échelles de couleur qui tiennent le contraste à chaque association, un mode sombre qui n'est pas une inversion, un nommage sémantique qui survit à un changement de marque.
Ce que Flash DSM apporte ici
Flash DSM génère la couche de jetons et les spécifications de composants à partir d'une phrase, d'une URL, d'un fichier Figma ou d'une capture, puis les maintient synchronisés avec le code, Figma et les agents IA qui écrivent du code.