About Style Dictionary
Style Dictionary is an open source build tool that exports design tokens to many platforms. You write tokens once in a shared format and generate files for each target.
What it does
The tool reads token files, such as JSON that follows the Design Tokens Community Group format. It then outputs values for CSS, JavaScript, iOS, Android, HTML and style documentation. It can also produce files such as Sketch resources. Custom output formats can be added when a team needs something the built-in ones do not cover. A live demo and a converter on the site help you test a token set before adding the tool to a project.
Key features
- Exports CSS, JavaScript, iOS and Android
- Reads the Design Tokens Community Group format
- Custom output formats
- Live demo and token converter
- Apache-2.0 licence
Who it's for
Design system engineers and front-end teams that want the same tokens in several codebases will find it useful. It suits teams that maintain one token set for web and mobile.
Pricing and good to know
Style Dictionary is open source under the Apache-2.0 licence, and the code is on GitHub. It is added to a project as a package and run as a build step, so a working build setup is needed. Keep the token source files under version control, so each generated output can be traced back to a change.
Highlights
- Export tokens to CSS, JavaScript, iOS and Android
- Read the Design Tokens Community Group format
- Write custom output formats
- Test token sets with a live demo
- Run as a build step in a project
