How to Make User-Friendly and Reusable Sketch Files

Final product image
What You’ll Be Creating

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

serverpoint hosting banner

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!).

Paper sizes for Artboards in Sketch
Paper sizes for Artboards in Sketch

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?

You might also like More from author

Leave A Reply

Your email address will not be published.