tokenflow

Zero-config CLI to pull all variables from a Figma file and generate CSS custom properties, TypeScript exports, Tailwind config, and JSON artifacts.

No manual mapping needed — variable names are normalized automatically from your Figma structure.

Install

npm install -g tokenflow

Usage

tokenflow pull     # fetch all variables from Figma → tokens.snapshot.json
tokenflow build    # generate output files from snapshot
tokenflow sync     # pull + build in one step

Setup

1. Get a Figma personal access token Figma → Settings → Security → Personal access tokens

2. Get your Figma file key From the URL: figma.com/design/FILE_KEY/filename

3. Create tokens.config.json

{
  "figmaFileKey": "your-file-key",
  "output": [
    { "format": "css",      "file": "src/tokens/variables.css" },
    { "format": "ts",       "file": "src/tokens/index.ts" },
    { "format": "tailwind", "file": "src/tokens/tailwind.ts" },
    { "format": "json",     "file": "src/tokens/tokens.json" }
  ]
}

4. Pull and build

FIGMA_TOKEN=your_token tokenflow sync

Variable name normalization

Figma variable paths are normalized automatically:

| Figma collection | Figma variable | CSS variable | TS path | |-----------------|----------------|--------------|---------| | Colors | Brand/Primary | --colors-brand-primary | tokens.colors.brand.primary | | Spacing | 4 | --spacing-4 | tokens.spacing["4"] | | Radius | Md | --radius-md | tokens.radius.md |

Multi-mode / Theming

If your Figma collection has multiple modes (e.g. Light / Dark), the CSS output handles it automatically:

:root {
  --colors-brand-primary: #1a73e8;
}

[data-theme="dark"] {
  --colors-brand-primary: #8ab4f8;
}

Switch themes at runtime:

document.documentElement.dataset.theme = "dark";

Output formats

| Format | Output | |--------|--------| | css | CSS custom properties with multi-mode support | | ts | TypeScript tokens (raw values) + cssVars (var references) | | json | Raw token values with all modes | | tailwind | Tailwind theme.extend config with CSS var references |

Config reference

| Field | Required | Default | Description | |-------|----------|---------|-------------| | figmaFileKey | yes | — | Figma file key from URL | | output | yes | — | Array of { format, file } | | snapshot | no | tokens.snapshot.json | Snapshot file path | | cssPrefix | no | "" | Prefix for CSS variable names (e.g. "app" → --app-colors-brand-primary) |

Add to package.json

{
  "scripts": {
    "tokens:pull": "tokenflow pull",
    "tokens:build": "tokenflow build",
    "tokens:sync": "tokenflow sync"
  }
}

Environment

FIGMA_TOKEN=your_token   # required for pull and sync