Sync variables

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