# Variable Visualizer

> Variable Visualizer (VV) is a Figma plugin and Mac desktop app for Figma variables. It visualizes variables, collections, modes, and aliases as a living graph. Designers build and debug visually. Developers export the graph once as JSON and resolve the exact same values at build time. There is no token translation layer.

Site: https://variablevisualizer.com/
Contact: team@variablevisualizer.com
Updated: 2026-08-18

## What it is

Variable Visualizer works with Figma variables as they exist in the file: names, collections, modes, and aliases. Figma documents this native system in [Guide to variables in Figma](https://help.figma.com/hc/en-us/articles/14506821864087). VV does not invent a second “token” vocabulary. The resolver evaluates the same relationships as Figma, so light, dark, and high-contrast modes stay aligned between design and production.

Solo VV is the desktop Variable Visualizer for Mac (macOS 12+, Apple Silicon, notarized DMG, free beta). Author the same living graph against real components. After Set up VV for this project, Solo writes `.vv` and generates React / Vue / Svelte / Web Component wrappers. Preview is those wrappers via the project dev server (HMR after one restart). React includes playground; Vue/Svelte/Web Components are wrappers + preview. Import/Export Figma VV JSON shares the graph with the plugin. Desktop AI is Codex + VV Doctor, not the plugin’s Claude assistant. No Intel, Windows, or Linux builds. Download page: https://variablevisualizer.com/solo-vv — always the latest GitHub Release: https://github.com/MrBiscuit/solo-vv-releases/releases/latest

## How design-to-dev works

1. Author and bind variables in VV (plugin or Solo VV).
2. Export the graph as JSON (typical path: `src/vv/variables.json`).
3. Import the JSON at build time. Only the resolver reads it.
4. Call `getVariableByName(name, modes)` to resolve values for the active modes.
5. Emit stable CSS or TypeScript artifacts for runtime.

AI assists with bindings, collections, modes, and color scales inside Figma. AI does not need the JSON export.

## Install Solo VV

1. Download the latest notarized Apple Silicon DMG from https://variablevisualizer.com/solo-vv (always the current GitHub Release).
2. Open the DMG and drag Variable Visualizer into Applications.
3. Launch, create or open a project, then choose Set up VV for this project. Restart the project dev server once.

## Plans (USD)

| Plan | Monthly | Annual | Notes |
| --- | --- | --- | --- |
| Free | $0 | $0 | Visualize collections, modes, aliases; import/export JSON/CSS; GitHub push |
| Professional | $12 | $99 | AI Assistant ($12 credits/mo), team library, operators, remote mode simulation |
| Pro Plus | $24 | $199 | Everything in Professional plus $24 AI credits/mo, priority AI, extended models |
| Team | Tiered | Tiered | Pro Plus per seat, volume pricing for 2+ seats |
| Enterprise | Custom | Custom | Local deploy, custom features, integrations, SLAs |

Organization-wide or platform use requires an enterprise agreement. VV remains an independent product and brand.

## FAQ

**What is the difference between Figma variables and design tokens?**
Figma variables are the native names, collections, modes, and aliases in your Figma file. Design tokens often imply an extra translation layer. VV ships Figma variables through a build-time resolver — no token pipeline.

**How do I export Figma variables to code?**
Export the VV graph as JSON, store it at a predictable path, import it at build time, and resolve with the same mode set you designed.

**Can VV resolve light and dark modes?**
Yes. Modes are first-class. The resolver computes the correct value for each mode at build time.

**What is Solo VV versus the Figma plugin?**
The plugin authors the graph inside Figma. Solo VV is the Mac desktop Variable Visualizer: the same graph against real components, with generated wrappers, live preview, and Figma VV JSON interchange. Apple Silicon only. Figma does not need to be installed.

**Does Solo VV write into my repository?**
Only after Set up VV for this project. That writes `.vv`, generated wrappers, and a Vite or Webpack plugin. Uninstall VV restores the previous setup.

**How much does the Solo VV Mac beta cost?**
Free download. Homepage plugin plans apply to the Figma product.

**Can a whole company use VV as a design-system engine?**
Yes, under an enterprise agreement. Individual plugin subscriptions are for personal or small-team use.

**Do I paste the JSON export into an AI?**
No. Bindings are written in Figma or Solo VV. Only the resolver reads the JSON at build time.

**Who operates Variable Visualizer?**
An independent project based in Berlin, Germany. Contact team@variablevisualizer.com. Not affiliated with, endorsed by, or sponsored by Figma, Inc.

## Pages

- Home: https://variablevisualizer.com/
- Solo VV: https://variablevisualizer.com/solo-vv
- About: https://variablevisualizer.com/about
- Pricing: https://variablevisualizer.com/#pricing
- FAQ: https://variablevisualizer.com/#faq
- Terms: https://variablevisualizer.com/terms
- Privacy: https://variablevisualizer.com/privacy
- Plugin: https://figma.fun/vv
- Tutorial: https://www.figma.com/community/file/1460568328614288208/get-started-with-variable-visualizer
- Discord: https://discord.gg/hRhCH7BaDg
- Releases: https://github.com/MrBiscuit/solo-vv-releases/releases
- AI summary: https://variablevisualizer.com/ai/summary.json
- AI FAQ: https://variablevisualizer.com/ai/faq.json
- AI service: https://variablevisualizer.com/ai/service.json
- Solo VV machine card: https://variablevisualizer.com/ai/solo.json