Design tokens for Figma: DTCG + Token Studio

1. What are design tokens?

A design token is a named, structured representation of a design decision. Instead of putting #1c749f in twelve component files, you put it in one place — as color.brand.primary — and reference the name. Change the value, and every reference updates.

Tokens aren't just for colors. A real design-system token tree covers everything addressable:

Color — brand, neutral, semantic (success, warning, danger), surfaces
Dimension / spacing — the 4 / 8 / 16 scale, container widths
Typography — font families, sizes, weights, line heights
Radius, border, shadow — visual treatments that go with components
Motion — durations and easings
Aliases — tokens that point at other tokens (color.button.bg → color.brand.primary)

The reason tokens matter is the round-trip: a designer changes a value in Figma, the change propagates to a JSON file in a Git repo, a build step rebuilds the CSS variables, and engineers see the new value the next time they pull. Without tokens, that loop is a meeting and a search-and- replace.

2. The DTCG format

The Design Tokens Community Group is a W3C-incubated effort to define an open JSON format for design tokens. The first public editor's draft of the format was published in September 2021, and after four years of iteration the specification reached its first stable version (2025.10) in October 2025. It's now the open standard the industry actually agrees on — implemented by Token Studio, Style Dictionary, Specify, Supernova, and most other modern design-token tooling.

A minimal DTCG token tree looks like:

{
  "color": {
    "brand": {
      "500": {
        "$type": "color",
        "$value": "#1c749f"
      }
    }
  }
}

Each leaf has a $type (color, dimension, fontSize, fontFamily, fontWeight, duration, cubicBezier, …) and a $value. Aliases use a {path.to.token} reference inside the value. Optional fields include $description (for documentation) and $extensions (for tool-specific metadata).

Why it matters: DTCG is the lingua franca that lets a tool like Palette Daddy export a file and have Token Studio, Style Dictionary, Specify, and Supernova all read it without a per-tool integration. The same JSON works everywhere.

3. Figma Variables vs Token Studio

Figma launched Variables at Config 2023 in June 2023. Variables are typed values (color, number, string, boolean) with support for modes — so a single color.surface variable can have different values for light and dark mode. Components and styles can bind to variables directly, eliminating most cases where you used to need a plugin.

Token Studio(formerly “Figma Tokens”) is a Figma plugin built before Variables existed. It extends what Figma natively supports with:

Multi-set token organization — split tokens across files (e.g. core, brand, components) and compose them
Themes — toggle sets on and off to switch brand or surface treatments
Aliases and math — token references and expressions like {spacing.base} * 2
JSON import/export — read and write DTCG files
Git sync — push tokens straight to GitHub, GitLab, Bitbucket, or Azure DevOps

In practice, most production design systems use both: Variables for the parts Figma supports natively (per-mode colors, component bindings), and Token Studio for token organization, themes, and the JSON round-trip with code.

4. How Token Studio works

Token Studio represents your design system as a set of JSON token files, each one a flat tree like the DTCG example above. You assemble tokens into sets (e.g. core, brand, semantic) and compose sets into themes. A theme says “use core + brand-acme + light-mode” or “use core + brand-acme + dark-mode”. Switching themes in the plugin re-applies the resolved values to Figma styles and variables.

The most powerful piece is the sync: Token Studio can read and write your tokens to a Git repository. A designer edits in Figma; Token Studio commits the JSON changes to a branch; the code build picks up the new JSON and emits updated CSS or platform code. The same file is the source of truth for design and engineering.

5. From tokens to code with Style Dictionary

Style Dictionary is an open-source token build system originally created by Amazon. It reads structured token files (DTCG is supported natively in recent versions) and transforms them into whatever output format each platform consumes:

CSS custom properties (--color-brand-500)
JavaScript / TypeScript constants
Sass / Less variables
iOS (Swift) and Android (Kotlin/XML) constants
Tailwind config files (via plugins)
Pretty much any text format, via custom transforms

A typical setup: Token Studio writes a DTCG JSON to your repo on commit, Style Dictionary runs in a build step on the code side, and the platform-specific outputs end up in your source tree where consumers can import them.

Style Dictionary isn't the only option — Specify, Token Transformer, Theo, and others fill similar roles — but it's the most established and has the largest plugin ecosystem.

6. A practical workflow

A working end-to-end design-token workflow, color first:

Generate the scale. In Palette Daddy, pick your brand color and the algorithm (APCA or Tailwind), produce the 11-step scale.
Export DTCG JSON. One click in Palette Daddy produces a Design Tokens JSON file with all 11 shades typed and named.
Import into Token Studio. Drop the JSON into a Token Studio set. Token Studio recognizes the DTCG format and creates the matching Figma styles and variables.
Use in designs. Designers reference color.brand.600 in component fills, strokes, and effects. Switching themes (light/dark or brand variants) re-applies the scale automatically.
Push to Git. Token Studio commits the JSON to a repo branch.
Build platform code. A CI step runs Style Dictionary against the JSON to produce CSS variables, JS constants, and any other platform output.
Iterate. Need a tweak? Update the JSON (in Figma or in code), and the change flows everywhere on the next build.

Most teams take a while to set this up end to end — but once it's wired up, color changes that used to take a week take an hour.

7. How Palette Daddy exports to Token Studio

Palette Daddy exports its 11-step scales as a Design Tokens (DTCG) JSON file via the Export button on the home generator. The file is ready to import directly into Token Studio (drag the file onto a token set, or paste the JSON into a new set).

Every shade is typed $type: color with a HEX $value. The token names follow the convention color.<name>.<step> where <name> is the color name (auto-suggested from the hex via a built-in color-naming library) and <step> is 50, 100, …, 950. You can rename the file or the root key before importing if your design system uses a different naming convention.

The same file imports cleanly into Style Dictionary, Specify, Supernova, and any other DTCG-aware tool — so the export isn't Token-Studio-specific. Use whatever fits your stack.

8. Frequently asked questions

What are design tokens?

Design tokens are named, structured representations of design decisions — colors, spacing, type sizes, radii, shadows — that can be consumed by both design tools and code. Instead of writing #1c749f in twelve places, you reference 'color.brand.primary' everywhere, and changing the underlying value updates every reference. The point is to make design decisions explicit, addressable, and reusable across platforms.

What is the DTCG format?

DTCG stands for the Design Tokens Community Group, a W3C-incubated community group that has been developing an open format for design tokens. The format describes tokens as a JSON tree where each leaf has a $type (color, dimension, fontSize, …) and a $value. The specification reached its first stable version (2025.10) in October 2025 after four years in draft, and it's the open standard implemented by Token Studio, Style Dictionary, Specify, Supernova, and most other modern token tooling.

Do I need Token Studio if Figma has native Variables now?

It depends on what you need. Figma Variables (launched at Config 2023, June 2023) cover the basic case: typed values, modes for light/dark and similar variants, and direct binding from variables to component properties. Token Studio extends that with richer features — multi-set token organization, themes, aliases that point to tokens-in-tokens, math expressions, and crucially, JSON import/export of the DTCG format. Many teams use both: Figma Variables for what they support natively, Token Studio for everything else and for the JSON round-trip.

How do tokens get from Figma to code?

Two common patterns. (1) Token Studio writes a DTCG JSON file to a Git repo (Token Studio has a built-in GitHub/GitLab sync). A build step on the code side uses a tool like Style Dictionary or Token Transformer to read the JSON and emit CSS variables, JS constants, Swift/Kotlin code, or whatever each platform needs. (2) Manual export — designers export a JSON file from Token Studio and hand it to engineering, who runs the same build step. Pattern (1) scales better.

Can I use Palette Daddy's output with Style Dictionary directly?

Yes. Palette Daddy exports DTCG JSON, which Style Dictionary parses natively (it added DTCG support in 2024). You can drop the file straight into your tokens directory and run your existing build. The same file imports cleanly into Token Studio if you want it in Figma first.

9. Further reading

Design Tokens Community Group (W3C) — the home of the DTCG specification work.
Design Tokens Format Module (DTCG draft) — the working draft of the format itself.
Tokens Studio — the Figma plugin and the company behind it.
Style Dictionary — the most-used build tool for going from token JSON to platform code.
Figma — Guide to variables — what Figma supports natively today.
Building an 11-step color scale (our guide) — the upstream design decisions before tokens become tokens.

Design tokens for Figma: A practical guide to DTCG and Token Studio

TL;DR