Basic Style Dictionary Example

Based on: https://github.com/amzn/style-dictionary/tree/main/examples/basic

This example code is bare-bones to show you what this framework can do. If you have the style-dictionary module installed globally, you can cd into this directory and run:

npx style-dictionary build

Otherwise, install Style Dictionary locally for this project first, cd into this directory and run:

npm init -y && npm install style-dictionary

and then run the above command.

Tokens Exported from Figma

• 1-radix-tokens.json

  • Exported using Variables Import Export plugin
  • Output is in w3c format
  • 1 file per mode per collection

• 2-design-tokens.tokens.json

  • Exported using Design Tokens plugin
  • Output is not in w3c format
  • All output in a single file. It looks like mode is lost.

• 3-radix-tokens.json

  • Exported using Variables to JSON plugin
  • Output is not in w3c format
  • All output in a single file.
  • Mode is output as a group.

• 4-radix-tokens

  • Exported using Design Tokens (W3C) Export plugin
  • Output is not in w3c format
  • 1 file per collection
  • Mode is output as a group.