Color Variable Token Table Generator

Automatically create visual documentation tables from your existing color variable collections. Perfect for design system documentation, developer handoffs, or keeping your team aligned on color tokens across light and dark modes.

What it does:

The plugin reads your Figma color variables and generates organized, hierarchical tables showing token names, color swatches for both light and dark modes, and usage information—all in one click.

Supported features:

Color variables with light/dark mode valuesHierarchical token organization (primary, secondary, tertiary groupings)Automatic sorting by token importance and modifiersVisual distinction between base tokens and variantsCollection name headers with descriptionsHow to use:

Define your color variables in Figma's native variable systemRun the pluginSelect which collection to generate tables forGet a fully formatted, ready-to-use token reference tableBest for:

Design system documentationDeveloper handoff materialsColor token audits and reviewsTeam onboarding resourcesRequirements:

Color variables must use Figma's native variable systemVariables should have both light and dark mode values definedToken names work best with hyphen-delimited naming (e.g., text-primary, bg-secondary-hover)Created by Corey Peruffo. Have feedback or feature requests? Let me know!