About
What is Styleframe - Variables Sync Figma Plugin?
Styleframe is a Figma plugin designed to be the single source of truth for design tokens, enabling seamless synchronization between code and Figma. It supports the W3C DTCG format for both importing design tokens into Figma and exporting Figma Variables back to JSON, preserving structure, aliases, and semantics. The tool offers full multi-mode support for themes such as light and dark, ensuring consistency across design and development. With a code-first architecture, tokens defined in TypeScript keep designers in sync when code changes. It features type-safe tokens with full TypeScript support, automation-ready CLI for CI/CD pipelines, and is free and open source, with no subscriptions or seat limits for its core functionality.
Best used for
Ideal for ux designers and graphic designers who need to synchronize design tokens between code and Figma, manage multi-mode themes, and automate design system updates. Especially valuable for teams seeking a single source of truth for their design tokens with full W3C DTCG support.
Common actions
design toolsopen-sourceDeveloper ToolsGitHub
Capabilities
Key features
- Sync design tokens
- W3C DTCG format
- Multi-mode theme support
- Bidirectional sync
- Code-first architecture
- Type-safe tokens
- CLI automation
Target Audience
ux designergraphic designer
Pricing & Plans
Free · Open Source · Paid
Not publicly disclosed. Check styleframe.dev for current pricing.
FAQs
What is the difference between Styleframe and Styleframe Pro?
Styleframe refers to the core, open-source tool for type-safe CSS and design token synchronization, which is free. Styleframe Pro is a collection of premium composables built on top of Styleframe, offering advanced features for building design systems, available via a one-time purchase.
Does the Styleframe Figma plugin support multi-mode themes?
Yes, the Styleframe Figma plugin offers full multi-mode support. It can import and export design tokens with light, dark, and custom themes, modeling them using DTCG modifiers to ensure themes are explicit, structured, and code-friendly.
Can I use Styleframe for client projects or commercial projects?
Yes, a Styleframe Pro license covers unlimited projects, including client work and commercial projects. However, creating website builders or tools that let users generate their own sites using Styleframe Pro components requires a special Builder License.
Shypd.aiThe largest open index of AI tools
