Color Variables Visualiser

About this plugin

Color Variables Visualiser turns your Figma color variables into a clean, visual color system overview - perfect for design audits, documentation, and handoff.

With one click, the plugin scans all local color variables in your file and generates a structured layout of color cards, grouped by series (e.g. “Primary”, “Secondary”, “Neutral”).

Each card shows:

* A large color swatch

* The full variable name (e.g. Primary/500)

* RGB hex and RGBA hex values

* HSL and HSB values

The plugin preserves the order of your variables from the Variables panel, sorts shades numerically when possible (e.g. 100 → 900), and handles white colors with a dark card background for better readability.

Use Color Variables Viewer to:

* Document your design system colors on the canvas

* Share color specs with developers and stakeholders

* Audit and compare palettes across themes or collections