The efficiency of use end flexibility is the fundamental factor that decides if the user will love the tool. SQUID was designed with this two in mind, and indeed it has become a popular solution when it comes to the User Flows creation in Sketch.
While there are already tutorials describing how to work with the Library, fresh users asked about the Quick Start Guide that shows how the library may be used in minutes.
This story shows how to set up and use SQUID UI Flow Template Library for Sketch from the beginning. Grab the mug of your favorite coffee and let’s start – videos are included!
What is SQUID?
SQUID is a library for Sketch that allows you to create User Flows in a convenient way. What is more, flows appearance may be customized to the brand of the company or the solution within a few clicks. All User Flow connections are stretchable to adjust the needed configuration of the dartboards or mockups. SQUID may be used to demonstrate flows even at the beginning of the project because it contains the set of more than 50 Web and Mobile Page Templates.
Designers that have got mockups created in Sketch can instantly use them in their flows because SQUID is adjusted to be used with 1x mockups. It is a real time-saving toolkit for Sketch users.
Where I can get SQUID?
SQUID UI Flow Template for Sketch is a premium library. It can be purchased from the official site – https:/uxmisfit.com/squid/.
The Newsletter Subscribers of the UXMisfit.com can get 15% discount for the library.
1. Initial Configuration
Let’s begin to learn how to set up the SQUID. First, open the Sketch file with the library. If you would like to know more detailed instructions you can read them in “🚀 How to” Page, but for the Quick Start tutorial purpose, we will dive directly into “🎛 Styles” Page.
The first artboard “squid_styles_01” contains the configuration panel of all connection styles.
To edit style of Entry and Exit points simply click on the arrow in section, change the color, border or opacity. When you will finish -remember to update the style in “Appearance” section in the right pane of the Sketch Window.
If you would like to do the same modification to the connection lines, you can apply them to the solid and dotted ones in their section. Remember to update the styles when you will end modification.
Look how to do this in the video:
The next important elements of SQUID Library are elements like nodes, annotations, labels, success and error badges or highlight areas. They may be modified in the same way like the connections. The updated shared style will propagate the new appearance through all elements.
You can see that in this movie:
Another customizable part of the SQUID is UI Templates. These are schematic appearances of the popular features from Web and Mobile. Their appearance may be also customized in shared styles.
It is demonstrated in below video:
Ok, now we have got the file ready to be used in our projects. If you would like to use them in multiple files and ensure consistency – it will be good to add SQUID to Sketch Libraries.
2. Setting SQUID as the Sketch Library
To setup sketch file as a library you have to make following simple steps:
- Go to Sketch -> Preferences
- Select Libraries
- Choose Add Library
- Pick the desired file from the Finder
Remember that the checkbox on the left of the Library cover has to be active if you would like to see library elements in Symbols section of every Sketch file.
Let’s see how to make it on the video:
How to update the modified styles in existing files
You may modify the appearance of SQUID in the original file and propagate the changes through all projects that use it.
To do this simply adjust the style of the desired elements in original SQUID library file you use. Then open the file that uses the library.
You can see the process here:
3. Usage of the Library
Now you are ready to use the SQUID in action. In the beginning, it may be easier to find the desired symbol from the “Symbols” menu in Sketch. Thanks to this you learn what elements are included in the SQUID.
However, if you would like to use it efficiently. You should install Sketch Runner plugin and work in the following flow.
Press [CMD]+[‘] to launch Runner. Choose “insert” option. Type the name of the connections. This is the fastest way to add the connections. To use this technique it is good to know the naming convention of the SQUID elements. Let’s learn it with some samples:
Overall naming convention of connections use following scheme:
/LineStyle/ConnectionDirection
First part is the line appearance. There are two styles of the connection line:
/Solid
/Dotted
Next, the connection direction, for example:
/Left
/Up
/Down
/LeftUp
/DownRight
/RightUpRight
To pick the desired element you should combine these two blocks and you will achieve something like this:
/Solid/RightUpRight
You can also use Sketch Runner to insert all other elements of the library.
Let’s see SQUID and Runner in action:
BONUS: How to modify SQUID with own elements.
SQUID contains multiple elements that cover most of the needed parts of User Flows. However, you are free to modify or even create own elements in the library.
Example: If you would like to create a new entry point of the connection, just create a new artboard in the same size as other entry points. Draw the shape. It is good to apply the same style to the custom symbols to ensure consistency of the SQUID elements.
Check out how it may be done live:
Summary
Thanks to this tutorial you will be able to use SQUID efficiently. User Flows creation in Sketch can be really easy and convenient. If you like SQUID, feel free to share this tutorial on facebook or twitter, so the other will also know that User Flows creation in Sketch may be convenient. You may be also interested in additional stories about flows design that may help you in your work:
User Flows in Sketch — Step by Step Guide to Create Them Quickly
SQUID & Sketch — The Ultimate Guide to User Flows Creation
Designing digital solutions in Sketch is very effective, but no one wants to make boring and repeatable work. Time is a very precious asset for us – Designers. This is why I focus on creating time-saving tools for creative professionals. SQUID goal is to make User Flows design efficient and convenient, but there is also the tool for UI Design:
Prime Design System Kit – Starting UI Design from scratch is boring. I wondered, how to skip this part of work to focus on more interesting tasks. Prime Design System Kit is the resource that lets you customize all essential UI elements quickly and jump right into the most engaging parts of the design process. What is more, it includes Charts, Device Templates, and Illustration Kit to speed up specific pieces of work. Thanks to Prime you create Web or Mobile design within minutes. See Prime in action.
Subscribe UXMisfit.com (and get some discounts)
Follow me on Medium
Follow me on Twitter
You can also follow me on Dribbble!