A designer walks through Flow Kit, a Sketch toolkit that lets you build user flows and content maps from reusable symbols instead of drawing them from scratch. Saves time on repetitive work and includes customization options for different project needs.
So about. About four months ago, I made a product called Flow Kit. And it was just. And it was just gonna be something small. I was gonna put it up and see if people liked it. And to my surprise, a lot of people really did like it. So I've been kind of. Dang it, there's a freaking train coming by. It's basically just kind of a toolkit to help you with like, handing off your flow to developers or like trying to get buy in from your team, things like that. And I made a video on the Flokit website, but I never, I never actually like made a video for YouTube that showed like how to use the product. So I've been like, kind of struggling. Like, do I just. Should I repurpose this video or should I create a new one? But this video is still pretty good. So I'm just gonna let this video rol that I made for the website that never got published to YouTube that just @ least explains the product because I don't have anything on the channel that like really shows how it works. And this video shows how it works. Drawing lots of lines inside a sketch is a big pain, especially if they're curvy and they need to bend around or wrap and the endpoints, they're just not good. It's hard to do that inside a sketch. And when you want to do a custom version of that, it just takes forever. Well, that's where Flow Kit comes in. Let me show you how it works. Bring up libraries, go to add library, choose the Flow kit and boom, you are done. Now I can go up here and add these symbols manually. But if you have the Sketch Runner plugin installed, you can hit command apostrophe to pull that up and just say tap right and hit return and stick that right over there. Now all of these are positioned correctly inside of the symbols with, you know, pinned objects with a fixed height, fixed width. All of these are interchangeable. So if I wanted to change the tap color, I could go in here and change it to that. If I wanted to make this the alternate version, I could go in and change it right there. If I wanted the. The B point B to be a circle instead of an arrow, there's lots of customization options inside of there. So moving right along, I'm going to say tap right. This one I want to kind of snake down because I want it to be. I want it to kind of go to the center of the next screen. You could also do snake up and get the alternative to that. But this one I'M going to go snake down, edit profile, stretch that guy. Bring it back a little bit. And now I want to show that this cancel button goes over here. So I'm going to say tap up and I want this to curve to the left and I also want it to hook and I want the alternate version. So I'm going to type alt. Pull that over there and there we go. And if I just want to say tap right, put this thing here, put in a little iPhone asset and gonna hit saved. Alright, there you go. So you can keep using these all throughout. You know, copy these and it's gonna be the same exact symbol. So if you click into this, you see that this belongs to an external library. I'm gonna go look and see this particular symbol inside of the library. These are all of the different symbols. You have full control to customize any of these. And this right in here is the bread and butter. You can see that when I move one of these, that the tap symbols are nested symbols of the flow symbols. And what I mean by the flow symbol. If you look over here in the examples, here's the Twitter example and you get all of this is the file that you get when you purchase FlowKit. And you can see that some of these high level flows, they are the same, the same type of commands. For example, this one right here would be flow up curve, right? And that's got a hook on the end. So we'll put hook. So you can see this is there. I'm going to stretch it out there and that's how that works. And this one, this would be flow, right? And just pop that in, stretch it out. And this one has a decision point on the end. And this one is flow up curve left actually. Right. How bad? Type in alt because I want the secondary version, this is the default curve and I don't want the circle there. So I'm going to override the A point and hit none. So you can see I can just kind of link these together and start building out these flows so I never have to draw these lines anymore. You can also use these for content maps. Right here I've just got one of the U turns. I've got these blocks in here, lots of, lots of extra little symbols and arrows that you can use for sitemaps and just really all of your UX needs. And that's really the big reason why I created this document. I found myself drawing the same shapes over and over and over every time, wasting several hours at the beginning of every project. And the goal behind this library is that I would never have to draw these again. I can stick them in a library, reuse them over and over and over for every project and just save myself a ton of time. So I'm going to be using this for all of my new projects and I hope it's just as useful for you as it has been for me. Thanks for checking out Flowkit. It's definitely like a little bit sales pitchy, but at the same time it's something that I use all the time and I've gotten lots of great feedback. I also have a video that shows you how to create this exact same thing for free. It's just going to take you a long time to do it. So yeah, that is it. The reason I'm putting all this together because I just recently after many many emails and messages, people asking if they could use it for their teams, if they could share it with their co workers, and after I thought about it a lot, I decided to keep the original price as the solo license and then come out with a team license that is a massive discount for up to 10 people and then like a crazy unlimited discount for like large enterprises. Just a lot of other places that were asking for like team licenses. You can go to sketchflowkit.com check all of that out. If you have any questions about user flows, content, maps, kind of like strategy up front. For how I use this, why I use this, let me know in the comments below. I'll be happy to answer all the questions that I can. And who knows, I might even start making more videos. Thanks for watching and I will see you later. It.
