Style Guide Generator

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.