Export & Import Variables | JSON Ultimate
Export & Import Variables as JSON files
Plugin Preview
About this plugin
Export & Import Variables - Figma Plugin
A minimal Figma plugin for exporting and importing design variables in a standardized JSON format.
Features
Export Variables
- Exports all variable collections, modes, and variables from the current Figma file
- Generates a JSON file with the exact format specified in the requirements
- Downloads automatically with timestamped filename: `variables_export_YYYY-MM-DDTHHMMSS.json`
Import Variables
- Imports variables from a JSON file in the same format
- Updates existing variables if found by collection name + variable name + type
- Creates missing collections, modes, or variables if they don't exist
- Shows simple status message with counts of updated and created variables
JSON Format
The plugin uses a minimal JSON format:
```json
{
"version": 1,
"collections": [
{
"name": "Theme",
"modes": ["Light", "Dark"],
"variables": [
{
"name": "color/bg",
"type": "color",
"valuesByMode": {
"Light": "#FFFFFF",
"Dark": "#000000"
}
}
]
}
]
}
```
Format Rules
- `version` is always 1
- `modes` array is in the order defined in the collection
- `valuesByMode` maps mode name to literal value
- Only includes the fields above — no aliases, descriptions, or scopes
Usage
1. **Export**: Click "Export Variables (JSON)" to download all variables
2. **Import**: Click "Import Variables (JSON)" and select a JSON file to import
Plugin Details
| Version | 3 |
|---|---|
| Created | August 10, 2025 |
| Last Updated | August 12, 2025 |
| Category | Import & export plugins |
| Creator | Palatip Jantawong |
| Stats | 13 installs, 4 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Import & export plugins category.
html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Convert any website into fully editable Figma designs
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Figma to HTML
Convert Figma design to HTML