Glossaire des design systems
Le vocabulaire sur lequel repose le travail sur les design systems, défini simplement. Ces entrées décrivent le domaine et non le produit : elles vous servent même si vous n'ouvrez jamais Flash DSM.
Dérive des jetons
La dérive des jetons est l'écart qui se creuse progressivement entre les décisions consignées dans un design system et les valeurs réellement utilisées dans un produit. Elle survient quand une surface (un fichier Figma, une feuille de styles, du code généré par IA) cesse de référencer la source partagée et accumule ses propres valeurs.
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.
Du design au code
Le passage du design au code désigne la transformation des décisions prises dans un outil comme Figma en code front-end fonctionnel. La version durable transfère les jetons de design plutôt que de générer du balisage depuis un canevas, car les jetons restent valides quand l'interface change, contrairement au balisage généré.
Échelle de couleur
Une échelle de couleur est un ensemble ordonné de nuances d'une même teinte, numéroté par convention de 50 à 900, construit pour que les paliers soient perceptuellement réguliers et que certaines associations respectent des ratios de contraste connus. Elle permet de choisir une couleur par rôle et par palier plutôt qu'une valeur hexadécimale arbitraire.
Échelle typographique
Une échelle typographique est l'ensemble ordonné des tailles de police qu'un design system autorise, généralement obtenu en multipliant une taille de base par un rapport constant. Restreindre le texte à ces paliers est ce qui maintient la cohérence typographique d'une interface construite à plusieurs.
Jeton de design
Un jeton de design est une valeur nommée qui stocke une seule décision de design, comme une couleur, un pas d'espacement ou une taille de police, afin que cette décision soit réutilisable dans les outils de design et dans le code au lieu d'être réécrite à la main à chaque endroit.
Jeton sémantique
Un jeton sémantique est un jeton de design nommé d'après son rôle plutôt que d'après la valeur qu'il contient, comme --color-text-danger plutôt que --color-red-600. Il référence généralement un jeton primitif, ce qui permet de changer la valeur sous-jacente sans renommer ce qui l'utilise.
Jetons de mode sombre
Les jetons de mode sombre sont un second jeu de valeurs rattaché aux mêmes noms sémantiques que le thème clair : changer de mode fait pointer des noms comme --color-surface vers d'autres couleurs, sans qu'aucun composant ait besoin de savoir quel mode est actif.
MCP pour les jetons de design
Model Context Protocol est un standard ouvert qui relie les assistants IA à des outils et des données externes. Appliqué aux jetons de design, un serveur MCP expose les valeurs à jour d'un projet à un agent de développement, afin que les composants générés utilisent le design system réel plutôt que des valeurs inventées par le modèle.
Variables Figma
Les variables Figma sont des valeurs nommées stockées dans un fichier Figma pour les couleurs, les nombres, les chaînes et les booléens, avec des modes pour des cas comme les thèmes clair et sombre. C'est la forme native des jetons de design dans Figma, mais les lire via l'API REST de Figma exige un plan Enterprise.