Skip to content
Style Guide Generator

Style Guide Generator

by Roman Klimychev

Turn your local color and text styles into a clean, shareable style guide in one click

FreeFigma

Installs

6

Likes

3

Users

115

Views

70

Preview

Style Guide Generator preview

About this plugin

Style Guide Generator turns your file's local color and text stylesinto a clean, organized style guide — automatically.WHAT YOU GET• Color cards with the real style applied, plus HEX and RGBA values• Transparency-aware swatches with checker background• Typography rows rendered in their real fonts, with size and line-height• Style descriptions printed on every card• Sections grouped by your folder structure (e.g. Surface/, Text/, Border/)• Option to split colors and typography into separate framesHOW TO USE1. Run the plugin2. Pick what to include: colors, typography, descriptions3. Choose a typography sample: Short / Pangram / Style name4. Toggle "Separate frames" if you want colors and type on different artboards5. Click GenerateOutput is native Figma — auto-layout frames, real text, real fills — soyou can keep editing it like any other artboard. Settings are rememberedbetween runs.

More ui kits plugins

View all