Design Token Authority

          ┌─────────┐
  [•‿•] ──┤ ◆  ●  ▪ │   Design Token Authority
   /|\    └─────────┘   Sync Figma variables to code, and back.
   ╵ ╵

Bi-directional sync between Figma Variables and design token JSON files, with multi-target output via Style Dictionary.

What it does

• Pull — fetches variable collections from the Figma Variables API and writes them as W3C DTCG-format JSON files
• Push — reads token files and writes variables back to Figma (with typed confirmation and dry-run support)
• Build — runs Style Dictionary to produce CSS custom properties, JavaScript exports, and Tailwind v3/v4 theme files
• Analyze — inspects a Figma file's variable collections and infers the design system layer structure (primitives, brand, dimension, semantic)
• Graph — builds a dependency graph of alias references across token files, detects circular references, dangling aliases, and orphaned tokens
• Lint — validates token files against configurable rules (naming patterns, alias requirements, color contrast, duplicates)
• Clean — removes all generated token files and build output
• Init — interactive wizard that connects to Figma, auto-detects your variable structure, and generates a project config

Quick start

The fastest path is the init wizard:

npm install
npx dta init

The wizard asks for your Figma file URL and personal access token, auto-detects your variable structure, and writes a dta.config.ts and .env file.

To set up manually instead, copy .env.example to .env, fill in FIGMA_FILE_KEY and FIGMA_PERSONAL_ACCESS_TOKEN, then run npm install.

Figma plan requirements

The Figma Variables REST API is only available on Enterprise plans. Professional and Organization plans receive a 403 error.

For non-Enterprise plans, use the --from-file flag to import tokens exported from a Figma plugin:

dta pull --from-file <exported.json>

Compatible plugins include tokenHaus (tested, recommended), Design Tokens (W3C) Export, and Design Token Exporter.

CLI

The CLI is available as dta (or its full name design-token-authority). During development without a global install, use npm run dta --.

# Core workflow
dta pull                        # Figma → tokens/
dta push                        # tokens/ → Figma (requires typed confirmation)
dta push --dry-run              # show what would change without modifying Figma
dta push --yes                  # skip confirmation prompt (CI/automation)
dta build                       # tokens/ → build/

# Analysis & validation
dta analyze                     # inspect Figma file and infer layer roles
dta graph                       # token dependency graph (console summary)
dta graph --format html         # interactive HTML visualization
dta graph --format dot          # Graphviz DOT (pipe to dot -Tsvg)
dta graph --format markdown     # markdown table report
dta lint                        # validate tokens against configured rules
dta lint --fix                  # auto-fix violations where possible

# Housekeeping
dta init                        # interactive project setup wizard
dta clean                       # remove all token files and build output

# Global options (available on all commands)
dta <cmd> -c path/to/config.ts  # custom config file
dta <cmd> -v                    # verbose logging

Push confirmation

dta push modifies the Figma file, so it requires you to type push variables to figma to confirm. This can be bypassed in two ways:

• CLI flag: dta push --yes (one-off, useful for CI)
• Config: push: { skipConfirmation: true } in dta.config.ts (permanent)

Legacy npm scripts

The older npm scripts still work:

npm run sync-figma-to-tokens   # same as dta pull
npm run sync-tokens-to-figma   # same as dta push
npm run build                  # same as dta build

Configuration

The CLI reads a dta.config.ts file (generated by dta init or written manually):

import { defineConfig } from 'design-token-authority'

export default defineConfig({
  figma: {
    fileKey: process.env.FIGMA_FILE_KEY!,
    personalAccessToken: process.env.FIGMA_PERSONAL_ACCESS_TOKEN!,
  },
  collections: ['Primitives(Global)', 'Brand(Alias)', 'ScreenType'],
  brands: ['BrandA', 'BrandB'],
  tokens: { dir: 'tokens' },
  outputs: {
    css: { outDir: 'build/css', prefix: '--ds' },
    tailwind: { outDir: 'build/tailwind', version: 4 },
  },
  push: {
    skipConfirmation: false, // set to true for CI/automation
  },
  lint: {
    rules: {
      'semantic-must-alias': { severity: 'error', collections: ['Brand(Alias)'] },
    },
  },
})

Token format

Files follow the W3C Design Token Community Group (DTCG) draft spec with Figma extensions. One file per variable collection + mode:

tokens/Primitives(Global).Value.json
tokens/Brand(Alias).BrandA.json
tokens/Brand(Alias).BrandB.json
tokens/ScreenType.Desktop.json

Build outputs

Token dependency graph

dta graph analyzes alias references across all token files and reports total tokens, alias percentage, max chain depth, circular references, dangling aliases, and orphaned tokens.

The HTML format generates a self-contained file with a force-directed graph layout, semantic zoom, color-coded token types, and a sidebar with stats and file filtering.

From the repository's README, rendered at build time.