Design tokens
Les design tokens sont les variables atomiques d’un design system — couleurs, espacements, typographies, ombres — stockées dans un format neutre (JSON, YAML) et consommées par le code, Figma et la documentation.
Qu'est-ce que design tokens ?
Un token n’est pas une valeur isolée mais une décision nommée. Plutôt que d’écrire #FF6A2C en dur partout, on définit le token "color.brand.primary" qui pointe vers cette valeur. Si la marque change de couleur, on met à jour un seul endroit, tout le produit suit.
Les tokens se structurent en trois niveaux : primitifs (color.orange.500 = #FF6A2C), sémantiques (color.action.primary = color.orange.500), et composants (button.primary.background = color.action.primary). Cette pyramide permet de changer une marque sans casser la sémantique.
Le standard émergent est le Design Tokens Format spec du W3C, supporté par Figma Variables, Style Dictionary, et Tokens Studio. En 2026, tout design system sérieux livre ses tokens en JSON exportables vers CSS, iOS, Android et React Native — une seule source de vérité pour toutes les plateformes.
Le design system Spectrum d’Adobe publie ses tokens en open source : color.gray.200, spacing.300, font.size.heading-l. Chaque token a une valeur par mode light/dark et par densité (compact, regular, spacious).
On parle de design tokens en design ops, en frontend engineering et dans tout projet multi-plateforme ou multi-thème.
Mettre ce concept en pratique avec Eufya
Eufya applique ces principes automatiquement dans son pipeline 5-agents. Brief, scoring, génération, audit qualité. 3 crédits gratuits à l'inscription.