In this tutorial, we’re going to create reusable user flow and task flow diagrams in Sketch. We’ll harness the power of Sketch symbols, using basic elements and a few customizations in order to make our symbols work for us.
“[A] flowchart is a diagram of the sequence of movements or actions of people or things involved in a complex system or activity.” — Naema Baskanderi
To build our flow diagrams we’ll need elements for the pages, arrows, actions (including decisions and yes/no indicators), labels, and notes. I’m going to go over each of these elements, how they should look (if you feel inclined to copy my styling), how they should function, and how they fit into the big picture. But before we do that, we need to go over naming conventions in Sketch. It’s one of the key factors in making this work. Let’s dive right in, shall we?
Sketch symbols are perfect for flow diagrams
We Need to Talk About Naming Conventions
Yup, we do, and for two specific reasons. First, it’s good practice to keep your layers named for organizational purposes, especially if you’re handling the files with other people. When you create a symbol with multiple text fields in it, properly named text layers will help you distinguish which text is which when you’re trying to replace or override it.
The second reason is much cooler though. Sketch will automatically group symbols, text styles, and shared styles into different layers, assuming you follow a specific syntax. Sketch relies on URL-like and folder-like naming conventions, for example the following two symbols will be grouped neatly together.
Arrow/S-Shape/Left to Right
Arrow/S-Shape/Right-Down-Right
Then if we name another:
Arrow/Default/Left-Up-Left
it will also be grouped under arrows, but in a different subfolders: Default. This categorization allows us to find exactly the symbol we need, when we need it:
Organized symbols in Sketch
Keep this in mind when naming anything moving forward, especially text layers, symbols and shared styles.
The Page Element
The “page” is a fundamental part of our flow diagram. Website or app users will follow various routes, complete various tasks, and pages will always be central to this.
To create the page element we need a rectangle and a text field above it. The rectangle’s styles include #325372 for the color, Helvetica Neue, medium weight and font size 11. You can create a Shared Style for this as the other elements will have the same typography, though the page element will use uppercase. To do this, under the options, change the text transform to uppercase.
The rectangle is 144px by 96px with a radius of 5, #F7FCFD for background and #B7E7EE for the 1px inside border. It’s a good idea to turn at least the styling of the page rectangle into a Shared Style. This will allow for easy editing later.
Rename the text layer into “Page name”. This way, when you reuse this element as a new symbol, the text override will have a title instead of “text”. Select them both and convert them into a single symbol through the Create Symbol button in the Tool Bar.
Creating Custom Shortcuts in Sketch
In this tutorial, we will be creating a lot of symbols. Sketch doesn’t have a specific key command for this built in, but we can make a custom shortcut ourselves.
First, go to System Preferences and go into Keyboard. Select the Shortcuts tab from the top. In the left-hand panel select App Shortcuts and press the + button. An overlay will show up; in the applications list locate Sketch. Under Menu Title you need to fill in the specific menu item name we’re targeting, which in this case is Create Symbol (it’s the first menu item under Layer). Lastly, pick your keyboard shortcut, and that’s it.
Pro tip: this can be used for any application.
Making a custom keyboard shortcut for Sketch
The Arrows
You can make as many different arrow styles as you please, but the idea here is to show you how to create a single, adjustable arrow to start with. You can add your own styling and variations later.
As you can see in the above image, the arrow is going to take many shapes; we need to be smart about creating it. First, we need a start point and an end point. In my case, it’s an open circle and a triangle. The triangle is an SVG icon I found on the Noun Project. You can make a simple triangle yourself, or use an icon.
I am using #325372 for the arrow, the circle border and for the line. The circle has a white background #FFFFFF too. Now, turn them both into symbols and name them according to what they are. If you want to go a little crazy and create individual symbols for the triangle being up, down, left or right, then go for it. But it’s not necessary.
Next is the line itself. Create a single pixel line with the line tool. Whatever the styling you have going on there, turn the style of the line into a Shared Style. I have two; solid and dotted styles for primary and secondary arrows. Having multiple shared styles will make switching between them easier. More on that later.
Next, we will have to create each type of arrow by combining the start point, the line and the end point. The arrows need to be interchangeable for the diagram creation, so let's do that now.
Creating a Straight Arrow Symbol
First, let’s create a square artboard. A square will help us keep everything the same shape and the arrows will be easier to work with then. Mine is 80px by 80px. I want to start by creating an artboard for each arrow. This way, I’ll be able to see them all at once. Let’s start by first creating the left, right, top and bottom facing arrows. Now, select your arrows and turn them into symbols the way we’ve been doing. Don’t forget to use your newly set up shortcut too. Name these symbols, Arrow/Default/Left, Arrow/Default/Right and so on (you get the idea).
Creating the Curved Arrows
Now that the easier arrows are taken care of; let’s move onto the curved ones. This part is crucial because we need the arrows to be easily resizable and adjustable. I’m going to go ahead and create one of each for the three styles first.
Within the new artboards, still 80px by 80px in size, and using the vector tool (V), draw the arrow’s lines for the L-Shape, the S-Shape, and the U-Shape styles. Make sure that your lines are squared. Don’t make any curves yourself just yet. If you’re having trouble making perfect lines, place the points more or less where they should be, then edit their location manually by inputting X and Y positions yourself.
Take a look at the image . Next, we need to edit the curves. For each line select only the points which make up the corners. Don’t select the beginning or end points. On the right-hand side, increase the corner’s number to whatever you want. I set mine to 10px. Now, the corners will be automatically resized without distorting the line.
The last thing we need to do here is to add the start and end points. But before we do, let’s turn the lines (just the lines for now) into symbols. We want the line to be adjustable based on its actual endpoints, its beginning and end, exclusive of the icons at its ends. We’ll add the start and end points in a minute. Name these three arrows Arrow/L-Shape/Right-Down, Arrow/S-Shape/Right-Down-Right, and Arrow/U-Shape/Right-Down-Left.
Now, double-click on any one of the newly made symbols to edit it. We want to place the start and end points at the edge of the symbol and center align it with the line’s end points. Ideally, you want to place the start and end points centered at the corner of the symbol’s artboards.
Lastly, to make the arrows resizable, for both the start point and the end point, under resting option select fix width and fix height. Also, don’t forget to rename them to Start point and End point. This name change will make it easier to know which is which when changing the types.
We have to repeat this with the remaining arrows, including the remaining directions of the L-Shape, S-Shape and U-Shape arrows. Do it by repeating the previous steps.
What About Different Styles of Arrows?
You can have as many different styles of arrows as you want; dotted, dashed, solid or whatever else. The tedious part is that you’re going to have create a new set of arrows for each style if you want to use more than one in the same file. Otherwise just update the Shared Style. Don’t forget to adjust the naming conventions to Arrow/S-Shape/Right-Down-Right/Dotted or Arrow/Dotted/S-Shape/Right-Down-Right.
The Actions
I think the most crucial development is behind us. The remaining elements are not very complicated. The action elements here include the elements for yes/no indicators, a decision, a single action label.
Yes and No Indicators
Yes and no indicators allow us to illustrate points on our diagram where the flow direction is impacted by either a “yes” or “no” action.
These indicators are straightforward (at least compared to the arrows). I made them by downloading two icons from the Noun Project. Here is a link to the check and a link to the X. The Noun Project icons are white, #FFFFFF. While the background color is #F89B8D for 👎 and #FECD75 for 👍🏿.
Turn them into symbols and name them Annotation/Yes-No/👎 and Annotation/Yes-No/👍🏿 (yes, emojis are supported.)
A Decision Indicator
The process for creating this element is very similar to making the page element. Create a square (mine is 126px by 126px) and rotate it, or transform it, to a 45º angle. Additionally, I’ve added a 5px radius on the square. Its background color is #F2F2F2 , no border. Save it as a shared style. Over the square, we need a text area. I’ve titled my text layer “Decision”. Remember, naming layers is important. You can reuse the shared text style if you saved it before. If not, the styling for the text is #325372 for the color, Helvetica Neue, medium weight, 11 font size. If you are copying my styles, convert the styling of both, the text and the square, into shared styles.
Lastly, it’s time to convert the decision into a symbol. I’ll name it Annotation/Decision.
The Single Action Label
The single action label will reuse the styles from the decision element. It’s a rectangle; mine is 117px by 24px. Reuse the same styling from the decision indicator for both rectangle and text. Don’t forget to name the text layer; I named mine “Action”. Turn it into a symbol and name the symbol Annotation/Action. And we’re done here; next!
The Notes and Labels
The last two things on our list are going to be the notes and label elements. Let’s start with the label. This one is a little tricky but nothing we can’t handle. To make the shape easier, you can copy the rectangle and text from the action we made before. We’ll need a rectangle, mine is 117px by 24px, with 5px radius. It has #6FCFDB for the background. Next, the text area. Reuse the text style from the action or decision indicators. Then, create a new shared style called Label text and recolor the text to #FFFFFF. Next, make them into a symbol once again (have you been using the shortcut and getting used to it being there? Great. 🙌)
Double-click on the newly made symbol and select the text layer. We need to edit its resizing properties. We need to pin it to the left and right edge of the object. Sometimes, Sketch does this automatically for you, but not always, hence it’s better to double check.
Lastly, we have the notes. The styling I have for these is as follows: #A4A4A4 for the text’s colour, Helvetica Neue, regular weight this time, and 11 font size. This is unlike everything else so far, so don’t make the notes text into a symbol. Only add it as a shared style.
Now we are done with the basic shapes and elements, we can now put the flow diagrams together.
Putting it All Together
The above image shows all the different symbols I have at my disposal. This is quite a collection–and I did try to keep it small without much customization. The below image shows you a sample diagram flow I created using these symbols.
All you have to is select the element you need from the symbols section and arrange a flow diagram on your artboard.
Wrapping up
Well done for following all these steps! Now you have a pretty cool Sketch file that will easily let you or your team create user flow and task flow diagrams!
Following steps could involve creating a style guide for your flow diagrams; ways to easily interchange color, typography and the like. Perhaps also creating documentation within your Sketch file if you plan on using it with your teammates or giving it away as a freebie. Stay tuned for tutorials on these subjects soon!
I blog, a lot. I have written blog post for various publications big or small. I've recently published a book called Design for Humans that covers design, emotions and startups - if you're into that sort of thing.
