Build token files

Primitree checks a local DTCG token file against the layer and owner rules in primitree.config.ts. It then writes DTCG, CSS, Tailwind CSS, and TypeScript files for an app to use.

Requirements

• Node.js 24 or newer
• pnpm 11 or newer when working in the Primitree monorepo
• React ^19.0.0 for @primitree/hooks

Quick start

Install the CLI. Add a local DTCG file and primitree.config.ts. Run:

pnpm add -D @primitree/cli@next
pnpm exec primitree check --source brand
pnpm exec primitree inspect semantic.motion.control --source brand
cp tokens.json before.tokens.json

Change base.motion.quick.$value.value in tokens.json from 0.2 to 0.3. Compare the files and build the output:

pnpm exec primitree diff before.tokens.json tokens.json --source brand
pnpm exec primitree build --source brand
pnpm exec primitree build --source brand --check

check reports source findings. inspect explains one token. diff compares the saved file with the edited file. build writes the configured files. build --check reports output changes without writing. See Getting started for the token file, config, commands, and generated files.

Figma export

The Figma path is available when a project starts with local variables. Use the Primitree export plugin to save an export. Run pnpm exec primitree build variables.json. Figma REST access requires access to the Figma file, a Figma Enterprise seat, and a Personal Access Token with file_variables:read. Set the token in FIGMA_TOKEN or FIGMA_PAT, and set the file key in FIGMA_FILE_KEY. Run pnpm exec primitree export.

Packages

Guides

Playground

The playground processes a variables export in the browser and downloads the generated files as a zip.