Sync variables

About this plugin

Import/export your Figma variables to as simple as CSS variables.

Would love to hear your feedback.

Supported Features

1. Mode: Facilitates theme variation with -dark suffixed variables.
2. All variable types are supported: color, string, number, boolean
3. Update Matching Collections: Prevents duplicate collections by updating existing ones.
4. Alias Support: Maintains Figma aliases in import/export process(as a CSS variable).
5. Length unit supported: px and rem length units are supported.
6. Description supported in both import and export

Export Functionality

1. Exports CSS variables from any collections or modes
2. Numbers format supported: px, rem
3. Color format supported: rgba, hex, hsl
4. Alias are preserved
5. Prefix and postfix option available.

Import Functionality

1. Import variables in either new collection or update an existing collection.
2. Associates Figma aliases with their CSS variables var(--variable), ensuring consistency across the design system.
3. All variables are supported

A simple CSS file variables work for import

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