Style Guide Generator by Bitta.ux

About this plugin

Style Guide Generator automatically scans your Figma file's variables and text styles, then builds a pixel-perfect, live-linked style guide page — in seconds.

No manual layout. No copy-pasting hex values. Just run the plugin and get a fully structured style guide with your color scales, typography specimens, and token metadata, all bound directly to your actual Figma variables.

✦ Color swatches bound to variables — update your tokens, the guide updates too

✦ Multi-mode support — Light & Dark swatches side by side

✦ Typography cards with specimen text, font family, weight, size, line height & letter spacing

✦ Grouped by collection — respects your token architecture

✦ One click to regenerate — always in sync with your design system

Built for design system teams who want documentation that stays accurate without the maintenance overhead.