Figma CSS Variables

About this plugin

Effortlessly export your Figma variables to CSS. Git deployment is coming soon!

Questions & Support

💬 Figma CSS Variables is new and we welcome your feedback.

If you notice any bugs or have any questions about the plugin, please feel free to reach out to us directly via GitHub Discussions, and we'll do our best to help you troubleshoot and resolve them as quickly as possible.

You can also report issues or suggest features on GitHub Issues.

Features

Export & Sync

1. Analyze your variables View all Figma variable collections and modes
2. Instant CSS generation Preview and export CSS from your variables
3. Flexible export options Copy CSS directly or download all generated CSS files
4. One-click synchronization Always stay up to date with your latest Figma variables
5. When exporting, a ZIP file is generated with all the CSS files at the root level

Deploy to Git (Premium feature)

This feature allows you to automatically deploy your generated CSS variable files to Git for seamless design–code collaboration.

Unlock Git deployment by purchasing a license via Stripe.

- Connect to GitHub, GitLab, or a self-hosted GitLab instance

- Select multiple collections & modes to deploy in a single commit

- Commit messages are automatically pre-filled based on your selection

- Branches are customizable and automatically created if they do not exist

- Customize the target directory for your CSS files using the "basePath" parameter

- Simplify collaboration between design and development

Git Integration & Security

You can easily manage your Git providers by:

- Adding a new provider

- Editing the settings of an existing provider

- Deleting a provider if it's no longer needed

When saving a Git provider, the following fields are available:

"token", "owner", "repository", "branch", "basePath" and "host" (for self-hosted GitLab).

Your Git provider details are stored locally on your machine for privacy and security.

File structure

1. A separate CSS file is generated for each mode within a collection
2. Files follow the naming pattern: "collectionName-modeName.css"

Variable transformations

Figma variables are transformed to ensure they are valid in CSS:

1. Slashes ("/") and spaces are replaced with hyphens ("-") in variable names
2. Original casing of variable names is preserved (uppercase, lowercase, etc.)
3. For numeric variables ("FLOAT" type), the unit "px" is automatically added
4. CSS variables are sorted alphabetically

UI & Accessibility

1. Dark mode compatible: the plugin adapts to the user's Figma theme preference (light/dark mode)
2. Keyboard navigation: all interactive elements support keyboard navigation for improved accessibility
3. Focus indicators: clear visual focus on form fields and interactive elements
4. Accessibility compliance: designed following W3C and A11Y best practices

How to use

Exporting CSS Variables

1. Navigate to the Export tab
2. View all Figma variables structured into collections and modes (a collection contains multiple modes)
3. Select a collection and a mode
4. Preview the generated CSS
5. Copy the generated CSS directly to your clipboard or download all CSS files

Deploying to Git (Premium feature)

- Purchase a license via Stripe and enter it in the Settings tab

- Add a Git provider from the Settings tab

- Choose a provider from the available options (GitHub, GitLab)

- Fill in the required details in the configuration modal

- Save the provider settings

- Next, go to the Deploy tab and select a provider from the list

- Use the multiple selection dropdown to choose the modes you wish to deploy

- Click Push to deploy the corresponding CSS files to Git

Made with ❤️ by @yoriiis.