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. Now with format-specific menu commands for faster exports!

Features

1. Multiple Export Formats: JSON, JavaScript, CSV, CSS, and Tailwind CSS
2. Format-Specific Menu Commands: Direct access to each export format from the Figma menu
3. Linked Variable Support: Properly handles linked variables across all formats
4. Preview & Copy: Preview exported data and easily copy to clipboard
5. Download: Exported variables can be downloaded as files
6. Row/Column Positioning: CSV option for spreadsheet formula-like linking

Linked Variable Handling

1. JSON: Linked variables start with $.VARIABLE.PATH
2. JavaScript: Linked variables are referenced directly like collection.mode.variable
3. CSV: Linked variables start with =VARIABLE/PATH (with optional row/column positioning)
4. CSS: Linked variables use CSS custom property syntax: --var-name: var(--VARIABLE)
5. 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).

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. Click "Download File". If `Preview output` is off, 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. Click "Download File". If `Preview output` is off, the exported file will be automatically downloaded

Preview and Copy

1. Toggle the "Preview output" switch to see the exported data within the plugin interface.
2. 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.