A while back we published a tutorial on creating a custom Sketch file with reusable flow diagrams. It’s a great resource for creating your own user flows or sitemaps. In this tutorial we’re going to beef up that Sketch file in order to make it more usable for others.
You may have colleagues who wish to use your file, or perhaps paying customers. Either way, the improvements we make to the file will mean that others can open it, understand it, and use it.
I recommend you go ahead and read through the original tutorial. At the very least, grab the final Sketch file to get started on the right foot and follow along with this second part. This tutorial is jam-packed with Sketch tips and tricks, some pro tips here and there, as well as a few related plugins you must try for yourself.
The User’s Manual
The very first thing we’ll do is set up a new page. I’m calling mine “User’s manual”. This page will serve as a quick walkthrough on how to use the flow diagram elements. We’ll use it to explain each element’s role, how to use them, and how to manipulate their properties like the starting points for arrows.
“How to Use the Arrows”
We’ll begin with a new artboard, I’m calling mine “How to use arrows”. Press A to create a new Artboard and from the top right corner select Paper Size and Letter. Sketch will automatically place the right-sized artboard for you (this works with desktop and mobile screen sizes too!).
I want new users to understand a few things, including how to select a line and place it on an artboard, how to change its shape, and how to change its start and end points. How you explain these things is your choice; the specific descriptions and instructions are up to you. I’ve enhanced my descriptions by including a couple of screenshots.
Organizing Text Styles
Just as with symbols or layer styles we can also organize text styles. For these manual pages I have three different text styles, H1, H2, and body.
My H1 is Helvetica Neue, Regular, 24px in size with line-height of 30px. The H2 is Helvetica Neue, Bold, 14px in size with line-height of 20px. The body is Helvetica Neue, Regular, 12px in size with line-height of 20px. All three of them use the color #325372.
We can use Sketch’s organization syntax to get these styles organized in the drop down. I’ve named them as follows, which you can see reflected in the dropdown above:
- Manual texts/Headline/H1
- Manual texts/Headline/H2
- Manual texts/Body
I love this—it makes my Sketch files so much more organized!
“How to Use the Annotations”
The next page in the user’s manual is going to discuss annotations. To save time, copy the arrow’s page and edit the text and images to reflect annotations. For annotations we need to discuss the following: adding to a page, selecting a different annotation and resizing.
Automatically Resizable Button
In the initial tutorial, we made sure that the Action and Label annotations were manually resizable with Sketch’s native properties. However, if you want to use a cool plugin to do the resizing for you, may I suggest downloading and using Rebel Button or Paddy?
“How to Use the Page”
Lastly, I’m adding a page for “How to use Pages”. I’ve included the default instructions about how to add a page to the artboard as well as how to change the default “home page” text.
Tip: if you ever need to accurately place your elements, select an element and press Option on your keyboard. As your mouse hovers over the other elements on the artboard, indicators will relay the exact pixel distances between them.
The Style Guide
The next thing we need to set up is the style guide. I’ve created a new page and, you guessed it, I’ve called it “Style guide”. Like any other style guide, this is meant to introduce users to the different styles used in the file. Within the style guide I’m going to discuss the colors, typography, and layer styles–including arrow line styles (solid vs. dashed).
Colors
In the original design of the flow diagrams I ended up using nine different colors, so let’s create a new artboard just for them. Place all of the colors out on the page and name them. The cool stuff comes next!
Creating and Organizing Color Styles
I’ll now add these colours as styles. This way, if anyone wants to customize the colors of the different elements they can.
First, the syntax: Styles/Colour/{Colour name}. So, Styles/Colour/Error red or Styles/Colour/Background blue. Once you’re done adding them, look and admire how neatly organized those colors appear in the Layer Style dropdown! Additionally, you can see that there are left over styles from the original tutorial. We’ll get to organizing those a little later.
The first reason for all the laid out colors is to show what’s in use (like a style guide should). The second reason is for easy recolouring. That won’t apply to all the different elements in use (such as text) but it could easily affect the ones with just a background like the Yes and No annotations. We’ll try doing exactly that next.
Customizing Colors
Go back to the symbols page. Next, apply the same styles we just created to the Action, Label, Yes and No elements. This way, if you decide you no longer want the Yes to be yellow but green, all you have to do is update the color in the Style guide and all the Yes’s in the whole Sketch file will change color.
Document Colors
To make your workflow a little easier, you might want to save your colors to the Document colors. This will make them easier to access at all times.
Keeping Your Artboards and Layers Organized
If you love to be organized, I suggest downloading the Sort Me plugin. It sorts both layers and artboards, alphabetically and numerically (or reverse too). Here are some other efficiency resources for Sketch:
Efficiency Tips for Working With Sketch Artboards and Layers
Speed Up Your Sketch Workflow With Runner
Typography
The next style guide we need to create is for typography. We want to display all the text styles in the document, and I want to divide them up into two categories, document texts (such as in the manual and style guide here) and those in the flow diagrams.
Reorganizing Text Styles
I’d now like to show you how to reorganize your current Text Styles and rename them (if need be). From the Text Style drop down, select the very last option Organize Text Styles… That will bring out a new window that’s filled with every single one of your Text styles. If you double-click one, you can rename it. I want you to rename them as follows:
- Default text > Flow diagram texts/Action
- Label text > Flow diagram texts/Label
- Notes > Flow diagram texts/Notes
- Page text > Flow diagram texts/Page
- Manual texts/… > Document texts/…
I also want you to rename all three “Manual texts” to “Document text”. We created the initial names with the intention of just using them within the User’s manual documentation, but since then we’ve added the style guide making the naming convention no longer accurate. As you can see renaming the text styles is simple. If you misspell a name or your naming convention needs to be updated, it’s not a problem!
Tip: the little minus icon [ – ] in the bottom left corner will delete the selected style. But be careful: there is no undo and it doesn’t ask if you’re sure.
Update the text style in the style guide to update the typography throughout the whole file (just like with colors).
Shared Styles in Remaining Elements
This is going to be the last artboard under the style guide section. Here we’ll discuss how to recolor and treat the remaining elements, the page symbol, and the decision annotation symbol. We’ll discuss arrows last, right after finishing the shared styles section.
Organizing Shared Layer Styles
If you look back to the colors section, you’ll remember that we had a few additional styles that I said we’ll organize later. Well, now’s the time! The idea is exactly the same as with organizing text styles. Choose to organize the layer style; you can rename, organize and delete them all just as with text styles.
For the layer styles, I want you to keep every single one of the Style/Colour/… we previously made. Then, rename the rest as follows:
- Action bg > Background/Action
- Arrow - Dotted > Arrow line/Dotted
- Arrow - Solid > Arrow line/Solid
- Label bg > Background/Label
- Page > Background/Page
Tip: pressing the Tab key doesn’t navigate down the list of style’s names the same it would down the layers list. Instead, in this window, the Tab key makes the selected style’s name editable or not. Toggle it once or twice to see exactly what I mean!
Remember minus icon [ – ] I mentioned before? It’s for deleting styles. I need you to delete Background gray. It’s a remnant from my initial design exploration and isn’t in use anywhere.
Lastly, close the window, select the background of the Decision Annotation and select Create new Layer Style, from the dropdown. Name the new style “Background/Decision”. We’ll go ahead and adjust the styles of these now, back in the style guide page. Copy the backgrounds from the Decision Annotation and the Page elements.
Adding and Updating the Shared Layer Styles
Back in the style guide, paste the two backgrounds into the Arrows and elements artboard. (I’m only going to copy over the Page and the Decision Annotation.)
Just to give you an actual example of changing out the style and updating it universally, I want us to go ahead and change the background styling of the Decision Annotation. That’s why I had you create a separate Layer Style for it, so it wouldn’t affect the Action Annotation. Change it to anything you want, it doesn’t have to match the design. Add a 1px border with a color of your choosing and a new background color as well.
Once you’re done, from the Layer Style drop down select Update Layer Style. If you go to the sample flow diagram page or back to the symbols page, you’ll see the styles have been updated. That’s a great example of the updating styles in action. That’s exactly what you should expect to happen if you were to update the document for new design style, such as different brand colors.
Tip: if you do change the style of an element with a layer style on it, you can bring it back to the original styling by selecting Reset Layer Style.
“Arrows, Line Styles, Start and End Points”
Okay, we’ve come across the final assets and it’s all about the arrows! I left the best for last, naturally. First thing first, we need to add arrows to our style guide. Right now we only have one kind of arrow at our disposal. However, if you remember during the layer style clean up, we did have a solid line and a dotted line. Let’s add the dotted arrows to our collection.
Creating a Dotted Arrow
In the symbols page, I want you to copy the first arrow, the Arrow/Default/Right, and rename it Arrow/Dotted/Default/Right. Select the arrow’s line and from the Layer Styles drop down select Arrow line then Dotted. And that’s it! We have our first dotted arrow.
Two more things here. First, go ahead and to that to the remaining arrows. Stick to the name convention Arrow/Dotted/… to keep a well-organized Symbols dropdown. Speaking of name conventions and syntaxes, the second thing you should do is rename every single one of the original solid line arrows. The Symbols dropdown is going to be messy if you don’t.
Use the Rename It Sketch plugin to make this smoother for you! Select Plugins > Rename It > Find and Replace Layers/Artboard Names. Or you can press the Control +Option + Command + R for the plugin window to appear. There, type in Arrow/Default or Arrow/S-Shape and replace it with Arrow/Solid/Default and Arrow/Solid/S-Shape and so on. Make sure the current Search Scope is selected to Current Page instead of Layer.
The Start and End Points
The very last thing when it comes to arrows are the start and end points. In the first tutorial I showed you how to add different examples such as an outline. Add as many styles as you like, then when you’re done don’t forget to include all of the new and awesome start and end points in the style guide too.
And with that, we are done creating the style guide!
Conclusion
The purpose of this tutorial was to build off the original one and teach you more awesome ways to use Sketch. At the same time, this will have shown some practical ways to improve and package up all your Sketch files to make them more usable for team members and customers.
