Turning user flows into wireframes in Figma

hello it's Nick and today I'm going to show you how to create the user flow and turn it into the wireframes user flow is a series of screens that the users go through when they complete certain action and wireframes a basic visualization of those screens to make our exercise more specific I will create a flow for making an appointment to a barber shop using a website and we will start with the user flow I will use the plugin called wireframe which is basically a collection of a different libraries for wireframes created by different routers I will choose the flow kit by inst graphic this is this excellent library for creating user flow and I will use basic components that every user flow have and these are entrance point and process and also the arrows of course more complex user flow has things like a decision tree that allows us to make a decision and Loops but I don't want to create a complex flow I just want to use the simple linear flow and I will just copy paste the components to the canvas in order to modify them later so I will also need the arrow so this is our basic stack of the components and let me change the background to Dark One the downside of the kit is that these are the vector based elements I mean the font so I will need to when I want to change the text I will need to remove it and use the actual text instead so and will be entrance but this is the only downside that I found otherwise it's really nice too so let's ensure that it belongs to the elementias and then what we need to do is we can start creating the flow so let's do it and the first thing that when when we do then we book an appointment is that we select location again let's change its text here and select location it will be our city or specific parts of the city for example then after we will select the location the we will see the list of the barbershop that is available for our location and we need to filter Barber shops by specific criteria that we have for example we don't want to see barber shops that have like three from five stars rating once we filters the barbershop the next thing is we need to choose visit date and time actually we can change these steps for example sometimes we want to First this Define the visit date and time but if we want to find a place that we really like we usually start with the filter in barber shops first and then choosing the specific time that it offers for example The Next Step will be choosing a barber available in that time from a list choosing selecting a barber from the list of for the time that the barber shop is working and the next thing is providing details required for the visit this might be the phone number email and other things and once we provide the details we will should fill out the form and see confirmation of our appointment confirmation of our appointment Okay the reason why I provide this flow is that I will choose the actual wireframes for this specific States so what I will do next is I will run the plugin and I will choose a different Library which is called via floral flow map kit by Andrew kovalov and I will choose the specific screens wireframes for this particular actions so the first one is selecting location and I think the map will be the best one for this state so let's find out the map from the list okay this one looks good all right we'll modify the screen later but right now what we need to do is just to select the best possible screens from the this collection the next one is filtering barber shops next choosing visit time and date and these are the calendar or something like that so let's try to find out something like that all right the next one will be selecting Barber from the list based on available time and I think this one will work for us next one will be providing details it will be the basic form very basic form without any additional details like like this one I think maybe something different I don't know but this form looks looks fine I think and finally we will need to show the confirmation screen and I think this will work for us all right the next thing we need to modify the screens a little bit and I will just remove these unnecessary elements like this one since we will need to choose the one address that we're located right now this is the address of our location we need to confirm it let's leave it here next we will leave this screen I think unchanged only changing the these elements but otherwise it's fine making an appointment choosing a date looks okay this screen selecting a barber from the list this is not necessary let's remove it and I think we will need to just change it a little bit making maybe more Barbers available at the moment at the time and that's I think a role and providing details required for the visit again let's remove the unnecessary button like this one and otherwise it looks fine and the last one I will leave that changed what we need to do next is we need to connect the screens and I will go to the Prototype mode and I will choose the on click interaction that will basically translate us to the next screen so the transition will be instant and we will go from one screen to another with a one click so okay all right so this is it what we can do next is we can go to the preview mode and show how this flow will work for anyone who will see it so we can click it and go through the states explaining what the user will see at each state and provide an additional information if needed so this is it thank you

Channel: Nick Babich

Views: 8,825

Keywords: figma, figma plugins, wireframes, user flow, user flow figma, wireframes figma, user flow design, creating user flow, creating wireframes

Id: UJ6M7LZjKv0

Length: 8min 10sec (490 seconds)

Published: Sat Aug 26 2023