VarVar

About this plugin

VarVar is a Figma plugin that allows you to export your Figma variables to JSON, JS, CSV or CSS formats, making it easier to integrate your design tokens into your development workflow.

Features

1. Export Figma variables to JSON, JS, CSV or CSS formats
2. Identifies linked variables
3. JSON: linked variables start with $.VARIABLE.PATH*
4. JS: linked variables are referenced directly like collection.mode.variable (unquoted). Numeric paths are converted to bracket notation: collection.mode["500"]
5. CSV: linked variables start with =VARIABLE/PATH*. CSV Option: “Use row & column positions”. This will produce instead a "formula-like" (i.e. =E7) linking in spreadsheet programs.
6. CSS: linked variables will call CSS function var(--VARIABLE). Variable in collections with one single mode will be put into :root{}, otherwise they will have their own class, i.e. .collection--mode{}
7. Preview exported data within the plugin interface
8. Automatically download exported files

*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).

Usage

Design Mode

1. Open your Figma file containing variables
2. Run the VarVar plugin from the Plugins menu
3. Choose your desired export format (JSON, JS, CSV or CSS)
4. Click "Export Variables"
5. The exported file will be automatically downloaded

Dev Mode

1. Open your Figma file containing variables
2. Switch to Dev Mode
3. Run the VarVar plugin from the Plugins menu
4. Choose your desired export format (JSON, JS, CSV or CSS)
5. Click "Export Variables"
6. The exported file will be automatically downloaded

Preview and Copy

Toggle the "Preview output" switch to see the exported data within the plugin interface

Use the "Select to Copy" button and copy (Ctrl/Command + C) the exported data to your clipboard. (Programmatically copying is currently not supported by Figma Plugin APIs).

VarVar is open source, consider contributing. Code available on GitHub.

Bug report, suggestions, etc. Open an issue.