Color Variable Style-Guide Generator

About this plugin

✨ What it does

The Color Variable Style Guide Generator transforms your local Figma variable collections into beautifully structured, easy to read style guides. With just one click, it builds visual documentation for your color tokens.

This plugin is especially useful for teams managing design tokens in Figma, offering a fast and consistent way to visualize color systems across different brands, themes, or modes.

🧩 Features

1. Visualizes all local color variable collections in a single click
2. Groups colors hierarchically by their naming structure (for example, Brand/Primary/Default)
3. Shows variable modes with automatic layout
4. Displays HEX values or reference paths
5. Includes optional descriptions and notes
6. Fully styled, no manual layout needed
7. Works out of the box, no setup or configuration

👥 Who is it for

This plugin is designed for teams and individuals who work with Figma design tokens or color systems. It is especially helpful for:

1. Design system maintainers
2. UX and UI designers managing multi-brand or multi-theme setups
3. Developers and stakeholders who need a visual reference
4. Anyone preparing documentation or handoff for color variables

💬 Support and feedback

Having issues or want to suggest a feature? Feel free to reach out or leave feedback on the plugin page. This tool was created to simplify the design token workflow in Figma, so suggestions are always welcome.

🔐 Permissions

This plugin only reads from your local variable collections. It does not access or upload any of your data externally. So it's safe for companies to use!