Figma CSS Variables: Design Tokens Export & Deploy

About this plugin

Export your Figma variables to 9 languages and deploy them to Git. No intermediate JSON file or extra transformation tool required.FeaturesFree5 exports per month (all languages and color formats included, resets monthly)Analyze your variables: view all Figma variable collections and modesCheck your variables: detect broken aliases, type mismatches, naming issues, duplicate values, and unused variables before exportInstant generation: preview and export to all supported languages and color formatsCopy with one click: copy generated code to your clipboardLive sync: always up to date with your latest Figma variablesPro (Free trial available)Everything in Free, plus:Unlimited exports: no monthly capBulk export: download all collections and modes as a single ZIP fileDetailed issue preview: expand each check category to see exactly which variables are affected, with names, messages, and collection contextGit deployment: push files directly to GitHub, GitLab, Azure DevOps, Bitbucket, or self-hosted GitLabMultiple collections and modes in a single commitCustom prefix: add a prefix to all exported variable names (e.g., "my-app--color-primary")Alias control: preserve alias references ("var(--alias)") or resolve them to raw valuesAuto pre-filled commit messages, editable before pushingCustomizable branch and target directoryGit Integration & SecurityGenerated code becomes your version-controlled source of truth, replacing the traditional multi-step pipeline.Easily manage your Git providers:Add a new providerEdit the settings of an existing providerDelete 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.{extension}" (e.g., "colors-light.css", "spacing-compact.ts")Variable transformationsFigma variables are transformed to ensure they are valid for each target language:Slashes ("/"), dots ("."), 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 use1. Export: Go to the Export tab and pick a language (CSS, SCSS, Tailwind v4, TypeScript, DTCG, Figma JSON, SwiftUI, Jetpack Compose, or Flutter). Select a collection and mode, then copy or download your tokens.2. Check (Free): Go to the Check tab to validate your variables. Issue counts are shown for all users; upgrade to Pro for a full detailed breakdown.3. Deploy (Pro): Add a Git provider in Settings, then go to Deploy to push your files to GitHub, GitLab, Azure DevOps, or Bitbucket with a single click.---Questions & SupportHave a question or found a bug? Reach out on GitHub Discussions or report an issue.---Made with ❤️ by @yoriiis