Base
Design tokens
⚡ Quick how to: update tokens
- Export json from Figma
- Replace json in
tokens-from-figma.json
- Run
yarn build
- Commit changes
🧱 Token folder structure
/
├── output/
│ ├── tokens.css
│ ├── tokens.scss
│ └── token.json
├── build-tokens.ts
├── config.ts
└── tokens-from-figma.json
We use style-dictionary to transform and format the tokens in ./tokens-from-figma.json
.
In ./config.ts
we decide which formats we want (css, scss, js and more), and in ./build-tokens.ts
we can create formatters and use other utilities to change the output how we want.
The files in ./output
are auto generated and should never be edited manually.