Skip to content
.mdDesign.md Store

Docs / Integrations

Figma

Export your DESIGN.md tokens to the W3C DTCG format and import them into Figma via the Tokens Studio plugin. This keeps your code tokens and Figma tokens in sync from a single source of truth.

Export to W3C DTCG

The CLI’s export command generates a tokens.jsonfile in the W3C Design Tokens Community Group (DTCG) format — the standard that Figma’s Tokens Studio plugin and the native Figma Variables API consume:

npx @google/design.md export --format dtcg DESIGN.md

This writes a tokens.json file in the current directory. The output follows the DTCG spec: each token has a $value and $type field, and tokens are grouped by category.

// tokens.json (DTCG format)
{
  "color": {
    "primary": { "$value": "#1A1C1E", "$type": "color" },
    "accent":  { "$value": "#B8422E", "$type": "color" },
    "surface": { "$value": "#FFFFFF", "$type": "color" }
  },
  "spacing": {
    "sm": { "$value": "8px",  "$type": "dimension" },
    "md": { "$value": "16px", "$type": "dimension" },
    "lg": { "$value": "32px", "$type": "dimension" }
  }
}

Import into Figma via Tokens Studio

Tokens Studio (formerly Figma Tokens) is the most widely-used plugin for managing design tokens in Figma. Once you have tokens.json, import it directly:

  1. Install Tokens Studio for Figma from the Figma plugin marketplace.
  2. Open the plugin in your Figma file (Plugins → Tokens Studio).
  3. Go to Settings → Token Sources and choose Load from file.
  4. Select the tokens.json file exported by the CLI.
  5. Apply the tokens to your Figma components using the plugin’s token inspector.
Round-trip sync: Changes made to tokens in Figma via Tokens Studio can be exported back to JSON and then converted to DESIGN.md format — keeping design and code in sync in both directions.

Export to Tailwind config

If you’re using Tailwind CSS, the CLI can also export your tokens directly to a Tailwind configuration object:

npx @google/design.md export --format tailwind DESIGN.md

This writes a tailwind.tokens.js file you can spread into your tailwind.config.js theme:

// tailwind.config.js
const tokens = require("./tailwind.tokens.js");

module.exports = {
  theme: {
    extend: {
      colors: tokens.colors,
      spacing: tokens.spacing,
      borderRadius: tokens.rounded,
    },
  },
};

Google Stitch

Google Stitch — the AI design tool from Google Labs that introduced the DESIGN.md format — has native export support. In Stitch, you can export a complete DESIGN.md directly from a design session without going through the CLI. The exported file is linter-valid and can be used immediately with Claude Code, Cursor, or any other supported tool.

CursorTokens Studio