Design Token Documentation

About this plugin

Stop documenting your design tokens by hand.Design Token Documentation reads your Figma variable collections and styles then generates fully structured reference pages in seconds.Now available for:colortypographyspacing NEWborder radius NEWelevation NEW🎨 Colour tokensAuto-generate docs complete with swatches, token names, hex/RGB/HSL values, descriptions, and primitive references.🔤 Typography tokens ✨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.📏 Spacing tokens ✨ NEWAuto-document your spacing scale with to-scale visual previews. Each row renders a dark block sized exactly to the token value with measurement markers and labels, so the relationship between 4, 8, 16, 32 is instantly readable. Token name, resolved size, and usage description sit alongside.🔲 Border radius tokens ✨ NEWAuto-document every corner-radius token with a dashed-outline preview that renders the actual radius. Token name, size, and usage notes are pulled directly from your variables. Pill (9999) and squared (0) tokens are visualised correctly.🌑 Elevation tokens ✨ NEWAuto-document your shadow effect styles with a live preview tile linked to the source style — when you tweak the shadow, the documentation updates with it. Each row shows the elevation token name and usage description so your team knows when to reach for elevation.sm vs elevation.lg.🔀 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 colour, typography, spacing, and border radius.🔗 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, text styles, or effect styles and instantly see what changed. Tokens are automatically tagged with NEW and UPDATED badges across every foundation — colour, typography, spacing, border radius, and elevation. No diffing spreadsheets, no guesswork.💻 Code-ready token namesOutput token names in the format your developers actually use, across colour, typography, spacing, and border radius: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 typographyRenders to-scale spacing previews with measurement markersVisualises every corner-radius value, including fully rounded pillsLinks elevation previews directly to your effect styles, so updates flow throughToggle individual metadata rows on/off (font, weight, size, line height, letter spacing, use)Generates local parent components for every token type so you can restyle once and apply everywhereSupports HEX, RGB, and HSL colour value formatsAuto-generates mode titles and timestamps on each frameWorks with any number of variable collections