Design Token Documentation

About this plugin

Stop documenting your design tokens by hand.

Design Token Documentation reads your Figma variable collections and text styles, then generates fully structured reference pages in seconds.

Now available for:

1. color
2. typography NEW

🎨 Colour tokens

Auto-generate docs complete with swatches, token names, hex/RGB/HSL values, descriptions, and primitive references.

🔤 Typography tokens ✨ NEW

Auto-document your text styles with full metadata: font family, weight, size, line height, and letter spacing, all resolved from your variable bindings. Each row shows the style preview, token name, and variable references at a glance.

🔀 Multi-mode support

Document light mode, dark mode, and any custom themes side by side. Each mode gets its own frame with resolved values so your team can see exactly how tokens map across themes, for both colour and typography.

🔗 Works with Extended Collections

Compatible with Figma's extended collections feature. If you're managing multi-brand design systems with parent collections and brand-specific overrides, this plugin will read and document your extended collections just like any other, including inherited values and brand overrides. Keep every brand's documentation up to date without extra effort.

🏷️ Change tracking

Re-run the plugin after updating your variables or text styles and instantly see what changed. Tokens are automatically tagged with NEW and UPDATED badges. No diffing spreadsheets, no guesswork.

💻 Code-ready token names

Output token names in the format your developers actually use:

1. Figma default (color/brand/primary)
2. Web / CSS custom properties (--color-brand-primary)
3. iOS / Swift (colorBrandPrimary)
4. Android / Compose (color.brand.primary)

📐 Flexible grouping

Group colour tokens the way that makes sense for your system:

1. By 1st-level token path (e.g., brand, neutral, feedback)
2. By 2nd-level token path (e.g., background, foreground, border)
3. By mode, generates a card grid per mode

✨ More details

1. Shows primitive and alias references for colour tokens
2. Resolves variable bindings on text styles for typography
3. Toggle individual metadata rows on/off (font, weight, size, line height, letter spacing)
4. Generates local components you can customise to match your design system
5. Supports HEX, RGB, and HSL colour value formats
6. Auto-generates mode titles and timestamps on each frame
7. Works with any number of variable collections