Variable Viz

About this plugin

Stop digging through menus to see your design tokens.

Figma Variables are powerful, but they are hidden inside a modal. Variable Viz bridges the gap between design logic and visual documentation by instantly generating a clean, organized, and professional Style Guide directly on your canvas.

Whether you are building a complex Design System or handoff documentation for developers, Variable Viz saves you hours of manual layout work.

🚀 Key Features:

One-Click Documentation: Scans your local collections and generates beautifully labeled swatches and spacing scales.

Supports Multi-Mode: Display Light, Dark, and other modes side-by-side automatically.

Smart Categorization: Automatically groups variables by their naming convention (e.g., Brand/Primary).

Live-Sync Ready: Update your variables in the menu and refresh your documentation frame instantly.

Auto-Layout Native: Generated frames use Auto-Layout, so they stay organized even if you manually edit them.

🛠 How it works:

Open Variable Viz.

Select the Variable Collections you want to visualize.

Click "Generate Style Guide."

Watch your documentation build itself!