Styleframe

About this plugin

Styleframe - Design Token SyncBridge 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 FigmaDrag and drop your DTCG JSON file into the pluginPreview all variables and modes before importingAutomatically create Figma variable collections with proper type mappingPreserve token aliases as native Figma variable referencesExport Figma VariablesSelect any variable collection and export to DTCG JSONCopy to clipboard or download as a fileHierarchical token structure and aliases preservedWorks with any tool that supports the DTCG formatMulti-Mode SupportLight, dark, and custom themes are preserved as Figma modes. Your theme structure stays intact across every sync - no manual mode setup required.Code-First WorkflowDesigned 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.import { styleframe } from 'styleframe';import { useColor } from '@styleframe/theme';const s = styleframe();const { variable, ref } = s;const spacing = variable('spacing', '1rem');const { colorPrimary, colorSecondary } = useColor(s, { primary: '#318fa0', secondary: '#ff5733'});export default s;Free & Open SourceNo subscriptions. No seat limits. No premium features hidden behind a paywall. Your design system, your rules.ResourcesStyleframe DocumentationFigma Plugin GuideGitHub