Back to Plugins
VarVar

VarVar

Export Figma Variables to JSON, JS, CSV or CSS (also Tailwind CSS)

variables to jsonvariable to jsvariables to tablecsstokensvariables to cssvariablesvariables to csvexport variablesjscsvjson

Plugin Preview

VarVar preview

About this plugin

VarVar is a Figma plugin that allows you to export your Figma variables to JSON, JS, CSV, CSS, or Tailwind CSS formats, making it easier to integrate your design tokens into your development workflow. Now with format-specific menu commands for faster exports!FeaturesMultiple Export Formats: JSON, JavaScript, CSV, CSS, and Tailwind CSSFormat-Specific Menu Commands: Direct access to each export format from the Figma menuLinked Variable Support: Properly handles linked variables across all formatsPreview & Copy: Preview exported data and easily copy to clipboardDownload: Exported variables can be downloaded as filesRow/Column Positioning: CSV option for spreadsheet formula-like linkingLinked Variable HandlingJSON: Linked variables start with $.VARIABLE.PATHJavaScript: Linked variables are referenced directly like collection.mode.variableCSV: Linked variables start with =VARIABLE/PATH (with optional row/column positioning)CSS: Linked variables use CSS custom property syntax: --var-name: var(--VARIABLE)Tailwind CSS: Linked variables use CSS custom property syntax with Tailwind naming conventions*Note: When dealing with linked variables that have multiple modes, the plugin will only link to the first occurrence (i.e., the first mode it finds).UsageDesign ModeOpen your Figma file containing variablesRun the VarVar plugin from the Plugins menuChoose your desired export format (JSON, JS, CSV or CSS)Click "Export Variables"Click "Download File". If `Preview output` is off, the exported file will be automatically downloadedDev ModeOpen your Figma file containing variablesSwitch to Dev ModeRun the VarVar plugin from the Plugins menuChoose your desired export format (JSON, JS, CSV or CSS)Click "Export Variables"Click "Download File". If `Preview output` is off, the exported file will be automatically downloadedPreview and CopyToggle the "Preview output" switch to see the exported data within the plugin interface.Copy the results in one click!VarVar is open source, consider contributing. Code available on GitHub.For bug reports, suggestions, or questions, please open an issue.

Plugin Details

Version6
CreatedFebruary 19, 2024
Last UpdatedNovember 17, 2025
CategorySoftware development
CreatorFelipe Hefler
Stats258 installs, 31 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:src/index.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none