Token Tooling: Style Dictionary
Transform and distribute design tokens across platforms using the Style Dictionary tool.
Token Tooling: Style Dictionary is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What is Style Dictionary?
Style Dictionary is an open-source build tool by Amazon that transforms a token JSON source into platform outputs: CSS custom properties, SCSS variables, iOS Swift constants, Android XML, and JavaScript/TypeScript modules — all from one source of truth.
Project Structure
Organize tokens in tokens/ directory as JSON or JSON5 files. Style Dictionary merges all files automatically. Separate files by category: tokens/color.json, tokens/spacing.json, tokens/typography.json.
Token JSON Format
Each token is a nested object with a value key and optional type, description, and comment fields. Style Dictionary flattens nesting into dot-notation names for output.
{
"color": {
"brand": {
"primary": { "value": "#3b82f6", "type": "color" }
}
}
}Configuration File
The config.json specifies sources (token files), platforms (web, ios, android), and transforms/formats per platform. Each platform can apply different transformations and output different file formats.
{
"source": ["tokens/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "dist/css/",
"files": [{"destination": "variables.css", "format": "css/variables"}]
}
}
}Transforms
Transforms modify token values during build: color/css formats colors as hex, size/rem converts px to rem, name/cti/kebab generates kebab-case names from nested category-type-item structure.
Formats
Formats determine output file content. Built-in: css/variables outputs a CSS :root block, scss/variables outputs SASS variables, javascript/module exports a JS object. Custom formats enable any output shape needed.
References Between Tokens
Reference other tokens using curly brace syntax: {"value": "{color.brand.primary}"}. Style Dictionary resolves references at build time, outputting concrete values. References create the alias-to-global mapping.
Custom Transforms
Register custom transforms to handle project-specific needs: strip alpha from colors, convert design tool opacity values, add vendor prefixes. Custom transforms slot into the build pipeline like built-ins.
Running the Build
Run npx style-dictionary build or add it to your npm build script. The output files go to configured buildPath directories. Commit generated files or generate them at build time in CI — both patterns are common.
Integrating with Figma
Tokens Studio for Figma syncs token JSON to a GitHub repository. Style Dictionary runs in CI when the JSON changes, generating updated CSS and platform files automatically. Design changes propagate to code without manual copy-paste.
Token Versioning
Version your token package in npm. Consumers pin to a version and upgrade deliberately. Changelogs document added, deprecated, and removed tokens. Semantic versioning communicates breaking changes versus safe updates.
Knowledge Check
What is the role of a "transform" in Style Dictionary?
Summary
Style Dictionary transforms a single token JSON source into platform-specific outputs via configurable transforms and formats. It enables Figma-to-code token sync, multi-platform consistency, and versioned token packages that teams can consume and upgrade deliberately.
Frequently asked questions
Is the “Token Tooling: Style Dictionary” lesson free?
Yes — the full text of “Token Tooling: Style Dictionary” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Token Tooling: Style Dictionary”?
Transform and distribute design tokens across platforms using the Style Dictionary tool. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Token Tooling: Style Dictionary” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- What Are Design Tokens
- Token Naming Conventions
- Implementing Multi-Brand Theming with CSS Variables
- Token Tooling: Style Dictionary