Token Export (DTCG & CSS)
Design tokens are synced in CSS-first mode by default, with DTCG still available for legacy or interoperability workflows.
How it works
After editing tokens in Figma, Push to Code creates a PR using the configured source mode. In `auto`, CSS is primary and DTCG is fallback. In `css`, only the CSS token file is targeted by default. In `dtcg`, the DTCG token file is targeted for legacy flows. You can optionally enable DTCG sync during CSS-first pushes for dual-file workflows. The plugin also shows the active token source (file + mode) so teams can verify exactly which source was used.
Usage
- 1
Edit or create variables in Figma's Variables panel.
- 2
Open plugin Settings and choose token source mode: `auto`, `css`, or `dtcg`.
- 3
Set token paths for the source mode you want to target, and optionally enable DTCG sync for CSS pushes.
- 4
Click 'Push Tokens to Code' to auto-detect token changes for this run (use 'Detect & Sync Changes' only when you want a manual preflight).
- 5
If no token diff exists, the plugin reports that everything is already in sync instead of creating an empty PR.
- 6
Use `pnpm tokens:sync` (or `pnpm tokens:sync --from-css ...`) to refresh generated runtime artifacts when needed.