Jeton de conception

Un jeton de conception est une valeur nommée représentant une décision de conception unique, comme une couleur, une unité d'espacement, une taille de police, un rayon de bordure, une ombre ou une durée d'animation. Stockée dans un format indépendant de la plateforme, elle est utilisée à la fois par les outils de conception et par le code. Plutôt que d'avoir une couleur hexadécimale spécifique apparaissant dans des dizaines de composants, un jeton nommé d'après son rôle contient la valeur, et tous les éléments faisant référence à ce rôle sont mis à jour simultanément lorsque la valeur change.

L'objectif est de centraliser les décisions de conception et de les rendre lisibles par machine. Sans jetons, une même couleur prévue se décline en plusieurs valeurs quasi identiques dans le code source, l'espacement devient une série de nombres arbitraires choisis pour chaque composant, et l'écart entre les spécifications des fichiers de conception et le rendu du produit s'accroît sans cesse. Grâce aux jetons, la spécification et l'implémentation font référence aux mêmes définitions, et les incohérences deviennent détectables plutôt que simplement regrettables.

Les systèmes de jetons efficaces sont organisés en couches. Les jetons primitifs désignent des valeurs brutes, comme un bleu spécifique à une luminosité donnée. Les jetons sémantiques désignent des rôles, tels que la couleur utilisée pour les actions principales ou les états destructifs, et font référence à des primitives. Les jetons de composants, le cas échéant, désignent les valeurs utilisées par un composant spécifique et font référence à ses valeurs sémantiques. Cette organisation en couches facilite la gestion des thèmes, du mode sombre, des variantes de marque et des ajustements d'accessibilité : modifier la couche sémantique modifie le produit de manière cohérente, tandis qu'une simple liste de valeurs brutes nécessite de rechercher et de modifier chaque occurrence.

Le choix du nom est l'étape la plus complexe et la plus lourde de conséquences. Les jetons nommés d'après leur apparence, comme une couleur nommée « bleu » parce qu'elle est bleue, deviennent trompeurs dès que leur valeur change, et engendrent des situations absurdes, comme un jeton bleu ayant une valeur verte. Les jetons nommés d'après leur fonction conservent leur pertinence malgré les changements de marque et de thème. Une convention de nommage claire et documentée, validée avant le déploiement du système, est bien plus précieuse que les outils associés, car renommer les jetons après leur adoption est coûteux.

Les jetons prennent tout leur sens lorsqu'ils sont imposés plutôt que simplement disponibles. Si les développeurs peuvent encore saisir des valeurs arbitraires et les concepteurs choisir des couleurs hors palette, le système documente une intention plutôt qu'une réalité. Les règles de linting qui rejettent les valeurs non conformes aux jetons, les bibliothèques d'outils de conception qui restreignent les choix disponibles et les vérifications automatisées dans le pipeline de compilation permettent de transformer un ensemble de jetons en une contrainte effective. La distribution automatisée au format natif de chaque plateforme, afin que le Web, iOS et Android utilisent la même source, garantit la cohérence multiplateforme.

Les jetons permettent également de concrétiser les exigences d'accessibilité, au lieu de les laisser au stade d'idéal. Les rapports de contraste entre les couleurs de premier plan et d'arrière-plan peuvent être validés automatiquement pour chaque combinaison définie. Ainsi, une modification de palette non conforme est détectée dès la compilation, au lieu d'être découverte lors d'un audit des mois plus tard. Les tailles cibles minimales, les styles d'indicateurs de focus et les règles d'espacement peuvent être définis de la même manière. L'accessibilité passe ainsi d'une simple vérification ponctuelle, où elle dépend de la vigilance d'une personne, à une propriété systémique du système de conception. C'est la seule approche qui résiste à l'évolution d'un produit et des équipes. Elle permet également de constituer un registre fiable des décisions de conformité, un point crucial dans les secteurs où les obligations d'accessibilité font l'objet d'audits formels.

En pratique, les tokens constituent la couche fondamentale d'un système de conception plutôt qu'un raffinement optionnel, et ils sont particulièrement précieux dans les organisations où plusieurs équipes développent des interfaces qui doivent former un seul et même produit. Leur mise en place est une étape initiale normale. la conception des produits travail, avec les mécanismes de distribution et d'application appartenant à le développement de produitsPour les grandes organisations possédant plusieurs marques, régions ou gammes de produits partageant une infrastructure commune, cette couche permet une variation contrôlée sans avoir à maintenir des implémentations distinctes, ce qui explique sa récurrence constante. entreprise programmes.