DTCG Design Tokens in Figma

Last week, Figma announced several exciting new features at Schema 2025, and like so many others in the design systems community, I was thrilled to hear about them. In particular, I'm looking forward to support for slots in Figma components, which opens up a whole new set of possibilities for Code Connect and design-to-code workflows.

I know, I know... that's all everyone seems to be talking about after the conference. And, it is a big deal - but that's a whole other topic for another day. In this post, I'd like to focus on another exciting update.

Kaelig from The W3C Design Tokens Community Group (or DTCG for short) has announced that the JSON format spec is officially stable! 🎉 This means we now have a standard specification for how token data should be structured, enabling interoperability between various design and developer tools, and providing some much-needed structure in this foundational area of every design system.

The DTCG specification defines a common, platform-agnostic JSON format for representing design decisions - such as colors, typography, spacing, and motion - as machine-readable tokens. Its goal is to make these tokens interchangeable between tools and technologies, eliminating the need for ad-hoc converters or proprietary formats. Each token is expressed as a name/value pair, optionally enriched with metadata like type, description, or references to other tokens, and organized hierarchically to reflect a design system's structure.

Here's a simple example of DTCG-compliant token data:

{
  "colors": {
    "$type": "color",
    "brand": {
      "base": {
        "$value": "#00A758",
        "$description": "Primary brand color"
      }
    }
  },
  "fontSizes": {
    "$type": "dimension",
    "heading1": {
      "$value": "44px",
      "$type": "dimension",
      "$description": "Font size for H1"
    }
  }
}

By standardizing how tokens are defined and exchanged, the DTCG spec enables true interoperability across the design-to-development pipeline. A single token source can now serve as the foundation for multiple outputs - CSS variables, Android resources, iOS assets, or documentation - ensuring consistent visual identity across platforms. It also fosters a healthier tooling ecosystem, allowing design and engineering tools to integrate seamlessly, share data, and evolve together without breaking compatibility.

In short, the DTCG format creates a shared language for design systems. It allows teams to scale more confidently, reduces the risk of visual drift, and paves the way for better automation and collaboration between design and code.

Alongside the stable release of the DTCG token format, Figma is introducing support for this spec in variables, finally adding the ability to export them as DTCG-compliant JSON data - with no plugins or custom export scripts needed! 🥳

Personally, I'm looking forward to ditching my tokens export script, which I had originally adapted from Figma's Plugin Samples repo a year or so ago. It's one less thing to maintain, and in a team setting means that anyone with the required access to the variables file in Figma can do this directly in Figma UI, without having to run the script locally.

Additionally, Figma will also provide a way to import variables from JSON data in the DTCG format, making it possible to quickly do batch updates to variables by simply authoring your data directly in JSON. Throw this task to your AI agent of choice, and the process becomes even easier.

On the tooling side, having a common spec for how to interpret design tokens data opens up a lot of possibilities. For example, we can take that JSON export from Figma and generate various platform-specific assets from it. Using tools like Style Dictionary, Terrazzo, or Theemo, we can generate design tokens as CSS variables, which can then be used in any digital product that supports CSS. Similarly for native mobile app development, these tools have you covered as well - offering the ability to generate tokens as Swift code for iOS or XML resources for Android.

Speaking of Style Dictionary, awhile back I did a video on how to do exactly that - generating CSS variables from design token data in the DTCG format.

The basic premise is simple. Go from token JSON files that looks like this:

To CSS that looks like this:

Note that since the recording of the video, Style Dictionary has shipped a new major version with added support for the DTCG format out of the box, which means that the additional style-dictionary-utils package used in the video is now completely optional - but the overall idea remains just the same.

Shout-out to Lukas Opperman for the awesome style-dictionary-utils library which made this possible at the time. I still recommend using it alongside Style Dictionary, as it includes other transforms which are quite helpful (for example, automatic px to rem conversion).

The full video tutorial is available below:

A sample repo for this tutorial is available in GitHub for reference as well: