Qu'est-ce qu'un 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.

Pourquoi nommer une valeur

Prenons la couleur des boutons principaux. Écrite directement, elle apparaît sous la forme #2563EB dans une feuille de styles, comme un champ hexadécimal dans un remplissage Figma, et comme une chaîne dans ce qu'un développeur a tapé la semaine dernière. Trois copies, sans aucun lien entre elles.

Sous forme de jeton, elle n'apparaît qu'une fois, sous un nom :

--color-action-primary: #2563EB;

Tout le reste renvoie à ce nom. Vous changez la valeur une fois et tous les usages suivent. Cette indirection est toute l'idée, et le reste en découle.

Ce que les jetons couvrent en général

Couleur : palettes, échelles et rôles sémantiques comme le fond, la bordure, le texte et les états
Typographie : familles, tailles, graisses, interlignage, interlettrage
Espacement : une échelle cohérente, généralement sur une base de 4px ou 8px
Rayon et épaisseur de bordure
Ombre et élévation
Mouvement : durées et courbes d'accélération
Points de rupture et dimensions de mise en page

Les jetons ne sont pas des variables

La distinction compte. Une variable CSS est un mécanisme. Un jeton de design est une décision qui se trouve être exprimée par ce mécanisme.

La différence pratique, c'est la portabilité. Un jeton existe indépendamment de toute technologie, et c'est pourquoi le même ensemble peut être produit sous forme de propriétés personnalisées CSS, de configuration Tailwind, de variables Figma, de Swift ou de Kotlin. S'il n'existe que comme une ligne de CSS, c'est une variable.

Formats

Le Design Tokens Community Group, au sein du W3C, publie un format JSON conçu comme un échange commun entre outils. Il donne à chaque jeton un $value et un $type :

{
  "color": {
    "action": {
      "primary": { "$value": "#2563EB", "$type": "color" }
    }
  }
}

L'adoption est inégale mais progresse, et c'est ce qui se rapproche le plus d'un format d'échange neutre entre outils de design et chaînes de build.

Ce que Flash DSM apporte ici

Flash DSM génère un ensemble complet de jetons à partir d'une phrase, de l'URL d'un site, d'un fichier Figma ou d'une capture, puis l'exporte en propriétés personnalisées CSS, configuration Tailwind, Tokens Studio JSON ou variables Figma.