Design Snap
Qu'est-ce qu'un design token ?
Un design token est une valeur nommée qui stocke une seule décision de design — une couleur, une taille de police, un pas d'espacement, un radius, une ombre. Plutôt que d'écrire #2563eb en dur à cinquante endroits, vous la nommez une fois color-primary et vous référencez ce nom partout. Changez la valeur une fois, et tous les écrans qui référencent le nom changent avec elle.
Écrit par le développeur de Design Snap · Noté 5,0/5 sur le Chrome Web Store · lire les avis
Les trois couches de design tokens
Presque tous les systèmes de tokens matûrs séparent les valeurs brutes, l'intention et l'usage. C'est cette superposition qui transforme un changement de marque en une ligne modifiée plutôt qu'en une semaine de rechercher-remplacer.
1 · Tokens primitifs
Des valeurs brutes aux noms neutres : blue-600 : #2563eb, space-4 : 16px. Ils décrivent ce qu'une chose est, jamais où elle sert. Une couche primitive, c'est au fond une palette bien nommée.
2 · Tokens sémantiques
L'intention, qui pointe vers les primitifs : color-primary → blue-600, color-danger → red-600. C'est la couche que les composants devraient consommer — elle survit à un changement de couleur de marque, puisque seule la référence en dessous bouge.
3 · Tokens de composant
Un usage précis : button-background → color-primary. Optionnel, et utile seulement quand un composant doit vraiment diverger. Trop nombreux, ils recréent le problème que les tokens devaient résoudre.
À quoi ressemble concrètement un design token
La même décision — « notre bleu principal est #2563eb » — dans les trois formats que vous rencontrerez le plus.
En custom property CSS — ce que lit le navigateur :
:root {
--color-primary: #2563eb;
--radius-md: 8px;
}En clé de thème Tailwind — ce que lisent vos classes utilitaires :
theme: {
extend: {
colors: { primary: '#2563eb' },
borderRadius: { md: '8px' },
},
}En token Style Dictionary — la source indépendante de la plateforme qu'une étape de build transforme en tout ce qui précède :
{
"color": { "primary": { "value": "#2563eb", "type": "color" } },
"radius": { "md": { "value": "8px", "type": "dimension" } }
}Trois syntaxes, une seule décision. C'est toute la différence entre un token et une valeur en dur : le token est la décision, la syntaxe n'est que sa livraison.
Pourquoi les équipes adoptent les design tokens
Une source, toutes les plateformes
Un seul fichier de tokens produit les sorties CSS, Tailwind, iOS, Android et Figma. Le web et le natif cessent de diverger parce qu'ils cessent de détenir deux copies de la même décision.
Le theming n'est plus une réécriture
Mode sombre, client en marque blanche, habillage saisonnier : on échange les valeurs derrière la couche sémantique et tous les composants suivent. Aucun composant n'a besoin de savoir qu'un thème existe.
Design et code partagent un vocabulaire
Quand un style Figma et une variable CSS portent le même nom, la passation devient une consultation plutôt qu'une négociation.
Les agents IA arrêtent d'inventer des valeurs
Donnez une liste de tokens à Claude Code ou Cursor et il écrit bg-primary au lieu de deviner bg-[#2664ec]. Les décisions nommées sont le contexte dont un agent a besoin pour rester dans la marque.
Comment extraire les design tokens d'un site existant
La plupart des sites ne publient aucun fichier de tokens — mais tous exposent leurs décisions dans leurs styles rendus. On peut les relire en une seconde environ.
Extraire la page
Ouvrez n'importe quel site et appuyez sur Extract. Design Snap lit les styles calculés dans votre navigateur : les couleurs classées par fréquence d'usage réelle, les familles de polices personnalisées, les radius et ombres dédupliqués, et chaque custom property déclarée sur
:root.Lire les couches
Traitez la palette classée par usage comme vos primitifs, et les rôles que Design Snap mappe — background, foreground, primary, muted, border — comme votre couche sémantique. Ce qu'une page utilise le plus est presque toujours ce qu'elle signifie le plus.
Exporter dans votre format
Copiez le résultat en thème
tailwind.config.js, en bloc@themeTailwind v4, en variables shadcn/ui pourglobals.css, en JSON Style Dictionary v3, en tokens Figma, ou en prompt pour Claude, Cursor ou v0.
Une réserve honnête : ce que vous extrayez est un instantané de ce qu'une page rend, pas l'intention qui l'a produite. Une valeur que le navigateur complète par un fallback reste une valeur réellement rendue, mais elle n'a jamais été une décision délibérée — Design Snap les signale plutôt que de les faire passer pour des couleurs de marque.
Design tokens — FAQ
Un design token est une valeur nommée qui stocke une seule décision de design — une couleur, une taille de police, un pas d'espacement, un radius, une ombre. Plutôt que de répéter #2563eb dans tout un projet, vous la définissez une fois sous le nom color-primary et vous référencez ce nom. Le nom est stable, la valeur ne l'est pas : une seule modification se propage partout où le token est utilisé.
Une variable CSS est une façon d'implémenter un design token dans le navigateur ; le token, lui, est la décision, pas la syntaxe. Le même token peut être émis en custom property CSS, en clé de thème Tailwind, en constante Swift, en ressource XML Android ou en JSON. Les tokens sont indépendants du format par définition — c'est toute la raison d'être d'outils comme Style Dictionary, qui produisent tous les formats à partir d'une source unique.
Trois couches. Les tokens primitifs nomment des valeurs brutes (blue-600 : #2563eb). Les tokens sémantiques nomment l'intention en pointant vers les primitifs (color-primary : {blue-600}). Les tokens de composant nomment un usage précis (button-background : {color-primary}). C'est cette superposition qui rend un changement de marque bon marché : on modifie un primitif au lieu de fouiller chaque composant.
Pas toujours. Pour une landing page maintenue par une seule personne, des variables CSS dans un unique bloc :root suffisent. Les tokens deviennent rentables quand les mêmes décisions doivent rester synchronisées sur plusieurs surfaces — une application et un site vitrine, un thème clair et un thème sombre, une bibliothèque de composants utilisée par plusieurs équipes, ou un fichier de design qui doit correspondre à la production.
En les relisant depuis la page rendue. Tout site expose ses décisions dans ses styles calculés, qu'il les appelle des tokens ou non : les couleurs réellement utilisées et à quelle fréquence, les vraies familles de polices, les radius et ombres qui se répètent, et chaque custom property déclarée sur :root. Design Snap fait exactement cela en un clic, puis exporte le résultat en config Tailwind, variables shadcn/ui, JSON Style Dictionary, tokens Figma ou prompt pour un agent de code IA.
Non. Les tokens sont le vocabulaire ; un design system est toute la langue — les tokens plus les composants, les patterns, les règles d'usage et la documentation. Les tokens sont généralement la première couche qu'une équipe formalise, parce que c'est la plus petite unité utile et que tous les composants finissent par y faire référence.
Mettre les tokens au travail
Générateur de thème Tailwind
Transformez les vraies valeurs d'un site en tailwind.config.js prêt à coller.
Générateur de thème shadcn/ui
Mappez une palette sur les rôles sémantiques shadcn/ui, prête pour globals.css.
Export Style Dictionary
Obtenez des tokens v3 standard pour un vrai pipeline de build.
Meilleurs extracteurs de tokens
Les outils qui lisent les tokens d'une page en direct, comparés.