Styleframe

About this plugin

Styleframe - Design Token Sync

Bridge the gap between code and design. Styleframe lets you import and export design tokens using the industry-standard W3C DTCG (Design Tokens Community Group) format, keeping your Figma variables perfectly synchronized with your codebase.

Import Tokens into Figma

1. Drag and drop your DTCG JSON file into the plugin
2. Preview all variables and modes before importing
3. Automatically create Figma variable collections with proper type mapping
4. Preserve token aliases as native Figma variable references

Export Figma Variables

1. Select any variable collection and export to DTCG JSON
2. Copy to clipboard or download as a file
3. Hierarchical token structure and aliases preserved
4. Works with any tool that supports the DTCG format

Multi-Mode Support

Light, dark, and custom themes are preserved as Figma modes. Your theme structure stays intact across every sync - no manual mode setup required.

Code-First Workflow

Designed to work with the Styleframe - the open-source tool for writing type-safe, composable, and future-proof CSS in TypeScript. Define tokens in TypeScript, export via CLI, import into Figma. When code changes, designers stay in sync. Works great standalone too - compatible with Style Dictionary, Tokens Studio, and other DTCG-compatible tools.

Free & Open Source

No subscriptions. No seat limits. No premium features hidden behind a paywall. Your design system, your rules.

Resources

1. Styleframe Documentation
2. Figma Plugin Guide
3. GitHub