This repository contains an example script that uses Style Dictionary to manage design tokens. The script pulls a token set generated by syncing a Figma file with zeroheight. For more details on how to sync Figma files with zeroheight, see this guide.

The token set used in this example contains two collections, each with two modes:

1. Primitives
   • Modern Theme
   • Brutal Theme
2. Tokens
   • Light Mode
   • Dark Mode

• Node.js >= 20

To get started, follow these steps:

1. Install Dependencies
   Run the following command in your CLI to install the required dependencies:

npm install

2. Build the Tokens Once dependencies are installed, you can build the tokens by running:

npm run build

The build process is driven by a custom script (index.js) that performs the following steps:

1. Fetching Style Dictionary Links
   The script first fetches links from the token set’s Style Dictionary URL. Each link corresponds to a JSON file that is saved locally.

async function fetchLinks() {
  // Logic to fetch links
}

async function saveFiles(links) {
  // Logic to save JSON files locally
}

2. Generating Style Dictionary Configuration
   Next, the script dynamically generates a Style Dictionary configuration for each mode in the Tokens collection.

function getStyleDictionaryConfig(mode1, mode2) {
  // Logic to generate Style Dictionary config
}

3. Building for Multiple Platforms
   Finally, the script runs the build process for two platforms: web and ios.

Ensure that your Figma file is properly synced with zeroheight to avoid issues with token generation. You can customize the build process by modifying the index.js script or the generated Style Dictionary configurations.