Figma CSS Variables

About this plugin

Effortlessly export your Figma variables to CSS, SCSS, and JSON and deploy them to Git.

Questions & Support

💬 Figma CSS Variables is continually improving, and we welcome your feedback.

If you notice any bugs or have any questions about the plugin, feel free to reach out via GitHub Discussions, and we'll help you troubleshoot quickly.

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 generation: preview and export CSS, SCSS, or JSON from your variables (NEW)
3. Flexible export options: copy code 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
6. ZIP export: when exporting, a ZIP file is generated with all files at the root level

Note on JSON export (NEW): JSON allows you to directly export the Figma variable collections as returned by the Figma API, unlocking access to variable data even if your plan doesn't include full API access.

Deploy to Git (Premium feature)

Automatically deploy your generated CSS/SCSS/JSON files to Git for seamless design–code collaboration.

Unlock Git deployment 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 files using the "basePath" parameter

- Simplify collaboration between design and development

Git Integration & Security

Easily manage your Git providers:

- Add a new provider

- Edit the settings of an existing provider

- Delete 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 file is generated for each mode within a collection
2. Files follow the naming pattern: "collectionName-modeName.css", "collectionName-modeName.scss", or "collectionName-modeName.json"

Variable transformations

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

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. Variables are sorted alphabetically

UI & Accessibility

1. Dark mode compatible: adapts to Figma theme preference
2. Keyboard navigation: all interactive elements support keyboard use
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/SCSS/JSON Variables

1. Navigate to the Export tab
2. View all Figma variables structured into collections and modes
3. Select the output language (default: CSS). You can switch to SCSS or JSON as needed
4. Select a collection and a mode
5. Preview the generated code
6. Copy code directly to your clipboard or download all files

Deploying to Git (Premium feature)

1. Purchase a license via Stripe and enter it in the Settings tab
2. Add a Git provider from the Settings tab
3. Choose a provider (GitHub, GitLab)
4. Fill in the required details in the configuration modal
5. Save the provider settings
6. Go to the Deploy tab and select a provider
7. Select the output language (default: CSS)
8. Use the multiple selection dropdown to choose the modes you wish to deploy
9. Click Push to deploy the corresponding files to Git

Made with ❤️ by @yoriiis.