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:colortypography NEW🎨 Colour tokensAuto-generate docs complete with swatches, token names, hex/RGB/HSL values, descriptions, and primitive references.🔤 Typography tokens ✨ NEWAuto-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 supportDocument 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 CollectionsCompatible 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 trackingRe-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 namesOutput token names in the format your developers actually use:Figma default (color/brand/primary)Web / CSS custom properties (--color-brand-primary)iOS / Swift (colorBrandPrimary)Android / Compose (color.brand.primary)📐 Flexible groupingGroup colour tokens the way that makes sense for your system:By 1st-level token path (e.g., brand, neutral, feedback)By 2nd-level token path (e.g., background, foreground, border)By mode, generates a card grid per mode✨ More detailsShows primitive and alias references for colour tokensResolves variable bindings on text styles for typographyToggle individual metadata rows on/off (font, weight, size, line height, letter spacing)Generates local components you can customise to match your design systemSupports HEX, RGB, and HSL colour value formatsAuto-generates mode titles and timestamps on each frameWorks with any number of variable collections