Alex Grozav

Styleframe - Variables Sync Figma Plugin - Sync your design tokens between Figma and code

by
Bridge the gap between code and design. Designed to work with the Styleframe - the engine for writing type-safe, composable, and future-proof CSS in TypeScript. Styleframe lets you import and export design tokens using the industry-standard W3C DTCG format, keeping your Figma variables perfectly synchronized with your codebase. Compatible with Style Dictionary, Tokens Studio, and other DTCG-compatible tools. No subscriptions. No seat limits. Your design system, your rules.

Add a comment

Replies

Best
Alex Grozav
Maker
📌
Hey Product Hunters, I just released a new Figma plugin called Styleframe - Design Token Sync. I’m sharing it here to help others who run into the same problem I often do: design tokens in Figma and code drifting out of sync. This plugin syncs design tokens using the W3C DTCG (Design Tokens Community Group) format, so it plays nicely with other tooling and doesn’t lock you into a proprietary schema. What you can do with it: - Import DTCG JSON → Figma Variables (collections + type mapping) - Preserve aliases as real Figma variable references - Keep multi-mode themes intact (light/dark/custom) - Export Styleframe TypeScript code → DTCG JSON (hierarchy + aliases preserved) - Export Figma Variables → DTCG JSON (hierarchy + aliases preserved) A bit of context: Styleframe is my type-safe, composable CSS framework for building design systems. This plugin is part of that ecosystem: when tokens change in code, you can export them and import into Figma Variables so designers stay in sync without manual re-entry. That said, the plugin also works great standalone with any DTCG-compatible setup (Style Dictionary, Tokens Studio, etc.). It’s free forever and open source (no subscriptions, no seat limits). If you try it, I’d love your feedback - especially around variable type mapping edge cases, modes/theme structures, or any DTCG compatibility gaps you run into! I'm happy to iterate quickly based on what people need.