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 Swatches

1. Create some local text & color styles
2. Press Automatic Style Guides > Generate Color Swatches
3. A new page called "Style Guide” has been added to your document

Generate A Style Guide

1. Create some local text & color styles
2. Press Automatic Style Guides > Generate Style Guide
3. A new page called "Style Guide” has been added to your document

…or keep your own style guide updated with moustache tags!

1. Create some local text & color styles
2. Find the text layer you want updated with your local style property value
3. Rename that text layer something like {{myTextStyle.fontSize}}
4. Press Automatic Style Guides > Update Moustache Tags
5. The text layer named {{myTextStyle.fontSize}} will have its contents updated to myTextStyle's font size (ie. 12px).

Available Merge Tags

Text 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!