Styleframe - Variables Sync Figma Plugin – Sync design tokens between Figma and code using W3C DTCG format

Summary: Styleframe syncs design tokens between Figma and codebases using the W3C Design Tokens Community Group (DTCG) format. It enables importing and exporting tokens while preserving variable references, themes, and hierarchy, ensuring design and code stay aligned without manual updates.

What it does

The plugin imports DTCG JSON into Figma Variables and exports Figma Variables or Styleframe TypeScript code back to DTCG JSON. It preserves aliases, multi-mode themes, and variable hierarchies, maintaining consistency across design and development tools.

Who it's for

It is intended for designers and developers managing design tokens across Figma and code, especially those using Styleframe or other DTCG-compatible tools like Style Dictionary and Tokens Studio.

Why it matters

It solves the problem of design tokens drifting out of sync between design files and code by automating synchronization using an open, standardized format.