Create your own user flow kit in Sketch

What is going on MDs here. And in this video I want to show you how to make a user flow kit inside of Sketch. Let's take a look. So a couple weeks ago I released a premium product called Flowkit and you can find that@scheckflowkit.com and what that was was a library that allows you to quickly just place arrows for user flows inside of your designs. And it looks a little bit like this. Here are all of the symbols and here are some examples of the way this flow kit kind of works. So all of these little pieces here, these arrows and circles and tap, all of those are library components. But this is a product that is available for purchase and not everybody wants to purchase a product. So I'm going to teach you how to make your very own for free. It'll just cost you a little bit of time. Alright, so if you look at these, I've got every single direction with all of the resizing rules in place. And I came up with 11 variations for every direction. So I'm going to create a new document and I'm just going to make a quick symbol. So it generates a symbols page for me and then I'm going to delete it because I don't really need that. I have my shortcut for creating a symbol set up as command K and I've done that in the system preferences. Alright. 180 by 180, that's going to be my first symbol size. I'm just going to start with the L key. Draw a little line. I want this to be. Whoops. I deselected. I want this to be 4 pixels wide. I'm just gonna go with black. I want this to be at 0 90, 180 0. Whoops. That should be 90. There we go. Basically just want this in the center and I know that my artboard is 180 by 180. 90 is half of that. Alright. And so what I'm going to do is create a new shared style called path solid. And now I'm going to create a circle. Let's do 10 pixels. I'm going to place this in the middle and then over to the left. And on an artboard this will get cut off. But as soon as we turn this into a symbol, it's going to get not cut off. And I want a little kind of a bounding. Whoops. I didn't mean to mask that. Somehow I masked that. I want a little bounding box of 20 by 20 behind this circle. Be a little easier if I make this 10% opacity, I just hit the one key to change the opacity. And the reason I'm doing that is just to have a bounding box. This is going to be my path cap and I'll call this circle and we can always change these later. And I might as well go ahead and make a path cap arrow as well. And then I can delete these because those were just simply a little bounding box and just adding a point here to the shape. Whoops. Select these points and I want to hit this. What is going on here? Those three points distribute horizontally. I don't know why that is not working. Well, there we go. I'll just kind of shift nudge it into place and I'll put a radius of one. It's going to naturally look closer to the left. So nudge it over one time to make that look right. So now I have this symbol. I'm just going to option drag and then just change that symbol to the arrow. Put this over there, put this one over there. And then I'm going to line these up in the center. And because this is 20, I know I can do a shift nudge over 10 pixels and it'll be right on the center point of that edge. And I'll show you why I'm doing that. I want to go ahead and name this flow, right? And hit command K, convert symbol into an artboard and it will kind of give you an instance of that. And now you can see, now you can see how this is not getting cut off. And I'm going to go ahead and rename this in my layer to point A and this will be point B. And I want A to be on top, B to be below that, and then my line will be here. Alright, so the reason that I'm making these but up against there is I can go to symbol flow, right? And I can pop that into place. And now if I have like, you know, two symbols and they're butting right against each other, I can say, oh, okay, my A, I can change that to none and B can change that to none. And now I have one continuous path going through. And this will, this will work well when we have lots of others that we can snap together. So let's move these out of the way. All right, so there's our flow, right? Just double check everything before we start duplicating this. We got path solid. And if you want to get fancy, you can hit Control command spacebar to bring this up. This little emoji picker and then choose one of these little kind of child arrow indicators. That way when you do, you know, insert this symbol on another page, you get these nice little nested overrides layers. So that's pretty cool. And I'm just going to duplicate this. And now we're going to do flow right curve down. Alright. So I'm going to send all of this to the top up here and I'm just, there's a couple ways you could do this. I'm just going to add a point, connect it down there. I'm going to make sure this Y is 180 because I want it to be nice and exact. This should be the Y should be zero and that Y should be zero. And then we'll go double check kind of where this is. So because we have a four, because we have a four point border, we've got two pixels bleeding off to the bottom and two pixels to the top. That way if our registration point is on the zero, you can see those in both places. Also I'm noticing that I didn't make my circle the same color as my path. So I'm just going to double click into that, select both of these pieces and make those black just so it looks nice. And I mean you can make those anything you wanted to be. Alright, so back on this path I'm going to hit return, select this, make the corner radius 40. You can do whatever you want. I like it to be a little bit round and I'm just going to hold command near the corner, rotate this, move it down to the bottom. There we go. So now that's our flow right curve down. But we want to also keep in mind that we're going to be resizing these. You can see nothing is happening right now with that one. And I should have done this before I created that one. So they had resizing rules. So I'm going to select this. And in the resizing panel right over here, you've probably already seen it before. I'm going to just hit this left pin to the left and I don't want the width or the height to change on the symbol. Same for those, for the arrow I want to pin it to the right. I don't want the height or the width to change. I will never want these heights or widths to change on those little caps. And then for this arrow I'm just going to click right in the middle. So. So it kind of pins it everywhere. So now you can see no matter how I scale this or size will work to a certain Extent. Actually I could probably. If I took off the top and the bottom, I could probably get that to scale even smaller. There we go. So these are. They're going to break at some point, but you're never going to use the tiny, tiny version. It's always going to be. We're assuming that we're going to use this at least 180 pixels or larger. So flow right is done. Now we're going to add resizing rules here, bottom and the right, top and the left. And then this one top left. Actually we'll just hit this in the middle. We want it to resize everywhere. Just do a quick check on this thing. Alright, that's looking good. Now we will. We'll duplicate this, make sure that, you know, our A and B is all lined up. This is much. You know, we'll go back and change these names if we need to later. Flow right, curve down. Now we're going to do flow right, curve up. So the quick way to do this is select everything with command. Select hit command G to group it and then flip it. And now command shift G to ungroup. And now we just need to change our resizing rules accordingly. So don't pin to the top, pin to the bottom. And if we test this really quickly, you can see that that's working nice. Alright, so back to my actual flow kit. You can see I've got these variations on the way these curve. So I've got right curve down. I've also got right curve down hook and right curve down U turn. Because a lot of times you need different variations depending on the flows that you're making. So I'm going to make three different variations of the curve and then I've got a snake that will make two different variations of. Alright, so back to this one. I'm going to make the hooks and actually I can just hit. I can select this and hit command D. So let's add a point there and we'll go right to the middle here. We want this to be 90. Remember we're dealing with 180 by 180 pixel artboards. I'm going to select this corner and add 40. And now I'm going to hold command, rotate this, move it to the middle and change my resizing rules. I want it to be at the bottom but not only to the actually to the right. That might, that might actually work. Flow right curve down hook. Let's just give it a try and see what happens. Alright, so my hook is growing and expanding whereas my arrow is staying. But you can see in the flow kit version, I actually want that hook to stay the same size. So what we're going to do is make this an individual piece. So back over here I'm going to select this because we want to modify these smart corners. If I were to use the scissor tool or something like that, while this had these corner radiuses radii applied, they would, they would get broken. For example, if I use a scissor tool here. Now these are no longer smart corners. They're broken into actual vector curves. And that's not what we want because we want this to resize smartly. So before we edit this path, we're gonna bring that back down to zero and we'll just add two random points. Pull up the scissor tool. I have mine set to command option S. You can also just hit the scissor tool up here. And now that will make it where the path is cut. But we want this to be two separate objects. I'm gonna drag that out. And now we want to just drag this to 90 and then same same for this one. Let's go ahead and drag that to 90 as well. Select the corner again. Make it 40. Select this corner. Make it 40. Hit Escape. Alright, so now we want this width to be fixed because I don't want this to be moving around. And we want to pin it to the right, pin it to the bottom. And then for this one I'm just going to leave it right there and see what it does because I do want it to stretch. There we go. So now this is hooking like we want to. And so you can see that this is breaking as it gets smaller. So we can try to change the rule here where maybe if we took the top and the bottom off so it's still stretching and now it's not breaking. So sometimes you just have to play with these rules to get them to do what you want. So that is actually looking pretty good. We can also, you can always insert these symbols from here. Or my personal favorite, just bring up SketchRunner, type in Flow, right. Curve down hook, pop it in. And then if I also had a flow. Right. These are all my library elements coming in. I'll make sure I get this actual symbol. So you can see now if I snap these together and remove the B and remove the A on that one, it's going to work nicely. So I can make this as long as I need to. This one can go this way. You know, it's just like a very snappable and customizable kit that we're creating here. So let's get rid of those. We got a few more to make. Flow right, curve down, hook. We're going to do the same thing, but flow right, curve up, hook. So same trick. Cmd select Command G, flip command shift G to ungroup. And we'll have to change our resizing rule here. We'll go from bottom to top and this one should still stay just like we need it. So the path is looking great. We just need to change the rules on the caps here. Put that on the bottom, put that on the top, and let's give that a whirl. Boom. We got our hooks done. Alright, so now let's do our U turns. So I'm going to select this one again because the U turn is going to be completely stretchy. We don't need extra pieces. That's why I chose to select this one. Make sure that's zero instead of the hook. Make that 40. I'm just going to copy this one since it's already turned the right way and click the name and hit Command V. And then I'm going to control command to the left and to the bottom and then shift to the left and nudge to the bottom. So it should still be the same name, but just be careful. If you paste that, you want to make sure that you're keeping the B below the A because this is going to determine how it appears in the overrides panel. And we want to change the resizing rule from the right to the left. So flow right, curve down, u turn. And I came up with all of these names while creating the flow kit. It just was kind of an intuitive way to follow the point of origin. So it's either a flow or it's a tap. And then so it's the type and then it's the direction one, and then it's a modifier and then it's direction two and then there's the optional modifier and then there's the style. So you either leave it as default or you can type alt. And that's kind of the algorithm, if you will, that I came up with or the formula for naming all of this so that it works really well with sketchrunner and it ends up becoming intelligently grouped inside of here. I'm actually not. I'm not naming these the same way that I did a flokit just for simplicity's sake. But you can see here, I've typed in flow up, curve, left, hook. And what that does is that anytime you Add the slash, it will create a new drop down menu and it just kind of keeps it a little more organized. But I'm not doing that here. You're welcome to do that in yours and experiment with that. But for this sake, for this demo, we're just gonna go with it. So flow right, curve down U turn. That one should be good to go. It is. And we're gonna do the same thing, just duplicate that. And we're gonna do flow right, curve up U turn. And I don't even need to flip anything. I can just kind of drag these around. Quick change of the resizing rules and actually a slightly quicker way to do that would have been you'd have to rename your layers, but you could just choose that symbol and say, okay, I want to do arrow here and then circle here and then flip that thing. So the resizing rules would stay in the plot and stay in place, but you would just need to change the name of the layer so it wouldn't be confusing and then reorganize that layer. So this is flow right, curve up, u turn. Alright, so we've got our default curves, we have our hook curves and we have our U turn curves. Now we're going to duplicate this thing again and make our first Snake flow right, snake down. And I want this to be half, so I'm going to go to like 80, I mean, excuse me, 90. Because this is still a smart corner. It's not going to change the corner radius when we resize. So actually let's leave that one there and then let's just bring a dot over here. 180 by 180. So I was recording that and then one of my studio mates came in and I didn't want to be distracting so I shut the door to the sound booth. Anyway, just thought you might want to know that. Back to the video. Alright, so now you just want to select that point right there and change that to 40. Rotate this thing. Hold command, rotate. And the resizing rules should still work here because we didn't move the arrows around or anything. So flow right, snake down. That is working just fine. So flow right, snake down. Now we're going to do flow up. Flow right, Snake up. Command select, command G. Flip it. Command shift G to ungroup. Change our resizing rules from top to bottom to top and then top to bottom. That should work for Snake up. So that's looking good. And I have in my flow kit, I wanted to have the ability to do Snake but also Snake with a hook. So we have to have an extra little piece here because to me, I tested this a lot and it always worked better for me when I had the hook that was not growing with the rest of the object. And so in order to keep that piece, in order to keep it from not growing, it has to be its own little piece with a fixed property on the height or the width. So now that we've got snake down and snake up, we'll do our variants. So this will be snake down, hook, and let's see, here's what we want to do. We really just. We're going to move this point to halfway between, halfway between here, which is 90 and then 180. We're good to go at 135. Now I'm just going to make a quick little. You could do this with the line tool or you could do it with the rectangle tool. I'm just going to make a quick 45 by 90 rectangle and then I'm going to turn this into path solid, hit command option S, get rid of these two. Then I'm going to hit return, select that, make the corner radius 40 rotate, move it to the middle, and let's work on our resizing rule. So this will be pinned to the bottom and the right. We want a fixed height and this one will be pinned to the right and pinned to the bottom because we don't want this hook to grow. So now when we stretch that out, that should work pretty well. The other thing though, here, and this just depends on how you want it. You can go, you could leave it like this, but I personally felt like I wanted the bottom part to be stretchy and not both sides. So if you look back at this flow kit, you can see like when I resize this, only the bottom pieces are growing and not the hook or the far left. I just felt like that was a better, offered better flexibility. So in order to do that, we need to go back in here and change this a little bit more. So what we're going to do here, we're going to remove our corner radius from both of these points because we need to modify this. I'm just going to add a random dot point rather to both of these. And these are going to be separate paths. I'm just going to separate them here. Go back in, move, make sure this is like right at 90. I just want it in the middle. While I'm in here, I'm going to turn this into a 40 point radius. Basically the same thing on this one. You have to Hit the escape key. Otherwise it wants to put a point point somewhere. You have, if you hit the escape key, you can just choose that, slide it up to 90, select that point and make it 40. Now I can pin this to the left and I can do fixed width and I can grab this one, pin it to the bottom and the left because I want it to grow here. But be pinned over here and see how that works. So now I've got these three individual pieces with different resizing rules. Alright, so that's looking pretty good except for this corner over here. So we're going to play around with that a little bit more. So let's pin it to the left and the right to let it grow and that might solve our issue here. There we go. So now we have a snake we can see as it gets smaller that kind of breaks again. I'm not too worried about it because it, we're not going to use it smaller than that. But I think if I take the bottom one off that might still, sometimes it will still resize and, you know, it's a matter of. There we go. So now we have a snake we can see as it gets smaller that kind of breaks again. I'm not too worried about it because it, we're not going to use it smaller than that. But I think if I take the bottom one off that might still, sometimes it will still resize and, you know, it's a matter of just kind of playing around with these and they're not going to work in every single situation. Like you can't do it smaller than 180 by 180. But with the average screen, with the average mobile screen being 320, very unlikely that you would have a tiny little, you know, hook or something like that. Now the small ones like this, if you did need, you know, 80 by 80, this one would totally work. So it's, I think, you know, this is the most versatile way that it could be built, in my opinion. All right, so the hook is done. Let's duplicate that and do flow. Right, Snake up hook command select command G. Flip command shift G to undo all of that. And now we're going to select this and kind of nudge it into place because it got out of whack a little bit. So I can see this is right on the baseline of that symbol. That's where I want it. Now I just need to change these resizing rules from top to bottom or bottom to top rather. That one will go to the top, that one will go to the bottom. Whoops didn't mean to click the middle. If you do click the middle, it will remove the fixed width and height. So you'll need to go back and select that again. Alright, so flowright snake up hook is now working. We got 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11. Alright, there we go. There are our free User Flow Kit pieces. Thank you for watching. If you have any questions, just hit me up on Twitter DS or Instagram ds. Thanks for watching. If you enjoyed this and you want to see more, hit subscribe. If you like it, smash the thumbs up. It helps the algorithm populate through the interwebs. So yeah, thank you and I'll see you in the next video. Sam.