Styleframe

Styleframe

Type-safe, Composable CSS and Design Systems in TypeScript

9 followers

Visit website
•
Type-safe, composable CSS - from simple UI styles to full Design Systems, write code using Styleframe’s powerful TypeScript CSS API - AI-ready by design.
This is the 2nd launch from Styleframe. View more

Styleframe - Variables Sync Figma Plugin

Launched this week
Sync your design tokens between Figma and code
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.
Styleframe - Variables Sync Figma Plugin gallery image
Styleframe - Variables Sync Figma Plugin gallery image
Styleframe - Variables Sync Figma Plugin gallery image
Free
Launch tags:Design Tools•Open Source•Developer Tools
Launch Team / Built With
Wispr Flow: Dictation That Works Everywhere
Wispr Flow: Dictation That Works Everywhere
Stop typing. Start speaking. 4x faster.
Promoted

What do you think? …

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.