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.FeaturesExport & SyncAnalyze your variables: view all Figma variable collections and modesInstant generation: preview and export CSS, SCSS, or JSON from your variables (NEW)Flexible export options: copy code directly or download all generated CSS filesOne-click synchronization: always stay up to date with your latest Figma variablesWhen exporting, a ZIP file is generated with all the CSS files at the root levelZIP export: when exporting, a ZIP file is generated with all files at the root levelNote 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 developmentGit Integration & SecurityEasily manage your Git providers:- Add a new provider- Edit the settings of an existing provider- Delete a provider if it's no longer neededWhen 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 structureA separate file is generated for each mode within a collectionFiles follow the naming pattern: "collectionName-modeName.css", "collectionName-modeName.scss", or "collectionName-modeName.json"Variable transformationsFigma variables are transformed to ensure they are valid in CSS/SCSS:Slashes ("/") and spaces are replaced with hyphens ("-") in variable namesOriginal casing of variable names is preserved (uppercase, lowercase, etc.)For numeric variables ("FLOAT" type), the unit "px" is automatically addedVariables are sorted alphabeticallyUI & AccessibilityDark mode compatible: adapts to Figma theme preferenceKeyboard navigation: all interactive elements support keyboard useFocus indicators: clear visual focus on form fields and interactive elementsAccessibility compliance: designed following W3C and A11Y best practicesHow to useExporting CSS/SCSS/JSON VariablesNavigate to the Export tabView all Figma variables structured into collections and modesSelect the output language (default: CSS). You can switch to SCSS or JSON as neededSelect a collection and a modePreview the generated codeCopy code directly to your clipboard or download all filesDeploying to Git (Premium feature)Purchase a license via Stripe and enter it in the Settings tabAdd a Git provider from the Settings tabChoose a provider (GitHub, GitLab)Fill in the required details in the configuration modalSave the provider settingsGo to the Deploy tab and select a providerSelect the output language (default: CSS)Use the multiple selection dropdown to choose the modes you wish to deployClick Push to deploy the corresponding files to GitMade with ❤️ by @yoriiis.