Design Tokens : Architecture CTI, Nommage, Exemples pour Développeurs

Architecture et Nommage des Design Tokens avec la Méthodologie CTI

Les design tokens sont un élément fondamental des systèmes de design modernes, assurant une collaboration fluide entre designers et développeurs. Ils permettent la standardisation des attributs visuels des produits comme les couleurs, les polices et les espacements, transformant les valeurs brutes en variables nommées. Un système de tokens bien conçu accélère considérablement le développement de nouvelles interfaces, simplifie la mise à l'échelle et la personnalisation, et minimise la dette technique en éliminant le besoin de modifier manuellement les valeurs de style codées en dur à travers des composants disparates. Dans cet article, nous explorerons l'architecture des design tokens et les spécificités des conventions de nommage en utilisant la populaire méthodologie CTI, qui sous-tend de nombreux systèmes de design avancés.

Abstraction Multi-Niveaux des Design Tokens

Pour construire un système de design flexible et évolutif, l'approche de l'abstraction des valeurs est cruciale. Les systèmes modernes utilisent un modèle à trois couches (Primitif → Sémantique → Composant), souvent complété par une couche zéro — les données brutes — pour une exhaustivité totale. Ce modèle assure un flux de données structuré, où les modifications aux niveaux inférieurs se propagent automatiquement aux niveaux supérieurs, garantissant la cohérence et simplifiant les mises à jour de style globales.

0. Valeurs Brutes : Ce sont des données de base, non abstraites, telles que les codes de couleur hexadécimaux (#0055FF), les valeurs de taille en pixels (16px), ou les noms de polices spécifiques ('Inter', sans-serif). Elles servent de point de départ mais ne devraient pas être utilisées directement dans le code ou les designs pour éviter la dette technique.

1. Jetons Primitifs : C'est le premier niveau d'abstraction. Les jetons primitifs numérisent les données brutes, leur donnant des noms significatifs mais toujours abstraits. Par exemple, #0055FF pourrait devenir blue-500. Si une marque décide de changer la nuance de son bleu corporatif, il suffit de mettre à jour la valeur de blue-500 à un seul endroit, et ce changement s'appliquera automatiquement à tous les jetons dépendants. Les jetons primitifs décrivent souvent les palettes de couleurs, les échelles d'espacement ou les tailles de police.

2. Jetons Sémantiques : Ces jetons décrivent le rôle ou le but d'une ressource au sein de l'interface, répondant à la question 'Pourquoi ?'. Ils lient les jetons primitifs à des contextes d'utilisation spécifiques. Par exemple, blue-500 pourrait être utilisé pour créer color-bg-primary (la couleur de fond primaire). Les jetons sémantiques jouent un rôle crucial dans l'implémentation de thèmes (clair/sombre) et l'adaptation à différents modes, car le même jeton sémantique peut référencer différents primitifs selon le thème actif.

3. Jetons de Composant : Ce niveau décrit l'application spécifique d'un style au sein d'un élément ou d'un composant individuel, répondant à la question 'Où ?'. Les jetons de composant permettent des ajustements de style granulaires pour des composants spécifiques sans affecter d'autres éléments qui pourraient utiliser les mêmes jetons sémantiques. Ils servent à gérer les exceptions et les exigences spécifiques des composants tout en assurant l'héritage des sémantiques générales. Par exemple, color-button-bg-primary-hover pourrait être unique à un bouton, même si son jeton sémantique de base est utilisé ailleurs.

La Méthodologie CTI : Architecture de Nommage

CTI (Catégorie → Type → Élément) est l'un des modèles de nommage les plus populaires pour les design tokens, particulièrement largement utilisé en conjonction avec l'outil Style Dictionary, qui a popularisé cette approche. L'idée centrale derrière CTI est que le nom d'un jeton priorise sa propriété physique ou sa catégorie plutôt que le composant auquel il appartient. Cela rend le système facilement interprétable pour les compilateurs et les scripts.

La formule de nommage en CTI ressemble généralement à ceci : Catégorie-Type-Élément-Sous-élément-État.

Décortiquons chaque élément :

• Catégorie : Définit la nature physique de base du jeton. C'est toujours le premier mot dans le nom du jeton et indique le type de données. Exemples : color, size, font, spacing, radius.
• Type : Décrit la propriété d'interface utilisateur à laquelle cette catégorie s'applique. Exemples : background, text, border, icon.
• Élément : Spécifie l'élément d'interface ou le composant particulier auquel le jeton est lié. Exemples : button, dropdown, container.
• Sous-élément (Modificateur) : Ajoute des précisions à l'élément, indiquant sa variante ou son rôle. Exemples : primary, secondary, success, warning, danger.
• État : Décrit l'état interactif d'un élément. Exemples : hover, active, disabled, focus.

Par exemple, un jeton pour la couleur de fond d'un bouton primaire à l'état actif ressemblerait à color-background-button-primary-active.

Avantages et Inconvénients de l'Approche CTI

Comme toute méthodologie, CTI a ses forces et ses faiblesses, qu'il est important de prendre en compte lors de la conception d'un système de design.

Avantages du CTI :

• Optimisation pour les Compilateurs : Puisque le premier mot d'un jeton indique toujours sa catégorie (color, size, font), il est extrêmement facile pour les scripts de compilateur (par exemple, Style Dictionary) de comprendre les données avec lesquelles ils travaillent. Cela simplifie la génération automatique de variables CSS, de mixins SCSS, de fichiers Swift et d'autres formats à partir de définitions de jetons JSON, minimisant le besoin de configurations personnalisées.
• Audit Efficace et Changements Globaux : Pour un développeur frontend souhaitant vérifier ou modifier tous les espacements dans une application, il suffit de rechercher le préfixe $spacing- ou --spacing-. Cela fournit rapidement une liste complète de toutes les variables d'espacement, ce qui est pratique pour les audits globaux ou les modifications en masse.
• Standardisation : CTI est l'architecture par défaut pour des outils comme Style Dictionary, ce qui le rend bien documenté et compréhensible pour de nombreux développeurs ayant travaillé avec des systèmes de design.

Inconvénients du CTI :

• Dispersion du Style des Composants : Dans les frameworks modernes orientés composants (React, Vue), un composant, tel qu'un bouton, est une entité isolée. Avec l'approche CTI, les styles de ce bouton sont dispersés dans tout le système de design : la couleur pourrait résider dans colors.json, l'espacement dans spacings.json, et les rayons dans radii.json. Pour assembler ou supprimer un composant, un développeur doit "sauter" entre différents fichiers, ce qui rompt le contexte et complique le flux de travail.
• Difficulté de Recherche et d'Autocomplétion : Pour un développeur stylisant un bouton, il est souvent plus important de trouver rapidement tout ce qui est lié à button et primary, plutôt qu'aux préfixes color ou background. Dans les longs jetons CTI, ces mots-clés apparaissent au milieu. L'autocomplétion dans un IDE suggère initialement de nombreuses couleurs, obligeant le développeur à taper une partie significative du jeton pour atteindre le composant souhaité.
• Effort de Refactoring des Composants : Si l'entreprise décide de renommer un composant (par exemple, modal en dialog), avec l'approche CTI, un développeur frontend devrait rechercher et renommer des jetons dans de nombreuses catégories (couleurs, ombres, z-index, espacement). Si le composant était priorisé (dialog-bg-color), le renommage d'un seul dossier ou groupe de jetons suffirait.

Jetons Sémantiques vs. Jetons de Composant : Délimiter les Rôles

Comprendre les distinctions entre les jetons sémantiques et les jetons de composant est essentiel pour construire un système de design flexible. Bien que leurs formules de nommage soient similaires, leurs objectifs diffèrent fondamentalement.

Les jetons sémantiques répondent à la question 'Pourquoi ?'. Ils définissent le rôle ou l'intention d'un style. Par exemple, color-bg-primary signifie "couleur de fond primaire", quel que soit l'endroit où il est utilisé. Ces jetons sont hautement réutilisables et servent à assurer une cohérence globale et le support des thèmes. Leur formule de nommage est : [catégorie]-[propriété]-[rôle]-[importance]-[état].

Les jetons de composant répondent à la question 'Où ?'. Ils décrivent des styles spécifiques à un composant particulier. Ils sont utilisés lorsqu'il est nécessaire de s'écarter des sémantiques générales ou d'appliquer un style unique à un élément spécifique sans affecter d'autres parties du système. Essentiellement, ce sont des exceptions gérées. Leur formule de nommage est : [catégorie]-[composant]-[propriété]-[rôle]-[importance]-[état]. Comme vous pouvez le voir, [composant] est simplement ajouté à la chaîne.

Règle d'Or : Si un jeton est réutilisé à différents endroits et définit un objectif général, c'est un jeton sémantique. Si un style doit être modifié pour un seul élément ou composant spécifique, c'est un jeton de composant.

Détail des Éléments de Nommage CTI

Pour une compréhension plus approfondie du nommage CTI, examinons chacun de ses éléments plus en détail avec des exemples :

• Catégorie : Le dossier principal ou le type de données. Cela constitue la base de l'organisation des jetons.

* color – pour toutes les valeurs de couleur.

* spacing – pour les espacements internes et externes.

* radius – pour les rayons d'angle.

* shadow – pour les paramètres d'ombre.

* typography – pour les styles de texte (taille, graisse, hauteur de ligne).

* size – pour la largeur/hauteur des éléments.

* z-index – pour la gestion de l'ordre de superposition des éléments.

* opacity – pour les valeurs d'opacité.

* duration – pour les durées d'animation.

• Propriété : Clarifie à quelle partie de l'interface utilisateur le jeton se rapporte au sein de sa catégorie.

* bg / surface – pour la couleur de fond.

* text – pour la couleur du texte.

* border – pour la couleur de la bordure.

* icon – pour la couleur de l'icône.

* outline / ring – pour les contours de focus.

* overlay – pour la couleur de l'arrière-plan des modales.

• Rôle (Signification / But) : Définit la signification fonctionnelle ou émotionnelle du jeton.

* primary / secondary / tertiary – pour l'indication de hiérarchie.

* brand / accent – pour les couleurs de marque.

* success – pour les messages de succès (vert).

* warning – pour les avertissements (jaune).

* danger / error – pour les erreurs (rouge).

* neutral – pour les éléments neutres (gris).

* inverse – pour les éléments qui inversent la couleur sur des fonds sombres.

* static – pour les couleurs qui ne changent pas avec les thèmes (blanc/noir).

• Importance (Hiérarchie / Intensité) : Décrit l'intensité ou la visibilité d'un élément.

* default / main / base – un point de référence, état de base (souvent omis dans le nom).

* muted – moins proéminent.

* subtle – très subtil.

* intense – plus prononcé.

* on-brand – pour le contenu contrastant sur un fond de marque.

• État / Modificateur / Taille : Affinements supplémentaires.

* États : hover, active, focus, disabled – pour les états interactifs.

* Tailles : sm, md, lg, xl – pour diverses tailles de composants ou d'éléments.

Règle Importante pour l'état default : Si un jeton est dans son état de base, quiescent, le suffixe -default est généralement omis. Par exemple, color-text-primary fait implicitement référence à l'état par défaut. D'autres états sont ajoutés après le rôle, tels que color-text-primary-hover.

Exemples Pratiques de Structure de Jetons CTI

Pour consolider la compréhension, examinons quelques exemples pratiques de construction de jetons pour les boutons, démontrant la transition des valeurs brutes aux jetons de composant spécifiques.

Exemple 1 : Bouton accent à l'état default

Supposons que nous ayons un bouton primaire avec une couleur d'accent.

• 0. Valeur Brute : #0055FF (couleur bleue brute)
• 1. Jeton Primitif : blue-500 (abstraction de la valeur brute)
• 2. Jeton Sémantique : color-bg-accent (couleur de fond d'accent primaire, référence blue-500)
• 3. Jeton de Composant : color-button-accent-bg (couleur de fond du bouton d'accent, référence color-bg-accent)

Ici, nous voyons comment nous passons d'une valeur générale (blue-500) à une valeur plus spécifique (color-button-accent-bg). Il est important que dans le jeton de composant, nous n'écrivions pas -default, car c'est implicite.

Exemple 2 : Bouton accent à l'état hover

Considérons maintenant comment le nommage change pour le même bouton au survol.

• 0. Valeur Brute : #0044DD (bleu plus foncé)
• 1. Jeton Primitif : blue-600 (abstraction du bleu plus foncé)
• 2. Jeton Sémantique : color-bg-accent-hover (couleur de fond d'accent au survol, référence blue-600)
• 3. Jeton de Composant : color-button-accent-bg-hover (couleur de fond du bouton d'accent au survol, référence color-bg-accent-hover)

Ici, le suffixe -hover est explicitement ajouté, indiquant un état interactif. Chaque niveau d'abstraction rend le système de design plus flexible, permettant des changements de nuance au niveau primitif sans renommer des milliers de jetons.

Exemple 3 : Bouton secondary à l'état default

Pour un bouton secondaire, une palette différente pourrait être utilisée, par exemple, avec de la transparence.

• 0. Valeur Brute : #0055FF avec 10% de transparence ou rgba(0, 85, 255, 0.1)
• 1. Jeton Primitif : blue-transparent-100
• 2. Jeton Sémantique : color-bg-secondary (référence blue-transparent-100)
• 3. Jeton de Composant : color-button-secondary-bg (référence color-bg-secondary)

Cette approche permet de changer facilement de palette pour différents types de boutons, en utilisant une structure de jetons commune.

Exemple 4 : Texte du Bouton secondary à l'état default

Considérons un jeton pour le texte à l'intérieur d'un bouton secondaire.

• 0. Valeur Brute : #0055FF
• 1. Jeton Primitif : blue-500
• 2. Jeton Sémantique : color-text-on-brand (couleur du texte sur un fond de marque, référence blue-500). Ici, le modificateur on-brand apparaît, indiquant le contexte d'utilisation.
• 3. Jeton de Composant : color-button-secondary-text-on-brand (couleur du texte du bouton secondaire, référence color-text-on-brand)

Comme vous pouvez le voir, la catégorie (color, spacing, typography) vient toujours en premier, suivie de la propriété ou du composant, puis des modificateurs et des états. Ce principe "du général au spécifique" assure la prévisibilité et la facilité de navigation au sein du système de design.

Points Clés à Retenir

• Les design tokens sont un élément clé pour créer des systèmes de design évolutifs, cohérents et facilement maintenables, prévenant la dette technique associée au codage en dur des styles.
• Le modèle d'abstraction multi-niveaux (Valeurs Brutes → Jetons Primitifs → Sémantiques → Composants) offre flexibilité et gérabilité, permettant des changements globaux à partir d'un point unique.
• La méthodologie CTI (Catégorie → Type → Élément) est une approche de nommage populaire, pratique pour le traitement automatisé par les compilateurs, mais qui peut compliquer la recherche contextuelle et le refactoring des styles de composants.
• Les jetons sémantiques définissent le rôle et le but d'un style, assurant la réutilisabilité et le support des thèmes, tandis que les jetons de composant servent aux ajustements granulaires et à la gestion des exceptions au sein de composants spécifiques.
• Des règles de nommage claires utilisant des catégories, des propriétés, des rôles, des hiérarchies et des états sont d'une importance capitale pour maintenir l'ordre et la prévisibilité au sein d'un système de design.

— Editorial Team