Developers

DTCG tokens from your design file

The Design Tokens Community Group (DTCG) format is becoming the lingua franca between design tools and code. Here's how to get valid token JSON out of Kirutma.

June 10, 20265 min read

Why DTCG?

DTCG JSON describes tokens with $type and $value fields — tools like Style Dictionary, Tokens Studio, and custom CI scripts can consume the same file. No more copy-pasting hex codes from a PDF.

Step 1: Use color styles in the editor

In Kirutma, define color styles on your document and assign them to frames and shapes via colorStyleId. Raw fills without a style are flagged by Pro audit as handoff debt.

Starter templates Pro handoff — mobile and Pro handoff — dashboard ship with linked styles so you can export on day one.

Step 2: Export from Kirutma Pro

  1. Open the Pro panel in the editor
  2. Choose Export tokens → format DTCG JSON
  3. Save tokens.json into your repo (e.g. design-tokens/)

Pro also exports CSS custom properties, Tailwind theme extensions, and Style Dictionary input — pick what your stack already uses.

Step 3: Wire into your build

Point Style Dictionary or your token pipeline at the exported file. Map semantic tokens in code:

// tokens consumed as CSS variables
.button-primary { background: var(--color-primary); }

Raw colors vs styles

Pro can optionally include raw colors discovered on layers without styles — useful for migration, but production handoff should converge on named tokens.

Sample handoff output

See a real markdown handoff sample in the Kirutma repo: apps/kirutma-pro/examples/handoff-sample.md.

Export tokens from your file

View Pro plans