Zeplin to SCSS Design Tokens Converter

A command-line tool to fetch design tokens from Zeplin projects and convert them to SCSS variables.

Prerequisites

• Node.js version 18 or higher
• A Zeplin personal access token
• One or more Zeplin project IDs

Installation

npm install -g zeplin-to-scss

Usage

zeplin-to-scss --token <your-zeplin-token> --projects <project-id1,project-id2> --output <optional-output-directory>

Configuration

The tool uses a default configuration file named zdt-sd-config.json. You should create your own configuration file named zdt-sd-config.json in the current directory and modify it to your needs.

The configuration file follows the style-dictionary configuration format.

{
    "source": [
        "design-tokens/**/*.json"
    ],
    "platforms": {
        "scss": {
            "transformGroup": "scss",
            "buildPath": "build/scss/",
            "files": [
                {
                "destination": "_variables.scss",
                "format": "scss/variables"
                }
            ]
        }
    }
}

Package Maintenance

The source code is maintained at https://dev.azure.com/jobjack/Platform/_git/Jack.Web.App/design-system-integration/zeplin-to-scss

Maintainence notes are available in the MAINTAINING.md file.