Skip to main content
Home/Recipes/DTCG export to Tokens Studio or Figma Variables
Extraction

DTCG export to Tokens Studio or Figma Variables

DesignerDeveloper

Overview

Export extracted tokens in W3C DTCG format and convert them to a Tokens Studio-compatible structure with semantic group nesting — ready to import directly into Tokens Studio or as Figma Variables.

The --dtcg flag exports tokens in the W3C Design Tokens Community Group format, the emerging standard for interoperable token exchange. Tokens Studio and Figma Variables both support DTCG-adjacent formats but require specific group nesting conventions. Use an AI agent to convert the DTCG output into the exact structure each tool expects: color/brand/primary, typography/scale/base, and so on. The result imports cleanly without manual restructuring.

Export DTCG format

Terminal
dembrandt example.com --dtcg --save-output
Agent prompt
# Load the DTCG JSON, then:
"Convert this DTCG token file to a Tokens Studio-compatible
structure with semantic group nesting:
- color/brand/primary, color/brand/accent, color/surface/default
- typography/scale/base, typography/scale/large, typography/label/small
- spacing/1, spacing/2... radius/sm, radius/md
Output valid JSON ready to paste into Tokens Studio
or import as Figma Variables."
Output

DTCG JSON restructured for Tokens Studio or Figma Variables import. No manual token entry.

More in Extraction

Basic token extractionMulti-page crawlDark mode analysisScreenshot + token visual auditExtract and merge tokens across key pagesRaw vs. filtered color analysisExtract Cloudflare-protected sites with FirefoxExtract authenticated views via CDP

Browse all

All recipes →

52 workflows

Continue reading

Getting started

Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.

Read more

MCP

Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent extracts live design tokens automatically when you ask.

Read more

Skills

30 UX and design system skills for AI agents. Install once, your agent designs with hierarchy, WCAG standards, and brand accuracy. The UX knowledge that normally costs senior consultant days.

Read more