Style Guide Generator Figma Plugin

Generate your custom style guides from Figma styles easily.

This plugin automatically scan your Figma document’s text styles, paint/color styles and generate a new page in your document containing your style guide template and the actual rendered style guide that is ready to export as PDF or your favorite format to share with your team or your client. You can re-run the plugin to update your generated style guide frame with dynamically including new styles you are adding or updating.

See example generated style guide frame and templates here: https://bit.ly/3dY1R2R

Customization

You can select basic styleguide templates to start with and customize your style guide template to fit your project’s or team’s design language. You can also include your own static elements in your template frame as long as preserving the auto layout groups containing your text styles and your color styles. Plugin will simply clone your template frame and populate the text styles and color styles using the template groups you provided. You can customize positioning, look and feel or add new elements like iconography for your stlye descriptor labels or values.

How It Works

– Create a new page in your document and name it “Style Guide”
– Copy one of the style guide templates and customize to add your own flavor from here: https://bit.ly/3dY1R2R
– Run the plugin, your style guide frame will be generated and will be ready to use (export)
– You can re-run the plugin to refresh your style guide any time you want