Que sont les jetons de conception

Les jetons de conception sont des variables nommées qui enregistrent des choix de conception — couleurs, espacements, typographie, ombres — dans un format indépendant de la technologie. Ils font le lien entre les outils de conception et le code, en garantissant la cohérence sur toutes les plateformes.

Sans jetons, les valeurs sont dupliquées dans les bases de code CSS, iOS et Android. Une source de vérité unique pour les jetons signifie que la modification d'une couleur de marque met à jour toutes les plateformes simultanément.

Catégories courantes : couleur (marque, sémantique, neutre), typographie (famille de polices, taille, graisse, hauteur de ligne), espacement (grille de 4px), rayon, ombre et animation (durée, fonction d'accélération).

Les jetons sont stockés au format JSON, YAML ou dans le Design Token Format du W3C. Chaque jeton possède un nom, une valeur, un type et une description facultative. Des transformations les convertissent en sorties propres à chaque plateforme.

Les jetons globaux sont des valeurs brutes : color-blue-500: #3b82f6. Les jetons d'alias font référence aux jetons globaux de manière sémantique : color-action-primary: {color-blue-500}. Les composants font référence aux jetons d'alias, et non aux valeurs brutes.

Les propriétés personnalisées CSS constituent la sortie naturelle des jetons pour le Web. Un jeton nommé spacing-4 devient --spacing-4: 1rem et est utilisé partout dans la feuille de styles avec margin: var(--spacing-4).

L'extension Figma Tokens et Tokens Studio synchronisent les jetons de conception entre Figma et les dépôts de code. Les concepteurs et les développeurs partagent le même vocabulaire de jetons, ce qui élimine les erreurs de traduction lors de la transmission.

Les jetons évoluent : rendez obsolètes les anciennes valeurs sans interrompre les utilisateurs en fournissant des correspondances de migration. La gestion sémantique des versions des packages de jetons signale les changements incompatibles aux équipes qui les utilisent.

Le même fichier JSON de jetons produit des variables CSS pour le Web, des constantes Swift pour iOS et des ressources XML pour Android. Un seul fichier de définition élimine les divergences entre plateformes dans les choix de conception.

Commencez par les jetons de couleur et d'espacement. Remplacez les valeurs codées en dur fichier par fichier. Effectuez une recherche dans la base de code des valeurs hexadécimales brutes et des valeurs littérales en pixels afin de repérer les choix de conception encore codés en dur.

Les jetons d'alias permettent la thématisation : remplacez le jeton global vers lequel pointe un alias, et tout le thème change sans modifier le code des composants. Les thèmes clair, sombre et de marque dérivent tous de la même couche d'alias.

Quelle est la différence entre un jeton global et un jeton d'alias ?

Les jetons de conception sont des variables nommées qui encodent des choix de conception dans un format indépendant de la plateforme. Les jetons globaux contiennent des valeurs brutes ; les jetons d'alias leur donnent une signification sémantique. Ensemble, ils permettent de créer des systèmes de conception cohérents, faciles à maintenir et multiplateformes.