Sync variables

About this plugin

Import/export your Figma variables to as simple as CSS variables.Would love to hear your feedback. Supported FeaturesMode: Facilitates theme variation with -dark suffixed variables.All variable types are supported: color, string, number, booleanUpdate Matching Collections: Prevents duplicate collections by updating existing ones.Alias Support: Maintains Figma aliases in import/export process(as a CSS variable).Length unit supported: px and rem length units are supported.Description supported in both import and exportExport FunctionalityExports CSS variables from any collections or modesNumbers format supported: px, remColor format supported: rgba, hex, hslAlias are preservedPrefix and postfix option available.Import FunctionalityImport variables in either new collection or update an existing collection.Associates Figma aliases with their CSS variables var(--variable), ensuring consistency across the design system.All variables are supportedA simple CSS file variables work for import:root {--color-bg-dark: hsl(0, 69%, 67%);--color-bg-brand-dark: #0c8ce9;--color-bg-brand-hover-dark: #0a6dc2;--color-bg-component-dark: #8a38f5;--color-bg-component-hover-dark: #7a2ed6;}This Figma plugin enhances the design-to-development workflow, ensuring a cohesive and efficient transfer of design tokens from Figma to CSS, and is an invaluable asset for managing large-scale design systems or theme variations like light and dark modes.Powered by yupma.com