Package Exports

figma-tokens-flattener
figma-tokens-flattener/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (figma-tokens-flattener) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

figma-tokens-flattener

A tool for transforming Ant Design tokens from Tokens Studio for Figma (Single file) into flat style mappings for light and dark themes.

Installation

npm install figma-tokens-flattener --save-dev

Create Configuration

Create a figma-tokens-flattener-config.json file in your project root:

{
    "source": {
        "tokensFile": "src/tokens/tokens.json" // path to the token file
    },
    "target": {
        "jsonsDir": "src/tokens" // path for the created files
    }
}

Run Transformation

npx simple-token-transformer flatten

Alternative Way (Recommended)

Add a script to your package.json:

{
    "scripts": {
        "flatten-tokens": "simple-token-transformer flatten"
    }
}

And run with:

npm run flatten-tokens

How It Works

Reading Tokens - The tool reads the JSON file exported from Tokens Studio for Figma
Theme Separation - Automatically splits tokens into light and dark themes
Flat Structure Transformation - Converts nested token structure into flat mapping
Result Saving - Creates separate JSON files for each theme

Output

After running the command, the following files will be created in the target directory:

light-theme-tokens.json - tokens for light theme

dark-theme-tokens.json - tokens for dark theme