Color Variable Token Table Generator

About this plugin

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:

1. Color variables with light/dark mode values
2. Hierarchical token organization (primary, secondary, tertiary groupings)
3. Automatic sorting by token importance and modifiers
4. Visual distinction between base tokens and variants
5. Collection name headers with descriptions

How to use:

1. Define your color variables in Figma's native variable system
2. Run the plugin
3. Select which collection to generate tables for
4. Get a fully formatted, ready-to-use token reference table

Best for:

1. Design system documentation
2. Developer handoff materials
3. Color token audits and reviews
4. Team onboarding resources

Requirements:

1. Color variables must use Figma's native variable system
2. Variables should have both light and dark mode values defined
3. Token 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!