Token-tooling: Style Dictionary
Transformeer en verspreid design tokens over verschillende platforms met de tool Style Dictionary.
Token-tooling: Style Dictionary is een gratis CSS Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Wat is Style Dictionary?
Style Dictionary is een opensourcehulpmiddel voor het bouwen van Amazon dat een JSON-bron met tokens omzet in uitvoer voor platforms: aangepaste CSS-eigenschappen, SCSS-variabelen, iOS Swift-constanten, Android XML en JavaScript/TypeScript-modules — allemaal vanuit één bron van waarheid.
Projectstructuur
Organiseer tokens in de map tokens/ als JSON- of JSON5-bestanden. Style Dictionary voegt alle bestanden automatisch samen. Gebruik afzonderlijke bestanden per categorie: tokens/color.json, tokens/spacing.json, tokens/typography.json.
JSON-indeling voor tokens
Elke token is een genest object met een sleutel value en optionele velden type, description en comment. Style Dictionary vlakt de geneste structuur af tot namen met puntnotatie voor de uitvoer.
<pre class="json-block">{
"color": {
"brand": {
"primary": { "value": "#3b82f6", "type": "color" }
}
}
}</pre>Configuratiebestand
De config.json specificeert sources (tokenbestanden), platforms (web, ios, android) en transforms/formats per platform. Elk platform kan verschillende transformaties toepassen en verschillende bestandsindelingen uitvoeren.
<pre class="json-block">{
"source": ["tokens/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "dist/css/",
"files": [{"destination": "variables.css", "format": "css/variables"}]
}
}
}</pre>Transformaties
Transformaties wijzigen tokenwaarden tijdens het bouwproces: color/css geeft kleuren weer als hexadecimale waarden, size/rem zet px om naar rem en name/cti/kebab genereert namen in kebab-case vanuit een geneste categorie-type-item-structuur.
Indelingen
Indelingen bepalen de inhoud van uitvoerbestanden. Ingebouwd: css/variables voert een CSS-blok voor :root uit, scss/variables voert SASS-variabelen uit en javascript/module exporteert een JS-object. Met aangepaste indelingen kun je elke benodigde uitvoervorm maken.
Verwijzingen tussen tokens
Verwijs naar andere tokens met syntaxis met accolades: {"value": "{color.brand.primary}"}. Style Dictionary lost verwijzingen tijdens het bouwen op en voert concrete waarden uit. Verwijzingen maken de koppeling van aliassen aan globale tokens.
Aangepaste transformaties
Registreer aangepaste transformaties om projectspecifieke behoeften af te handelen: verwijder alpha uit kleuren, zet dekkingswaarden uit ontwerptools om en voeg leveranciersvoorvoegsels toe. Aangepaste transformaties passen net als ingebouwde transformaties in de bouwpijplijn.
Het bouwproces uitvoeren
Voer npx style-dictionary build uit of voeg dit toe aan je npm-buildscript. De uitvoerbestanden komen in de geconfigureerde mappen buildPath terecht. Leg gegenereerde bestanden vast of genereer ze tijdens het bouwen in CI — beide patronen komen vaak voor.
Integratie met Figma
Tokens Studio voor Figma synchroniseert token-JSON met een GitHub-opslagplaats. Style Dictionary wordt in CI uitgevoerd wanneer de JSON verandert en genereert automatisch bijgewerkte CSS- en platformbestanden. Ontwerpwijzigingen worden zonder handmatig kopiëren en plakken doorgevoerd in de code.
Versiebeheer van tokens
Geef je tokenpakket een versie in npm. Afnemers leggen een versie vast en werken doelgericht bij. Wijzigingslogboeken documenteren toegevoegde, verouderde en verwijderde tokens. Semantische versienummering maakt onderscheid tussen wijzigingen die iets breken en veilige updates.
Kennistoets
Wat is de rol van een "transform" in Style Dictionary?
Samenvatting
Style Dictionary zet één JSON-bron met tokens via configureerbare transformaties en indelingen om in platformspecifieke uitvoer. Het maakt synchronisatie van tokens van Figma naar code mogelijk, zorgt voor consistentie op meerdere platforms en ondersteunt versiebeheer van tokenpakketten die teams doelgericht kunnen gebruiken en bijwerken.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Token-tooling: Style Dictionary” gratis?
Ja — de volledige tekst van “Token-tooling: Style Dictionary” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Token-tooling: Style Dictionary”?
Transformeer en verspreid design tokens over verschillende platforms met de tool Style Dictionary. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Token-tooling: Style Dictionary”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Wat design tokens zijn
- Naamgevingsconventies voor tokens
- Thema's voor meerdere merken implementeren met CSS-variabelen
- Token-tooling: Style Dictionary