Automatic Style Guides

🔥 Style Guide Generator 🔥Preparing formal style guide documentation from your local styles (and keeping it updated!) has always felt like double entry to me. But thanks to the Figma API you can now prepare a presentable style guide for clients & developers with a click of a button.

🎥 Watch the tutorial 🎥https://www.youtube.com/watch?v=2svaCq4xmHw💪 How It Works 💪Generate Color SwatchesCreate some local text & color stylesPress Automatic Style Guides > Generate Color SwatchesA new page called "Style Guide” has been added to your documentGenerate A Style GuideCreate some local text & color stylesPress Automatic Style Guides > Generate Style GuideA new page called "Style Guide” has been added to your document…or keep your own style guide updated with moustache tags!

Create some local text & color stylesFind the text layer you want updated with your local style property valueRename that text layer something like {{myTextStyle.fontSize}}Press Automatic Style Guides > Update Moustache TagsThe text layer named {{myTextStyle.fontSize}} will have its contents updated to myTextStyle's font size (ie. 12px).

Available Merge TagsText Styles{{myTextStyle.id}}{{myTextStyle.type}}{{myTextStyle.name}}{{myTextStyle.description}}{{myTextStyle.fontFamily}}{{myTextStyle.fontStyle}}{{myTextStyle.fontSize}}{{myTextStyle.letterSpacing}}{{myTextStyle.lineHeight}}{{myTextStyle.textCase}}{{myTextStyle.textDecoration}}{{myTextStyle.paragraphSpacing}}Color Styles{{myColorStyle.id}}{{myColorStyle.type}}{{myColorStyle.name}}{{myColorStyle.description}}{{myColorStyle.key}}{{myColorStyle.paints}}{{myColorStyle.r}}{{myColorStyle.g}}{{myColorStyle.b}}{{myColorStyle.a}}{{myColorStyle.rgba}}{{myColorStyle.hex}}{{myColorStyle.hsla}}🚨 Warnings 🚨Styles that start with a space are not supported.

Only the first fill of a local paint style will be used.

Ensure that all styles are uniquely named. If not, it will be skipped.

Everything is sensitive to case. If something isn't working, double check your sentence case.

Please ensure there are no missing fonts in your file before running the plugin.

💥 Bugs or Feature Requests? 💥Email support@jordangeizer.com - I'd love to hear of any ideas or issues you may have!