DTIFx Toolkit

The DTIFx Toolkit is the production suite for the Design Token Interchange Format (DTIF). It joins high-fidelity diffing, repeatable builds, and policy automation in a single TypeScript workspace. Install the CLI once, connect it to your token sources, and ship governed artefacts with reliable telemetry.

Why DTIFx

• DTIF-native automation. Every package understands DTIF schemas, layered token sources, and governance metadata out of the box.
• One CLI for every workflow. The dtifx executable wires diff, build, and audit lifecycles together with shared caching, logging, and help surfaces.
• Production observability. Structured logging, telemetry spans, and exit codes designed for CI environments keep automation predictable.

Package suite

Package	Purpose
@dtifx/audit	Evaluates policy manifests and surfaces actionable guidance.
@dtifx/build	Plans token layers, runs transforms, and renders distributable outputs.
@dtifx/cli	Unified CLI for extract, diff, build, audit, and dscp workflows.
@dtifx/core	Shared runtime primitives used by every package and custom hosts.
@dtifx/diff	Calculates DTIF diffs and produces human and machine-friendly reports.
@dtifx/dscp	Generates DSCP documents from a completed DTIFx build pipeline output.
@dtifx/extractors	Connects design providers (starting with Figma) to DTIF token exports.

Review each package README for detailed usage examples and API references.

Quick start

1. Check prerequisites

node --version
corepack enable pnpm # optional, or continue with npm
dtifx --help          # available when the CLI is installed locally

• Runtime. Node.js 22 or later is required across the toolkit.
• Package manager. Examples use pnpm. Substitute npm if preferred.

2. Install the workspace dependencies

Run the commands within your design token repository or a fresh directory.

pnpm add -D @dtifx/cli @dtifx/build @dtifx/diff @dtifx/audit @dtifx/extractors
# or
npm install --save-dev @dtifx/cli @dtifx/build @dtifx/diff @dtifx/audit @dtifx/extractors

Expose helpful scripts for team workflows (swap the provider command that matches your stack):

pnpm pkg set "scripts.tokens:extract"="dtifx extract figma --file ABC123 --output tokens/figma.json"
pnpm pkg set "scripts.tokens:extract:penpot"="dtifx extract penpot --file DEMO --output tokens/penpot.json"
pnpm pkg set "scripts.tokens:extract:sketch"="dtifx extract sketch --file design-library.json --output tokens/sketch.json"
pnpm pkg set "scripts.tokens:diff"="dtifx diff compare"
pnpm pkg set "scripts.tokens:build"="dtifx build generate"
pnpm pkg set "scripts.tokens:validate"="dtifx build validate"
pnpm pkg set "scripts.tokens:audit"="dtifx audit run"
# or
npm pkg set "scripts.tokens:extract"="dtifx extract figma --file ABC123 --output tokens/figma.json"
npm pkg set "scripts.tokens:extract:penpot"="dtifx extract penpot --file DEMO --output tokens/penpot.json"
npm pkg set "scripts.tokens:extract:sketch"="dtifx extract sketch --file design-library.json --output tokens/sketch.json"
npm pkg set "scripts.tokens:diff"="dtifx diff compare"
npm pkg set "scripts.tokens:build"="dtifx build generate"
npm pkg set "scripts.tokens:validate"="dtifx build validate"
npm pkg set "scripts.tokens:audit"="dtifx audit run"

3. Connect DTIF inputs

Author or reuse DTIF token dictionaries, build manifests, and audit policies. The Quickstart guide shows a minimal configuration and wiring across all workflows.

4. Run automation

# harvest design tokens from a provider
pnpm exec dtifx extract figma --file ABC123 --output tokens/figma.json
pnpm exec dtifx extract penpot --file DEMO --output tokens/penpot.json
pnpm exec dtifx extract sketch --file design-library.json --output tokens/sketch.json

# compare two snapshots
pnpm exec dtifx diff compare snapshots/previous.json snapshots/next.json

# validate configuration without generating artefacts
pnpm exec dtifx build validate

# render distributable packages
pnpm exec dtifx build generate

# enforce policy manifests
pnpm exec dtifx audit run

Use pnpm exec dtifx --help or npx @dtifx/cli --help to inspect every subcommand and flag.

Documentation

The VitePress site in docs/ is the canonical source for tutorials, architecture notes, and API reference material. Key entry points include:

• Toolkit overview
• Quickstart
• Build pipeline
• Diff workflow
• Audit governance
• CLI reference
• Minimal stack example pairs the toolkit with design-lint, publishes committed build/diff/audit artefacts, and exposes the core scripts you can mirror in your own repositories (npm run verify, npm run dtif:validate, npm run dtif:build, npm run dtif:diff, npm run dtif:audit, and npm run design-lint). Review the companion repository to inspect the full project wiring.

Preview the site locally with pnpm docs:dev and publish via the automated documentation workflow.

Contributing to the toolkit

To work on the monorepo itself:

pnpm install
pnpm lint
pnpm lint:markdown
pnpm build
pnpm test
pnpm format:check
CI=1 pnpm docs:build

These gates mirror the CI pipeline and keep the documentation build healthy.

License

The DTIFx Toolkit is released under the MIT License.