What?

A starter kit that demonstrates one way to integrate design tokens into your designer/developer pipeline.

How?

1. Clone or download this repo.
2. Install style-dictionary.
3. Launch Figma and install the Design Tokenizer plugin.
4. Use Design Tokenizer to export your design tokens. You can use this example design libary as a starting point.
5. Save the json file to style-dictionary/properties.
6. If you haven't already, navigate to style-dictionary/ and run npm install to setup dependencies.
7. Run npm run build to generate css variables, which are saved to style-dictionary/build/tokens.css.
8. Copy-paste the content of style-dictionary/build/tokens.css into example-site/css/tokens.css.
9. 💰💰💰.

Huh?

Email Me