Generating a Useful Style Guide with Sketch App

When it comes to designing large multi-artboard websites in Sketch App, Shared Styles, Text Styles and Symbols are your biggest allies. Nobody wants to keep recreating those call-to-action buttons over and over.

And while we could simply group (command+g) these button layers together and duplicate (command+d), what happens when we decide that these buttons actually need to be another colour? Styles and Symbols allow us to make mighty artboard-wide changes to a specific element.

Classing Reusable Styles

I’m going to start off with a rather cliché “here’s one we did earlier”; if you want to follow along step-by-step you can download the sample .sketch file here.

Start by selecting the middle body of text under the heading. On the right-hand side (The Inspector), click the dropdown box that says “No Text Style”, and then “Create New Text Style”.

Give this style a name - I chose “Header Text”. If you ever want to reuse this style anywhere else in the design, you can simply click on that dropdown box again and select “Header Text”.

If you code any CSS, then you’ll already know that this is exactly how we use CSS classes, and it should feel re-assuringly familiar.

You might find what we just did incredibly boring, but I swear to you, its true beauty will be much more apparent later on.

Defining Entire Elements with Reusable Symbols

Now…Symbols.

Symbols can be applied to Groups of layers only (select multiple layers, then hit command+g), which comes in handy when you need to reuse elements containing multiple layers but you’re not willing to “flatten” them.

Lets try it out on the yellow button - click the same dropdown box that now says “No Symbol” and then “Create New Symbol”. Let's call it “Yellow Button”.

Again, we’ll only experience the true magic of this later on.

Explaining Your Styles with the Sketch Notebook

Knowing why a given style was originally created is often the biggest challenge in returning to project files/graphics. At the time it was probably abundantly clear that the 'red buttons are for sale items' – but 7 months later someone is staring at those red buttons with a furrowed brow. What does it all mean??

Sketch Notebook is an add-on that’s going to let us leave comments on our artboards. For those that use our .sketch file afterwards, they’ll need to refer to these comments as a style guide when building upon the design or developing it with code.

First, navigate to Plugins → Reveal Plugins Folder, and then download the Sketch Notebook Plugin into that folder. If you use a plugin management interface such as Sketch Toolbox, you’ll find Sketch Notebook is downloadable from there too.

When you’re all set, click on the yellow button once again and run the keyboard shortcut; command+option+control+9.

Your comment should already have a title and it’ll be referenced by the number one. Add your comment, something along the lines of “Should be used as a call-to-action in the green header only.”

You'll notice that Sketch Notebook will automatically append a sidebar to the right-hand side of your artboard; the yellow button will have a “1” next to it that references your notebook comment.

Bonus: Creating a Separate Style Guide Artboard

Press “A” to begin choosing a new artboard. It doesn’t really matter what size the artboard is because this’ll only be an artboard for housing our reusable user interface elements as a separate style guide that can be referred to later on. You can declare sizes and a background colour in The Inspector.

Now we’ll start clicking on the elements that we want to copy over to our style guide artboard, in our case this is the “Header Text” and “Yellow Button”. Right-click and choose “Copy”, and then right-click again on our new artboard and choose “Place Here”. In the Layers Panel (on the left), double-check that we’re copying into the correct artboard; a simple drag and drop from the Layers Panel will do the trick.

As you can see from the screenshot image above, I’ve used The Inspector to change the background colour of the button. Since the (imaginary) client has requested that all buttons now be black, it’s highly convenient that all of our buttons are linked by a common Symbol - “Yellow Button” - which triggers a document-wide change.

Continue reading %Generating a Useful Style Guide with Sketch App%

by Daniel Schwarz via SitePoint