Published on | Prototyping: From UX to Front End — Medium Thalion

Sketch is a powerful tool for digital product design. It is efficient not only to create mockups but also many different UX deliverables. One of them are User Flows. This is why SQUID UI Flow Template for Sketch was built — to give designers a powerful tool for efficient flows creation.

This article contains A-Z Compendium of this toolkit usage.

🔰 Before You Begin

The good compendium contains even the most obvious points, so here is the first one: To use SQUID you have to use Sketch. If you do not have license get one or a free trial from www.sketchapp.com.

Next, get SQUID UI Flow Template. The toolkit is available in two options, the first one contains the template, the second one includes also UI Motion Design Template (I have written about it many times).

Before you decide the option, you have to know that there is a 15% discount for UXMisfit.com Subscribers. To get offer code before purchase simply subscribe the UXMisfit.com Newsletter.

👉 Setup The Library

Now, when we have Sketch and SQUID we can add the template to a Sketch Library. There is, of course, the official documentation describing how to do it, but below is the handy guide:

Let’s open Sketch’s Preferences [CMD]+[,], and go to the Libraries tab. To add SQUID as a Library, just click on the “Add Library…” button and the template document from your files. Now, we are now able to insert its elements in other Sketch files!

🎨 Stylize The Library Elements

The SQUID is designed by default to look neutrally elegant and we can start creating flows even with its default visual appearance. However, the template was also designed to be easily stylized to match your brand style.

To adjust styles let’s go to “Styles” Page. Instructions written there are simple to follow, but here we will demonstrate how to change the style, step by step.

Sample SQUID style modifications

Connections Styles

First “Connections”. The appearance of the arrows may be adjusted from the “squid_styles_01” page. Tap on the arrow from “Arrows” section and edit its Shared Style. There are various Entry and Exit points included in SQUID Template.

We may also create our own shape of Entry or Exit Point. To do this just open Page „Symbols” and create Artboard with resolution: 24 x 24.

Do not forget to apply Point Shared Style to the custom element.

Now let’s go to “Connections” section of the artboard. Here we can edit the lines’ style. There are solid and dotted ones.

Do not forget to sync all of the modified Shared Styles to apply the changes to the whole Library.

Note: If the created style is dark. It is good to change the background of the artboard where you will create flow to the appropriate color.

Elements Styles

User Flows are not just connections and pages. More advanced behavior has to be visualized or described — this is why flows need to have some nodes, annotations or labels. We are able to stylize them from “squid_styles_02”.

Mentioned artboard gives us the ability to adjust the appearance of nodes, annotations, labels, highlights, error and success elements.

Note: It is good to preview how the style is changing. If you would like to see how your modifications will look — simply switch to “Demo” Page.

UI Templates Style

Sometimes User Flows are created without mockups. Raw sketches or wireframes are able to present the concept of the solution. This is why SQUID contains over 50 UI Templates for Mobile and Web.

We can customize the appearance of UI Templates from “squid_styles_03” artboard. Every template page is simplified UI build from shapes in 3 colors — dark, mid and light tones. There is also page border and title. All elements are able to be stylized by modifying Shared Styles or Styled Text.

⏩ Moving Forward

Now, we are able to create flows that are styled in your way. Do not forget to sync all of the modified Shared Styles and Styled Text to apply the changes to the whole Library.

⚡️ Create Flows

SQUID promises that we will be able to create flows in just minutes. It is not a marketing slogan. I have created SQUID and use it during my work and it saves me a lot of time.

Let’s check out SQUID in action!

Note: For the demo purpose, we will demonstrate template usage on the example of UI mockups created for iTunes Connect for iOS — Case Study Article

First, let’s export mockups in 1x and create separate Page that we will call “User Flows” (We can make flows directly over mockups artboards, but I prefer to separate them to keep file clean). Now drag our exported images into Sketch to paste it into the Page.

Next, This is time to distribute mockups. When we finish doing that let’s create artboard that will include them — press [A] and choose the option “New From Selection” from the Right Panel. Let’s add some padding to the images.

Distributed mockups

Now, We should include starting point of the User Flow. To do this choose Symbol > SQUID > Node > Circle. Put the symbol on the First Page and type Label.

Connecting Pages

It’s time to make the first connection. SQUID gives us a least two possibilities to do that.

First connection

The first option is to choose Symbol > SQUID > Connection. This way we will be able to configure symbol in the right panel. We can choose the shape of the line, entry and exit points. It may be a good way to start using SQUID when we do not know the naming convention of shapes.

The second one is to use Sketch Runner Plugin. Press [CMD]+[‘] choose “insert” and type the name of the connections. This is the fastest way to add the connection but requires a bit knowledge of the template. Let’s learn the naming convention with some samples:

Overall naming convention of connections use following scheme:
/LineStyle/ConnectionDirection

First part is the line style. There are two appearances of the line:

/Solid
/Dotted

Next, the connection direction, for example:

/Left
/Up
/Down
/LeftUp
/DownRight
/RightUpRight

SQUID + Sketch Runner

Nodes

Every Flowchart contains nodes. SQUID contains several elements of this type. The most popular one is Decision Node that visualizes the product dependencies.

In our sample, we put Decision Node to check if a user can use biometric authentication to log in. But I did not prepare appropriate mockup for this purpose. Thanks to SQUID I do not have to — we can use UI Templates.

When to Use UI Templates

If we work in Agile or we need to show some concepts to our team immediately — SQUID is here to help. The toolkit contains 30 Mobile and 20+ Web UI Templates that we can use to create flows. Templates are universal because they are the most popular page types.

To add Mobile Template choose Symbol> SQUID > UI Template Mobile. In the right panel choose Content of the page and enter the Title.

Let’s add a Popup Template to visualize FaceID or TouchID that may log-in user to the app. We can also add a Map UI Template — it may visualize the concept of showing download stats depending from a country on a map.

UI Templates added to the User Flow

Annotations & Highlights

A picture is worth 1000 words. However, sometimes it is good to add some additional description. To do this you can choose annotations from
Symbol > SQUID > Node.

Highlights available under Symbol > SQUID > Highlight has got similar purpose — we can add some notes by directly pointing particular element of the UI.

Let’s add one to the Map UI Template. Thanks to AnnotationCircle element we can add a number to the note. And write a description in another place.

SQUID annotaions

Interaction Visualizations

Standard User flows do not contain these elements. However, good UX or Interaction Flows should present a least the not obvious one.

Modern Devices and Operating Systems encourage us to design for gestures. It is good to have a tool to visualize them. SQUID contains 7 Gesture templates:

Pointing hand
Tap
3D Tap
Double Tap
Rotate
Scroll Vertically
Scroll Horizontally

Let’s add some gesture visualization to our sample.

Sample Gestures

👏 UI Flow is Completed

We have created a sample flow in just a couple of minutes. Now we can export it and show to the client or our team.

Flows should evolve after design validation, it is easy to change them with the SQUID toolkit thanks to stretchable connections.

🎥 SQUID in Action — Video

The whole process of creating mentioned flow is recorded in the material presented below. The video is sped up by 3 times.

<a href="https://medium.com/media/92c255217c322af42d2ec3a448075f27/href">https://medium.com/media/92c255217c322af42d2ec3a448075f27/href</a>

🚀 What’s Next

SQUID is a complete toolkit for creating flows. But, there is always a possibility to enhance the library in time. I would like to make it even better.

There are some ideas to extend the Library. If you as a user have got some suggestions do not hesitate to send me a message!

To Conclude

You can create User Flows really quick in Sketch. I believe that this step by step guide will help you get most of SQUID.

To get the template simply go to SQUID UI Flow Template Website. There is also 15% discount for UXMisfit.com Subscribers. To get offer code before purchase simply subscribe the UXMisfit.com Newsletter.

SQUID & Sketch — The Ultimate Guide to User Flows Creation was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

SQUID & Sketch — The Ultimate Guide to User Flows Creation

Cool stuff, every week

More Articles