Color Variable Style-Guide Generator

✨ What it doesThe 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.

🧩 FeaturesVisualizes all local color variable collections in a single clickGroups colors hierarchically by their naming structure (for example, Brand/Primary/Default)Shows variable modes with automatic layoutDisplays HEX values or reference pathsIncludes optional descriptions and notesFully styled, no manual layout neededWorks out of the box, no setup or configuration👥 Who is it forThis plugin is designed for teams and individuals who work with Figma design tokens or color systems. It is especially helpful for:

Design system maintainersUX and UI designers managing multi-brand or multi-theme setupsDevelopers and stakeholders who need a visual referenceAnyone preparing documentation or handoff for color variables💬 Support and feedbackHaving 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.

🔐 PermissionsThis 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!