Jetons de conception avec Style Dictionary
Définissez les jetons de couleur, d’espacement et de typographie en JSON, puis transformez-les avec Style Dictionary en variables CSS, constantes JS ou formats iOS/Android.
Jetons de conception avec Style Dictionary est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Que sont les jetons de conception ?
Les jetons de conception sont les valeurs primitives nommées d'un système de conception : couleurs, espacement, tailles de police, rayons de bordure et ombres. Ils constituent la référence unique : chaque composant en déduit ses styles.
Pourquoi les jetons sont importants
Les jetons dissocient les décisions de conception de l'implémentation. Remplacez une seule fois color.primary du bleu par le vert, et chaque composant qui l'utilise est mis à jour. Ils permettent également de fournir la même conception sur le Web, iOS et Android.
Stockage des jetons
Stockez les jetons au format JSON ou YAML — un format neutre que les outils de toutes les plateformes peuvent consommer. JSON est le format le plus courant.
// tokens/color.json
{
"color": {
"brand": {
"primary": { "value": "#2563eb" },
"secondary": { "value": "#7c3aed" }
},
"text": {
"default": { "value": "#111827" },
"muted": { "value": "#6b7280" }
}
}
}Style Dictionary
Style Dictionary (Amazon) est l'outil de compilation de référence pour les jetons de conception. Il lit les jetons et les transforme en plusieurs formats de sortie : variables CSS, SCSS, constantes JS, Swift pour iOS et XML pour Android.
npm install -D style-dictionaryConfiguration
Créez style-dictionary.config.js pour décrire les jetons d'entrée et les plateformes de sortie.
// style-dictionary.config.js
module.exports = {
source: ['tokens/**/*.json'],
platforms: {
css: {
transformGroup: 'css',
buildPath: 'build/css/',
files: [{ destination: 'tokens.css', format: 'css/variables' }]
},
js: {
transformGroup: 'js',
buildPath: 'build/js/',
files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
},
ios: {
transformGroup: 'ios',
buildPath: 'build/ios/',
files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
}
}
};Exécuter la compilation
Exécutez le CLI pour générer toutes les plateformes.
npx style-dictionary build
# Output:
# build/css/tokens.css — CSS variables
# build/js/tokens.js — JS constants
# build/ios/Tokens.swift — Swift constantsSortie CSS générée
Variables CSS avec un schéma de nommage cohérent (kebab-case avec espace de noms).
:root {
--color-brand-primary: #2563eb;
--color-brand-secondary: #7c3aed;
--color-text-default: #111827;
--color-text-muted: #6b7280;
}Sortie JS générée
Objet JS à utiliser dans du code JS/TS (configuration Tailwind, CSS-in-JS).
export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';Conventions de nommage des jetons
Utilisez des noms sémantiques (color.primary) plutôt que des noms littéraux (bleu-500). Les jetons sémantiques permettent de modifier les valeurs sans les renommer. Système à deux niveaux : palette littérale (bleu-500) → alias sémantique (principal).
{
"color": {
"palette": {
"blue-500": { "value": "#2563eb" }
},
"brand": {
"primary": { "value": "{color.palette.blue-500.value}" }
}
}
}Thématisation avec des jetons
Construisez plusieurs plateformes avec des entrées différentes pour prendre en charge les thèmes (clair/sombre) : les mêmes noms, des valeurs différentes.
// Light theme:
--color-bg: white;
--color-text: black;
// Dark theme:
--color-bg: #111;
--color-text: white;Catégories de jetons
Catégories courantes : couleur, espacement, typographie (famille de polices, taille, hauteur de ligne, graisse), bordure (rayon, largeur), ombre, transition (durée, fonction d'accélération), indice z et point de rupture.
Outils de registre des jetons
Au-delà de Style Dictionary : Tokens Studio (extension Figma), Specify, Supernova. Ces outils permettent aux concepteurs de gérer les jetons dans Figma et de les synchroniser automatiquement avec la base de code.
Vérification rapide
Quel est le principal avantage de l'utilisation de jetons de conception avec Style Dictionary ?
Récapitulatif : jetons de conception
Les jetons sont des valeurs primitives nommées (couleur, espacement, typographie) et constituent la référence unique d'un système de conception. Stockez-les au format JSON. Style Dictionary les transforme en variables CSS, JS, iOS et Android. Préférez le nommage sémantique (principal) au nommage littéral (bleu-500). Deux niveaux : palette → alias sémantique. Les thèmes sont obtenus avec des compilations distinctes. Synchronisez-les depuis Figma avec Tokens Studio.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « Jetons de conception avec Style Dictionary » est-elle gratuite ?
Oui — le texte complet de « Jetons de conception avec Style Dictionary » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Jetons de conception avec Style Dictionary » ?
Définissez les jetons de couleur, d’espacement et de typographie en JSON, puis transformez-les avec Style Dictionary en variables CSS, constantes JS ou formats iOS/Android. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Jetons de conception avec Style Dictionary » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Storybook : stories, contrôles et documentation
- Jetons de conception avec Style Dictionary
- Gestion des versions et publication sur npm
- Utiliser un système de conception