Export Variables

Overview

The Export feature allows you to export one or more variable collections from your Figma file to JSON format. This is useful for:

Creating backups of your design tokens
Version control with Git
Sharing variables between Figma files
Importing into other design tools
Documentation and auditing

How to Export

Step-by-Step Guide

1
Open Export Tab
Launch Variables Studio and navigate to the Export tab. You'll see a list of all variable collections in your file.
2
Select Collections
Click the checkbox next to each collection you want to export. You can:
- Select individual collections
- Select all collections at once
- Use search to find specific collections
3
Export to JSON
Click "Export Selected" button. A JSON file will be downloaded to your default downloads folder.

Export Features

Search Collections

Quickly find collections by name using the search bar. Great for large files with many collections.

Sort Options

Sort collections alphabetically (A→Z or Z→A) to organize your workspace.

Batch Selection

Select multiple collections at once or use "Select All" to export everything in one go.

Sample Data

Download a sample JSON file to see the format and structure before exporting your own data.

What Gets Exported

Variables Studio exports complete variable data with full fidelity:

✓ Collection Information

Collection name and all modes (Light, Dark, etc.)

✓ All Variable Types

Color, Number, String, and Boolean variables

✓ Variable Values

All values for each mode, including nested groups

✓ Variable Scopes

Where each variable can be used (fills, strokes, text, etc.)

✓ Variable Aliases

References between variables are preserved as aliases

✓ Code Syntax

Code-friendly syntax settings for variable names

JSON Format

Exported JSON follows a clean, hierarchical structure:

[
  {
    "Colors": {
      "modes": {
        "Light": {
          "Primary": {
            "$type": "color",
            "$value": "#0066FF",
            "$scopes": ["ALL_SCOPES"]
          },
          "Background": {
            "$type": "color",
            "$value": "#FFFFFF",
            "$scopes": ["FRAME_FILL", "SHAPE_FILL"]
          }
        },
        "Dark": {
          "Primary": {
            "$type": "color",
            "$value": "#66B3FF",
            "$scopes": ["ALL_SCOPES"]
          },
          "Background": {
            "$type": "color",
            "$value": "#1A1A1A",
            "$scopes": ["FRAME_FILL", "SHAPE_FILL"]
          }
        }
      }
    }
  }
]

📖 Learn More

For complete JSON format specification, see the JSON Format Documentation

Tips & Best Practices

💡 Use Version Control

Commit exported JSON files to Git to track changes to your design tokens over time.

💡 Regular Backups

Export your variables regularly as a backup. Store them in a safe location.

💡 Organize by System

If you have multiple design systems, export each one separately for better organization.

💡 File Naming

Exported files are named "variables-export.json". Rename them to include version or date for better tracking.