VarVar

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. It can also import a previously exported JSON file back into a document, recreating collections, modes, variables, and linked variables.FeaturesMultiple Export Formats: JSON, JavaScript, CSV, CSS, and Tailwind CSSJSON Import§: Re-populate collections, modes, variables, and linked-variable references from a previously exported JSON file, with an optional "replace existing variables"Format-Specific Menu Commands: Direct access to each export format from the Figma menuLinked Variable Support: Properly handles linked variables across all formats†Scope-Aware Types: JSON, CSV, and JS exports map variable scopes (CORNER_RADIUS, FONT_WEIGHT, OPACITY, etc.) to DTCG $types instead of bare numbersExtended Collection Hierarchy Export (Enterprise, BETA)‡: All export formats detect Enterprise extended collections and preserve inherited vs. overridden values instead of flattening them. JSON additionally splits into a .zip of per-collection files when extended collections are present; CSS, CSV, and JS represent the inheritance inline in a single file.Legacy Format Toggle: JSON, CSV, and JS exports have a "legacy format (v2.x)" option to export in the pre-3.0 shape, for anyone whose tooling relies on itPreview & 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 conventionsNotes:† 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).‡ Enterprise fella? We'd love your feedback on this one, please open an issue with anything that looks off.§ A leading `.` or `_` is Figma's own convention for marking a collection, variable, or group "private" (hidden from publishing). Import handles this correctly: linked-variable references are matched against your file's actual collection/mode names (so a `.` isn't confused with the JSON path separator), and any newly created collection/variable whose name starts with `.` or `_` gets `hiddenFromPublishing` set to match, so the privacy actually carries over rather than just looking private. Still review the import summary's warnings for anything it couldn't confidently match.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!Importing Variables (JSON)Open your Figma fileRun the VarVar plugin from the Plugins menuChoose **Import…**Select one or more JSON files previously exported by VarVarOptionally turn on "Replace existing variables" — this deletes all existing local variable collections before importing, so you'll be asked to confirm firstClick "Import Variables"VarVar is open source, consider contributing. Code available on GitHub.For bug reports, suggestions, or questions, please open an issue.