Figma → CSS Motion Token Auto-Sync — Building a W3C DTCG 2025.10 Transition Pipeline with Tokens Studio + Style Dictionary v4

Have you ever experienced a situation where a designer updates the easing on a button hover animation in Figma, only for the developer to manually apply that change to the code much later? This synchronization problem is a pain point that's hard to avoid for any team running a design system. On October 28, 2025, the W3C Design Tokens Community Group (DTCG) published its first official stable specification (2025.10), establishing a standard that structurally solves this problem. The transition composite token type, which had been discussed during the draft stage, was officially ratified in this spec.

This article walks through the complete pipeline — from defining tokens in Figma Tokens Studio to auto-generating CSS variables with Style Dictionary v4 and @tokens-studio/sd-transforms — centered on the transition composite token type officially introduced in DTCG 2025.10, with concrete code examples throughout. By the end of this article, you will be able to build a fully automated one-way sync pipeline where a designer's Figma changes are automatically reflected in the code build.

Target audience: Frontend/fullstack developers who use Figma and Git and are comfortable with CSS variables. Especially useful for teams already using Tokens Studio or considering adopting it. Estimated reading time: approximately 15 minutes.

Core Concepts

What Is the W3C DTCG transition Composite Token

In the DTCG spec, a composite token is a type that groups multiple primitive tokens into a single semantic unit. The transition type maps exactly to the CSS transition shorthand property and consists of three sub-properties.

Composite Token: A token type that groups multiple primitive token values into a single semantic unit. In addition to transition, typography, shadow, border, and gradient were also officially ratified as composite tokens in DTCG 2025.10.

Per the W3C DTCG 2025.10 spec, the $value of a duration token is a string in the form "150ms". The object form { value: 150, unit: "ms" } is the notation from the Tokens Studio legacy format; when writing standard JSON, it is recommended to use string notation as shown below.

{
  "transition": {
    "emphasis": {
      "$type": "transition",
      "$value": {
        "duration": "200ms",
        "delay": "0ms",
        "timingFunction": [0.42, 0, 0.58, 1]
      }
    }
  }
}

$ prefix: In the DTCG 2025.10 spec, keys starting with $ — such as $type and $value — represent token metadata. This is the W3C standard notation, distinct from the legacy Tokens Studio format (type, value).

The Role of Style Dictionary and sd-transforms

Style Dictionary is a build tool that transforms JSON-based design tokens into code for various platforms such as CSS, iOS (Swift), and Android (XML). The core philosophy of the DTCG spec is that tokens themselves define only values and structure, while Style Dictionary handles the conversion to platform-specific output formats.

The @tokens-studio/sd-transforms package is a companion package that transforms Tokens Studio's token format into a form that Style Dictionary can process. A single line — registerTransforms(StyleDictionary) — registers all Tokens Studio-related transforms in bulk, and specifying transformGroup: 'tokens-studio' applies the full registered transform set at once.

Boosting Reusability with Token Reference ({}) Syntax

Sub-values in transition composite tokens can reference other tokens using the {path} syntax. By defining duration and timingFunction as separate tokens and referencing them from multiple transition tokens, a change to an easing curve in one place is consistently reflected across all transition effects.

Practical Application

Step 1: Structuring Motion Token Hierarchy in Figma Tokens Studio

In the Tokens Studio plugin, switch to Settings → Token Format → W3C DTCG, then write tokens as shown below. The key is a hierarchical structure where primitive tokens (cubicBezier, duration) are defined first and referenced by the transition token.

{
  "motion": {
    "easing": {
      "standard": {
        "$type": "cubicBezier",
        "$value": [0.4, 0, 0.2, 1]
      }
    },
    "duration": {
      "short": {
        "$type": "duration",
        "$value": "150ms"
      },
      "medium": {
        "$type": "duration",
        "$value": "300ms"
      }
    },
    "transition": {
      "standard": {
        "$type": "transition",
        "$value": {
          "duration": "{motion.duration.medium}",
          "delay": "0ms",
          "timingFunction": "{motion.easing.standard}"
        }
      }
    }
  }
}

Step 2: Setting Up Automatic Figma → Git Push with GitHub Sync

In Tokens Studio, go to Settings → Sync providers → Add new → GitHub and enter your repository details to push token changes directly to Git.

Repository:  your-org/design-tokens
Branch:      main
File path:   tokens/motion.json

Once configured, edit a token and click Push to GitHub to automatically create a PR. It is strongly recommended to include the .json extension in the file path. Omitting the extension can cause a silent failure.

When switching to the DTCG format, the plugin creates a separate w3c-dtcg-conversion branch and pushes the converted file, allowing you to review the migration without conflicting with existing files.

Step 3: Building CSS Variables with Style Dictionary v4 + sd-transforms

Install the required packages.

pnpm add style-dictionary @tokens-studio/sd-transforms

Style Dictionary v4 uses ES Module (import/export) syntax. To use the config file below, add "type": "module" to package.json or use the .mjs file extension.

// package.json
{
  "type": "module",
  "scripts": {
    "build:tokens": "style-dictionary build --config style-dictionary.config.js"
  }
}

// style-dictionary.config.js
import StyleDictionary from 'style-dictionary';
import { registerTransforms } from '@tokens-studio/sd-transforms';
 
// Register all Tokens Studio-specific transforms into Style Dictionary at once
registerTransforms(StyleDictionary);
 
export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      // The 'tokens-studio' group includes the transform set registered by registerTransforms().
      // The transforms array below specifies only additional transforms not included in the group.
      transformGroup: 'tokens-studio',
      transforms: [
        'ts/transition/css/shorthand',  // transition composite token → CSS shorthand
        'name/kebab',
      ],
      buildPath: 'dist/tokens/',
      files: [{
        destination: 'tokens.css',
        format: 'css/variables',
      }],
    },
  },
};

Run the build.

pnpm build:tokens

The following CSS file is generated.

/* dist/tokens/tokens.css */
:root {
  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-duration-short: 150ms;
  --motion-duration-medium: 300ms;
  --motion-transition-standard: 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

Step 4: Using Transition Tokens in React/Next.js Components

Import the built CSS variables in your global styles and reference them in CSS Modules files.

/* styles/globals.css */
@import '../dist/tokens/tokens.css';

/* components/Button.module.css */
.button {
  background-color: #1a73e8;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* Apply transition token variables to each property */
  transition:
    background-color var(--motion-transition-standard),
    transform var(--motion-transition-standard),
    box-shadow var(--motion-transition-standard);
}
 
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

// components/Button.tsx
import styles from './Button.module.css';
 
export function Button({ children }: { children: React.ReactNode }) {
  return <button className={styles.button}>{children}</button>;
}

Now, when a designer updates motion.duration.medium from 300ms to 250ms in Figma and pushes to GitHub, the Style Dictionary build runs automatically in CI and --motion-transition-standard is updated to 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms — no manual developer intervention required.

Pros and Cons Analysis

Advantages

Disadvantages and Caveats

The Most Common Mistakes in Practice

1. Writing DTCG tokens while leaving Tokens Studio's Token Format set to legacy — You must switch Settings → Token Format to W3C DTCG before writing tokens, so that the $type and $value keys are saved correctly. In legacy format, the $ prefix is treated as a regular key, which can produce unintended results during transformation.
2. Omitting the ts/transition/css/shorthand transform — Building without this transform causes the transition composite token to be output as a nested object rather than a CSS shorthand, making it unusable as a CSS variable.
3. Not including the .json extension in the GitHub Sync file path — An explicit path like tokens/motion.json is recommended over tokens/motion. Path errors can fail silently without any error message.

Closing Thoughts

The transition composite token in DTCG 2025.10 has become the official, standardized tool for resolving motion synchronization issues between design and code. Teams can now adopt a workflow where modifying a single easing curve keeps Figma, Git, and CSS all pointing to the same value.

Three steps you can take right now:

1. Install Tokens Studio and switch the format (~5 minutes, requires Figma access): Install the Tokens Studio plugin in Figma, switch Settings → Token Format to W3C DTCG, and try writing the motion.easing, motion.duration, and motion.transition hierarchy using the example JSON above.
2. Set up the Style Dictionary build environment (~15 minutes, requires an existing project): Run pnpm add style-dictionary @tokens-studio/sd-transforms from your project root, then use the style-dictionary.config.js example and package.json scripts above to verify that pnpm build:tokens runs successfully.
3. Connect GitHub Actions CI (~20 minutes, requires a GitHub repository): Configure .github/workflows/tokens.yml to automatically run the Style Dictionary build whenever tokens/**/*.json changes, completing a fully automated pipeline. A detailed walkthrough of the basic workflow configuration will be covered in the next article.

Next article: We'll cover how to use Style Dictionary v4's $extends group inheritance together with GitHub Actions pipelines to design a token architecture that automatically deploys light/dark mode and multi-brand themes without duplicating files.

References

• Design Tokens Format Module 2025.10 Official Spec | W3C DTCG — Original definition of the transition composite token type
• Design Tokens specification reaches first stable version | W3C DTCG Official Announcement — Background on the 2025.10 stable spec release
• Design Tokens Technical Reports 2025.10 | W3C DTCG — Full list of spec documents
• DTCG Official GitHub Repository — Spec issues and change history tracking
• Style Dictionary DTCG Support Guide | styledictionary.com — v4 DTCG support scope and migration guide
• Style Dictionary Built-in Transforms | styledictionary.com — Built-in transforms reference
• Style Dictionary + SD Transforms Integration Guide | Tokens Studio Docs — Practical sd-transforms configuration guide
• sd-transforms GitHub Repository | tokens-studio — Package source and release notes
• Token Format — W3C DTCG vs Legacy | Tokens Studio Docs — How to switch to $ prefix format
• Tokens Studio GitHub Sync Guide | Tokens Studio Docs — Detailed GitHub Sync configuration
• What's new in the Design Tokens spec | zeroheight Blog — Summary of major changes in 2025.10
• Understanding W3C Design Token Types | Francesco Improta — Deep dive into composite and primitive token type concepts