Outils pour jetons : Style Dictionary
Transformez et distribuez des jetons de conception sur différentes plateformes à l’aide de l’outil Style Dictionary.
Outils pour jetons : Style Dictionary est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 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 CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Qu’est-ce que Style Dictionary ?
Style Dictionary est un outil de compilation open source d’Amazon qui transforme une source JSON de jetons en sorties adaptées à différentes plateformes : propriétés personnalisées CSS, variables SCSS, constantes Swift pour iOS, XML pour Android et modules JavaScript/TypeScript, le tout à partir d’une source de référence unique.
Structure du projet
Organisez les jetons dans le répertoire tokens/ sous forme de fichiers JSON ou JSON5. Style Dictionary fusionne automatiquement tous les fichiers. Séparez les fichiers par catégorie : tokens/color.json, tokens/spacing.json, tokens/typography.json.
Format JSON des jetons
Chaque jeton est un objet imbriqué contenant une clé value et, facultativement, les champs type, description et comment. Style Dictionary aplatit l’imbrication en noms à points pour la sortie.
<pre class="json-block">{
"color": {
"brand": {
"primary": { "value": "#3b82f6", "type": "color" }
}
}
}</pre>Fichier de configuration
Le fichier config.json indique les sources (fichiers de jetons), les plateformes (web, iOS, Android) ainsi que les transformations et les formats pour chaque plateforme. Chaque plateforme peut appliquer des transformations différentes et produire des formats de fichiers différents.
<pre class="json-block">{
"source": ["tokens/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "dist/css/",
"files": [{"destination": "variables.css", "format": "css/variables"}]
}
}
}</pre>Transformations
Les transformations modifient les valeurs des jetons pendant la compilation : color/css formate les couleurs en hexadécimal, size/rem convertit les px en rem, et name/cti/kebab génère des noms en kebab-case à partir d’une structure imbriquée catégorie-type-élément.
Formats
Les formats déterminent le contenu du fichier de sortie. Formats intégrés : css/variables produit un bloc CSS :root, scss/variables produit des variables SASS et javascript/module exporte un objet JS. Les formats personnalisés permettent de produire toute structure de sortie nécessaire.
Références entre les jetons
Référencez d’autres jetons à l’aide de la syntaxe entre accolades : {"value": "{color.brand.primary}"}. Style Dictionary résout les références au moment de la compilation et produit des valeurs concrètes. Les références établissent la correspondance entre les alias et les jetons globaux.
Transformations personnalisées
Enregistrez des transformations personnalisées pour répondre aux besoins propres au projet : supprimer le canal alpha des couleurs, convertir les valeurs d’opacité des outils de conception ou ajouter des préfixes de navigateur. Les transformations personnalisées s’intègrent à la chaîne de compilation comme les transformations intégrées.
Exécuter la compilation
Exécutez npx style-dictionary build ou ajoutez cette commande à votre script de compilation npm. Les fichiers de sortie sont placés dans les répertoires buildPath configurés. Validez les fichiers générés ou générez-les au moment de la compilation dans CI : les deux méthodes sont courantes.
Intégration avec Figma
Tokens Studio for Figma synchronise le JSON des jetons avec un dépôt GitHub. Style Dictionary s’exécute dans CI lorsque le JSON est modifié et génère automatiquement les fichiers CSS et les fichiers propres à chaque plateforme. Les changements de conception sont ainsi transmis au code sans copier-coller manuel.
Gestion des versions des jetons
Versionnez votre paquet de jetons dans npm. Les utilisateurs se fixent sur une version et effectuent volontairement les mises à niveau. Les journaux des modifications documentent les jetons ajoutés, obsolètes et supprimés. Le versionnage sémantique indique les changements incompatibles par opposition aux mises à jour sans risque.
Vérification des connaissances
Quel rôle joue une « transformation » dans Style Dictionary ?
Résumé
Style Dictionary transforme une source JSON unique de jetons en sorties propres à chaque plateforme grâce à des transformations et des formats configurables. Il permet de synchroniser les jetons de Figma avec le code, d’assurer la cohérence entre les plateformes et de gérer des paquets de jetons versionnés que les équipes peuvent utiliser et mettre à niveau volontairement.
Questions Fréquemment Posées
La leçon « Outils pour jetons : Style Dictionary » est-elle gratuite ?
Oui — le texte complet de « Outils pour jetons : 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 CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Outils pour jetons : Style Dictionary » ?
Transformez et distribuez des jetons de conception sur différentes plateformes à l’aide de l’outil Style Dictionary. Tu pratiques CSS 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 CSS Academy ?
Aucune expérience préalable n'est requise. CSS 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 4 sur 4.
Combien de temps prend la leçon « Outils pour jetons : 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 CSS Academy ?
Oui. Chaque leçon CSS 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
- Que sont les jetons de conception
- Conventions de nommage des jetons
- Mettre en œuvre des thèmes multimarques avec des variables CSS
- Outils pour jetons : Style Dictionary