How to make an App User Flow in Sketch with User Flower Kit
In this tutorial, you’ll learn how to use User Flower Kit step by step
A couple of times I did a user flow, I had difficulties. There is a need to create this document in Sketch. Now prototyping is available there, but this is not a user flow visualization. Creating such a document is a pain.
I was really struggling to find good User Flow sample or simply tool. After that I did User Flower Kit. I had the need to have such a set of elements and styles to create a user flow in order to get a beautiful and clear result. Usually these were ugly maps, because they needed to be generated very quickly.
I believe that this package is going to speed up your worklow and improve your designs.
This solution is suitable for those who want to keep the user flow and interface screens in one place. The template combines all the necessary elements for creating user flows and flowcharts.
Why do you need a user flow?
This is just a small list of positive points.
- All transitions between screens are visible.
- Logical errors and special cases are identified.
- You can see how the application is finished, what screens are missing
- New team member easier to understand the application
- The designer frees his head from having to remember all the connections.
- You can make notes and comments on the map.
Pros of creating a user flow in a Sketch:
- All screens in one workspace.
- You can add to the flow what you want.
- You can design an user flow as you like.
- No need to switch to other programs.
The kit contains an example of an user flow of a part of the application and the flowchart. These examples will help to understand how this is created.
Step 1. Choosing a color palette
Choose one of the proposed color options, then you can easily change the color palette. You can somehow use the brand colors or custom colors for each project.
Step 2. Select the device mockup
The set contains a database of device mockups.
Just select and copy the desired mockup device, create a new artboard and paste it there. If you didn’t find the mockup or you don’t need it, use the custom size.
All mockups have a safe space, you can put the joint in the joint.
For each mockups there are two versions – solid and outline.
Step 3. Insert Screens
There are several ways to insert interface screens into your user flow.
The first way is the usual image selection. Click “Choose Image” and select the file or click on the area to the right of the button and paste the picture using the CMD + V shortcut (first you need to copy it somewhere).
Auto Refresh Screens
The second way. Use the Magic Mirror 3 plugin. It’s a great find! Save your set of screens inside the user flow file, connect the screens with Magic Mirror 3.
This plugin allows you to automatically make changes to the user flow, changes the screens inside the mockups.
Step 4. Show the connection of the screens.
Arrange the screens in the correct order and customize their connections.
Draw arrows. Click CMD + V to build a path. This will be a gray arrow. Choose her style on the right side “Path Custom” or “Path Custom Add”.
Select several arrows at once. Hold CMD and click on the arrows.
To add rounding, press Enter on paths and select points for rounding. You can also select multiple arrows and points.
Base of arrows
In the User Flower Kit there is a base of arrows, you can select the desired arrow from the symbols. All arrows have names.
I think that these arrows are suitable for the flowcharts; this is not convenient for creating an user flow of the finished interface.
Step 5. Number the screens
For comfortable map navigation it is important to have screen numbers. You can insert a number in the symbol panel for each mockup.
Or not. You can also delete numbers here if you do not want to use them.
Step 6. Specify gestures
The transition to a new screen does not always happen by pressing, sometimes it can be holding, swiping, moving, etc.
Write a gesture with the text, so it is more understandable.
Step 7. Comments, conditions and statuses
On the arrow you can write a comment to explain the condition of the appearance of something.
I also added small labels to the set, they can be inserted into specific elements of the screen.
In my practice, I marked the functions on the screen elements, they were indicated in another document. Everyone liked this approach.
Step 8. Name and Specifications
Add a name and information about the project, such as the last update of an user flow.
Step 9. Saving
The file will be very large. You can segment your user flow into modules. This is convenient for understanding the logic of an application or site.
I recommend using Sketch Cloud so that the members of your team have a link to always the current version of the user flow.
Let’s start with User Flower
Create fast App User Flow in Sketch. Visit https://userflower.com/ to purchase the kit for a small fee.
How often do you release updates?
We try to update the User Flower immediately after the release of new features in Sketch. All customer are automatically notified through email.
Will updates also be free?
Sure, you’ll get every update for free.
Discounts for students?
We offer a 50% discount on all our products for all students and teachers. Just provide some proof.
Yes, you have 7 days to get refunded if something went wrong. But this applies only to purchases through Gumroad.