6.DTCG export to Tokens Studio or Figma Variables

Name: Dembrandt
Author: Dembrandt

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 brand.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

1.Basic token extraction 2.Multi-page crawl 3.Dark mode analysis 4.Mobile vs. desktop token comparison 5.Screenshot + token visual audit 7.Extract specific paths and merge 8.Raw vs. filtered color analysis 9.Extract Cloudflare-protected sites with Firefox 10.Extract authenticated views via CDP

Browse all

All recipes →

43 workflows