How to create a design style guide in the sketch in 3 seconds
If you need a kick-ass UI/UX, I am open to new projects. Let’s get in touch alexkukharenko.com/contact/
Update from June 2018:
From recent updates Craft removed the this feature. Now it is a part of paid ‘Design System Manager :(
Once I was looking for a hot key which might help me to fold all the folders at the left artboard section. But pressing wrong keys I have found something more useful — the shortest possible way of generating style guides. And … that’s literally just a hotkey: SHIFT + COMMAND + c
You should have Craft plugin to run it. My environment is: Sketch 48.2 and Craft 1.0.45
So, basically, Craft plugin creates a new page which calls “Styles”. You can return to your ongoing design by choosing the top page from the list.
The styles page consists of 3 artboards:
- Color palette. It contains samples of all your colors (including fonts), their #HEX codes and RGBa Codes. Additionally, you may add a name for each color, e.g. “Magic blue”. Front-end developers will definitely respect you.
- Fonts. This is a list of typefaces which you use for this project.
- Text styles. Craft tries to do it the best way and puts your fonts in order of H1-H7 (but sometimes it needs more attention). Besides, it has these fields: typeface, font size, line height, text color.
In Conclusion:
We know that except of fonts and colors we need to put forms, buttons, lists and objects into the style guide. But this feature helps us to generate the general stuff in seconds. Thanks Craft for it.
