Les design tokens sont le vocabulaire commun entre designers et développeurs. Au lieu que le designer dise “ce bleu” et le développeur le code en #3b82f6 dans dix fichiers différents, un token --color-primary est défini une fois et utilisé partout. Plus besoin de chercher quelle teinte de bleu correspond à celle de la maquette : le token est la vérité.
Cohérence Design
100%
Une seule source de vérité pour couleurs, espacements, typographie
Temps de maintenance
-40%
Réduction du temps passé à synchroniser design et code
i
Information
40 % de temps gagné sur la synchronisation design/développement chez les entreprises avec un design system structuré par tokens (Forrester, 2024).
Le Contexte
Pourquoi les Design Tokens ?
📖
Quand l'utiliser
Dès 3+ fichiers CSS partagés ou 2+ thèmes à maintenir, les tokens deviennent indispensables pour garantir la cohérence visuelle sans effort manuel.
🧠
Analogie
Les design tokens sont le dictionnaire commun de votre équipe : sans lui, chaque développeur traduit « ce bleu » à sa manière. Avec, tout le monde parle la même langue visuelle : et les changements se font en un clic.
Sans design tokens
Cohérence fragile
- Valeurs hardcodées dans chaque fichier
- Incohérences visuelles entre pages
- Corrections manuelles interminables
- Chaque thème = refonte partielle
Avec design tokens
Système vivant
- Tokens centralisés dans un seul endroit
- Modification en un clic, propagation automatique
- Cohérence garantie partout
- Thèmes dynamiques par alias
Chaîne de tokens
Un design token peut pointer vers un autre. Cette chaîne crée une hiérarchie : primitif → alias sémantique → composant.
📖
Concept clé
Un alias est un token qui pointe vers un autre token avec un nom sémantique. Quand la couleur primaire change, vous modifiez un seul alias et tout le design system suit.
🧠
Analogie
C’est comme une carte de visite :
- le numéro SIRET (token primitif) est unique et technique : personne ne le retient, mais il est la source de vérité.
- Le nom de l’entreprise (alias) est ce que les gens utilisent au quotidien : plus mémorable, plus lisible.
- Et la carte (composant) apparaît dans différents contextes (meeting, email, signature) sans jamais perdre son identité.
Analyse Technique : Initié
Chaîne des Tokens
Token#22c55e
→Alias—green
→ComposantButton
/* Tokens primitifs (valeurs brutes) */
--color-blue-500: #3b82f6;
--color-green-500: #22c55e;
/* Alias sémantiques (usage métier) */
--color-primary: var(--color-blue-500);
--color-success: var(--color-green-500);
--color-link: var(--color-primary);
--color-link-hover: var(--color-blue-500);L’avantage : si la couleur primaire passe du bleu au violet, vous changez un seul token (--color-primary) et tout le design system suit. Les alias découplent la valeur de son usage.
Catégories de tokens
Couleurs
:root {
/* Primaires */
--color-primary-50: #f0f9ff;
--color-primary-100: #e0f2fe;
--color-primary-500: #0ea5e9;
--color-primary-600: #0284c7;
--color-primary-700: #0369a1;
/* Sémantiques */
--color-success: var(--color-primary-500);
--color-error: #ef4444;
--color-warning: #f59e0b;
--color-info: #3b82f6;
}Typographie
:root {
/* Fontes */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'Fira Code', monospace;
/* Tailles */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
/* Interlignes */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
}Espacements
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
}Bordures/Ombres
:root {
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}Convention de nommage
Une bonne convention rend les tokens lisibles et prévisibles.
🧠
Analogie
C’est comme un nom de fichier :
doc1_final_v2.docxne veut rien dire,- mais
2024-02-13_design-tokens_guide.mdraconte une histoire.
Même logique pour les tokens :
--blueest un mystère,--color-primary-500est un langage commun.
Règle d'or : contexte → propriété → échelle
--color-primary-500
--color-primary-600
--size-font-lg
--size-space-4
--shadow-elevation-mdChaque token suit le pattern {catégorie}-{propriété}-{échelle/variante}. Cette convention permet de déduire le token sans le mémoriser.
Noms aléatoires
Chaos de nommage
—blue: quelle nuance ?—big: big en quoi ?—marge: quelle valeur exacte ?- Chaque développeur invente les siens
Convention structurée
Convention prévisible
—color-primary-500: catégorie + propriété + échelle—text-lg: le token se devine—space-4: valeur en rem, standardisée- Un seul système = zéro ambiguïté
Tokens dérivés
Un token peut servir de base pour générer automatiquement des variations. Quand la base change, toutes les variations suivent : sans toucher au code.
📖
Concept clé
Le composant Notice utilise un seul token couleur. Le background, la border et l’icône sont des dérivés avec des opacités différentes. Changer la base met à jour tout le composant.
🧠
Analogie
C’est comme une peinture diluée : le pigment de base est la couleur pure (100%). En la diluant à 10%, vous obtenez un lavis subtil pour le fond. À 30%, une demi-teinte pour la bordure. À 40%, une teinte intermédiaire pour l’icône. Chaque variation est calculée automatiquement à partir de la base
Changez le pigment, et toutes les dilutions suivent.
:root {
/* Token base */
--color-notice: #06b6d4; /* cyan-500 */
/* Dérivés automatiques */
--color-notice-bg: color-mix(in srgb, var(--color-notice) 10%, transparent);
--color-notice-border: color-mix(in srgb, var(--color-notice) 30%, transparent);
--color-notice-text: var(--color-notice);
--color-notice-icon: color-mix(in srgb, var(--color-notice) 40%, transparent);
} Sans tokens dérivés
Valeurs en dur
bg-cyan-500/10: hardcodéborder-cyan-500/30: hardcodé- Changer la couleur = modifier 4 endroits
- Risque d’incohérence
Avec tokens dérivés
Base + dérivés
—color-notice: un seul token base—color-notice-bg: calculé automatiquement- Changer la couleur = modifier 1 seule ligne
- Cohérence garantie
?
Variables CSS
Comment transformer ces tokens en variables CSS dynamiques, avec compilation et dark mode automatique.
Bientôt disponible
En cours de rédaction
Cet article est en cours de rédaction. Inscrivez-vous à la newsletter pour être averti de sa publication.
Newsletter
Un récap par mois de ce qui a vraiment compté. Pas de spam, promis.
Tokens en JS/TS
Les tokens ne sont pas réservés au CSS. En JavaScript/TypeScript, ils deviennent des constantes typées.
🧠
Analogie
Les tokens en JS/TS, c’est comme une recette de cuisine : au lieu de mettre “un peu de sel” et “assez de farine”, vous avez des quantités exactes (100g de sucre, 2 œufs). Le compilateur TypeScript vérifie que vous n’avez pas utilisé une cuillère là où il fallait un verre : zéro erreur à l’exécution.
export const tokens = {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9',
600: '#0284c7',
},
semantic: {
success: '#0ea5e9',
error: '#ef4444',
warning: '#f59e0b',
},
},
spacing: {
1: '0.25rem',
2: '0.5rem',
4: '1rem',
6: '1.5rem',
8: '2rem',
},
radius: {
sm: '0.25rem',
md: '0.375rem',
lg: '0.5rem',
full: '9999px',
},
} as const;Workflow tokens
1
Définir dans Figma
Le designer crée les tokens dans Figma via Tokens Studio ou variables locales.
2
Exporter en JSON
Le plugin exporte les tokens dans un fichier JSON structuré.
3
Générer le code
Style Dictionary ou SpeeCZ transforme le JSON en variables CSS + fichiers JS/TS.
4
Intégrer dans le projet
Les tokens générés sont importés dans le projet et utilisés dans tous les composants.
5
Auditer et itérer
Les tokens évoluent avec le design system. Chaque changement est versionné.
i
3 workflows possibles
Workflow simple : vous écrivez les tokens directement en CSS, pas besoin d’outil de design.
Workflow design → CSS : Figma ou Penpot exporte directement le fichier CSS, pas besoin de JSON ni d’export.
Workflow complet : Figma → JSON → Style Dictionary → CSS : pour les projets multi-plateformes (web, iOS, Android).
Des zones d'ombre ?
Quelle est la différence entre variable CSS et design token ?
Une variable CSS est le véhicule technique. Un design token est le concept : il porte une intention sémantique ('couleur primaire', 'espacement large'). Le token est défini dans Figma, exporté en JSON, puis transformé en variable CSS. Toute variable CSS n'est pas un token, mais tout token finit en variable CSS.
Dois-je tokeniser absolument tout ?
Non. Tokenisez ce qui est réutilisé et doit rester cohérent : palette de couleurs, typographie, espacements, rayons, ombres. Ne tokenisez pas une couleur utilisée une seule fois ou une marge ponctuelle. La règle : si vous l'utilisez 3 fois ou plus, créez un token.
Comment gérer les thèmes (clair/sombre) avec les tokens ?
Utilisez des modes ou des sets de tokens. Chaque propriété sémantique (
--color-bg, --color-text) a une valeur différente selon le thème. Les tokens primitifs restent les mêmes, seuls les alias changent. Voir pour l'implémentation.Style Dictionary ou SpeeCZ ?
Style Dictionary (Amazon) est le plus mature : open-source, extensible, supporte CSS/JS/Swift/Android. SpeeCZ est plus orienté équipe design avec Figma. Le choix dépend : purement développeur → Style Dictionary, designer+dev → SpeeCZ.
Checklist Design Tokens
Mise en place des Tokens
0/10Vos progrès sont sauvegardés localement sur votre appareil. Aucune donnée n'est collectée. La durée de conservation dépend de la durée de rétention des données de votre navigateur.
?
Composants UI
Vos design tokens sont en place : mais comment les intégrer dans un Atomic Design avec documentation automatique ?
Découvrez l'article complet
en un clic
"
Les design tokens sont le vocabulaire commun entre designers et développeurs. Sans eux, chaque interface parle une langue différente.
Gaëtan Solis
Fondateur, Bao-Link
Orfèvre Digital
Prêt à lancer votre projet ?
Je donne vie à vos idées en créant des sites web et applications intuitifs, esthétiques et fonctionnels.
Disponible
Articles Connexes
0+4
Brouillon
Prérequis
Variables CSS Avancées : Dark Mode, Thèmes Dynamiques et Custom Properties
Maîtrisez les variables CSS avancées : thème dark/light automatique, fallbacks robustes, manipulation JavaScript et cas d'usage concrets pour des thèmes dynamiques.
Brouillon
Connexe
Figma pour les Développeurs : Du Design au Code
Maîtrisez le workflow Figma : Auto Layout, Dev Mode, design tokens et extraction de code. Guide pratique pour passer de la maquette au composant sans friction.
Cluster
Brouillon
Connexe
Composants React
Créez des composants React réutilisables avec les patterns Atom/Molecule/Organism. Maîtrisez les props, le state et la composition de composants.
Brouillon
Connexe
Composants Astro
Maîtrisez les composants Astro (.astro) avec leurs slots, props et patterns. Créez des composants performants avec zero JavaScript par défaut.
Inspiration
Découvrez d'autres projets
Développement 21 juillet 2026
Bao-Link Documentation : De WordPress à un Écosystème Centré Utilisateur
Le projet Bao-Link raconte l'évolution du site et de ses outils: la création d'un premier site WordPress vitrine, puis le passage à Astro avec un site 100% sur mesure, sans template, centré sur le SEO et l'expérience utilisateur ainsi que les projets liés : diag-application et personas.
Astro WordPress # Migration
Voir le projet 
Développement 16 juillet 2026
ACM : Refonte E-commerce avec Astro, Express & WordPress
Étude de cas complète : migration d'un site e-commerce WordPress/WooCommerce vers une architecture Astro SSR + proxy Express, avec déploiement et optimisation SEO.
Astro Express WordPress
Voir le projet 
Développement 16 juillet 2026
Soair : La Transition Numérique Complète
Étude de cas complète : création d'un site WordPress professionnel puis migration vers Hugo pour des performances optimales et un SEO décuplé.
# Soair WordPress Hugo
Voir le projet 