Skip to content
.mdDesign.md Store

Docs / Integrations

Tokens Studio

Tokens Studio (formerly Figma Tokens) can import the W3C DTCG output from the DESIGN.md CLI. Connect it to a GitHub repository and your design tokens stay in sync across code and Figma automatically.

Step 1 — Export from DESIGN.md

Run the CLI export command to generate a DTCG-format token file:

npx @google/design.md export --format dtcg DESIGN.md
# outputs: tokens.json

Commit tokens.json to your repository so it can be synced via the GitHub integration in the next step.

Step 2 — Connect Tokens Studio to GitHub

Tokens Studio supports syncing a token file directly from a GitHub repository. This means every time you update DESIGN.md and regenerate tokens.json, Figma designers can pull the latest tokens with one click.

  1. Open Tokens Studio in Figma (Plugins → Tokens Studio for Figma).
  2. Go to Settings → Sync Providers and choose GitHub.
  3. Enter your repository, branch, and the path to tokens.json.
  4. Generate a GitHub personal access token with repo read permission and paste it into the plugin.
  5. Click Save. Tokens Studio will pull the current token file immediately.
One-way sync recommendation: Treat DESIGN.md as the single source of truth. Make changes in DESIGN.md → regenerate tokens.json → push to GitHub → pull in Tokens Studio. Avoid making token edits directly in Tokens Studio if you want the file to remain the canonical source.

Updating tokens after a DESIGN.md change

The recommended workflow for propagating a token change:

# 1. Edit your DESIGN.md
# 2. Validate the change
npx @google/design.md lint DESIGN.md

# 3. Regenerate the token file
npx @google/design.md export --format dtcg DESIGN.md

# 4. Commit and push
git add tokens.json
git commit -m "chore: sync design tokens from DESIGN.md"
git push

# 5. In Figma → Tokens Studio → pull from GitHub

Token group mapping

The DTCG export maps DESIGN.md token categories to Tokens Studio groups as follows:

DESIGN.md key
Tokens Studio group
colors
color
typography.*
typography
spacing
spacing
rounded
borderRadius
components.*
composition

Applying tokens to Figma components

Once tokens are loaded in Tokens Studio, select any Figma layer and use the plugin’s inspector to assign token values. Tokens Studio maps token types to the correct Figma properties:

  • color tokens → Fill, Stroke, and Effect colors
  • spacing tokens → Auto-layout padding and gap
  • borderRadius tokens → Corner radius
  • typography tokens → Text style (font, size, weight, line height)
FigmaWriting for AI