Speaker 1: A common mistake most designers make is dating the handoff process starts at the end of the design. It is actually the other way around. Your handoff process starts at the beginning of the project right before anything is even done or even before Figma is open. I made this post on LinkedIn and it went completely viral. I know a lot of designers have been struggling with this but I did not know to the extent in which people are actually trying to you know get over this hump and understand how to effectively hand off their designs to developers like a pro. In that short video I did say if you wanted me to make a full video write in the comment make a full video and these people replied so as a man of my word I had to make a full video to show you how to prepare and hand off your design like the absolute pro that you are. But then something happened. While I was halfway to completing the video, Ficon happened and a lot of new things changed like we've got some new features, we've got dev mode, we've got variables, advanced prototyping, auto layer wrapped and a lot of a lot of other things together that made me had to reshoot this video to kind of introduce the new concepts that Figma has made available for us to help off with this handoff process. So what I'll do is I'll walk you through the steps, I'll show you how to do it in Figma with just a little pet project and if you have any more questions you can leave them in the comment section I'll get to them and try and answer them to the best of my knowledge. The very first thing you need to do is to have what I call an alignment meeting. So you need to speak with the stakeholders, engineers, primary decision-takers, have an alignment meeting to be sure that you're in line with the goals and the objective. This will also give you an opportunity to understand how the developers love to work, understand their limitations or where they might have issues with so you don't just overly create designs that nobody can build out and it's just overly complex not solving the problem. So that alignment meeting is the first step in your handoff process. This would help you set and hit the ground running to make everyone feel inclusive and the way you handle this pretty much determines to an extent if your handoff process might be smooth or not. So when most of this is done and you have a clear understanding, everyone understands the idea of the goal and the objective to be done, you can then actually start designing. So let's just jump right into Figma with this pet project I have here and I'll show you exactly what to do, how to hand off your project like a pro. Alright so I have this little project, this is just a simple login screen with some authentication, this is a simple modifaction authentication screen, it's just something that like I did, I think I did it for like a test or something like that way back and so I'll just show you how I would prepare this to hand off if I was planning to hand this off to like a developer. After my first set of meeting and aligning with stakeholders, aligned, setting key tasks and periods on where we should do this, what I like to do is arrange each of the components of the screen into a flow-based process. Now what I mean is if you have a login and there are multiple steps of the login, you want all of those steps to be in a single line, right? So right now I have right now I have okay wait sorry my mouse alright so right now I have this login and I have like a security authentication for the login but this doesn't necessarily impact the login flow so I'm going to copy this out and then bring it down, let's arrange this pretty well, bring it down and then I'm going to what I like to do sometimes to create like you know just like a title bar here and call this login section. So now this is the first step like you're trying to organize it so that when the developer comes to the board and this is login section he knows that everything that has to do with login basically rest in this spot and then you can go ahead to group the other section I'll just call here MFA which is multi-factor authentication section. So now I'm going to use just this you know this little project so it doesn't get overly complicated to explain these things in depth. So now I have these two sections and the second part of my job is basically done. What I'll need to do next is to show the interaction lines between them. For example, I have this interaction here whereby I want when the user is trying to log in and slide in here I want when they're able to match this shape together and they are able to log in right. So there are different ways you could do this by showing the interaction line. So yes there is a plugin I use called AutoFlow right so I can click on AutoFlow this kind of gives me this plugin helps me like show the direction in which I want the flow to go and I could easily click here and then you see generates this line for me this is not so visible so let's just kind of change the color let's use white just for the sake of this example. So what I'm basically doing now is I'm telling the developer that okay in this set of interaction I want it to go from this screen to this other one but this might not be I want it to go from this screen to this other one but this might not be so clear cut right. So you also need to do what I call annotate. So by annotating is basically like helping your developer by adding just some text into the adding some text into the design. I'll just type T and say allow oh this is up here let's bring this here this looks so big. Okay so I'll say allow user to drag and match puzzle. So keep in mind like everything I'm doing here is just rough and I'm just trying to give you an example of you know some of the things you do. So me adding just this note here associated with this design gives a lot more clarity to what the exact interaction I want for this design and this can go more detail. This first handoff class is just it's like a pre-introduction and I'm sure in other videos we'll go way deeper into it. I want to try and keep this as short as possible so you just annotate for the designer to you annotate for the engineer to kind of understand the idea behind the interaction you're trying to pull off. This is even before like any of the prototypes or so coming. So now I've done two major steps. First I've been able to segment my designs by flow based approach. We have the login and the MFA. Next I've been able to connect like different they call these red lines but mine is white you can change the color to whatever you want. I've been able to show like the red lines to show the direction in which I want the flows to go in like which screen I want next. If I wanted this screen to link back to this first I would also annotate that and show it and now I've been I've started annotating like some different scenarios whereby how I want this interaction to really look like in the design. Keeping this in mind the next thing I would like to do is to design some edge cases. We all know that once you start a design process once you start designing most times we don't design edge cases at first. It's something I like to do towards the mid time or towards the end. This is because most times when you're testing with users you wouldn't necessarily always test with edge cases unless that particular project determines it. But in real life when users are coming on to your app to your platform they are not going to have any information at all. For example this MFA section is for a user that we assume is already like on boarded on this app on this product or there are cases whereby users might not be on boarded or might be on boarding for the first time so you need to show those edge cases. So that means I might need to design an edge case to show the sign up. Let me just move this up over here. So we could just call this sign up and this could be an edge case or something I like to call it. You could call it first time user. So I'm not going to go through all of the sign up screens just because this is not focused. This tutorial this class is not really focused on you know teaching you how to design but how to hand off. So you create that sign up. So these are edge cases. Create different edge cases. Create empty states for the cases. You create scenarios whereby you know like might not be there all the time but some users will have that and most likely would show you a screen. So if that suits what you're doing you need to create those edge cases and have them in your design ready for handle. So I'll just list some of the edge cases that you might have. You might have FTU which is like your first time user. You might also have for your power users. Power user. Then you also need to do your empty states and then you need to replace with real-like data. So what I mean by real-like data is basically most times when we are designing we use a lot of lorem ifs and or so right but there are some areas where you actually want to put some kind of life-like data like if you're expressing a first name and last name you can use a plugin called content real to give you some kind of real-like names and content to fill in those spaces and then you replace it. Now you've done most of this your design is looking good almost getting ready to hand off so you need to document your design. This is something I will cover in an extensive other video because documentation is really really complex and simple at the same time. If you understand it, it's easy for you. If it's first time it might be a little bit complicated. So a document your design basically means explaining to someone who is coming here for the first time what each design does. So what you can simply do is link a doc to this design you can link a word doc to it and your word doc can basically give a brief overview of the project, give a brief overview of the outline, the goals you're trying to solve and possibly durations, people to contact and the different steps or the different flows you have in the project. For example, if you have a login screen, if you have a sign-in screen, if you have a checkout screen, you can help segment this so that the developer has an idea of how many sections this app is broken into. Speaking about sections, this is another thing that you know Figma introduced in the last design and I just had to Figma introduced in the last Ficon and I just had to bring this into this particular tutorial. So now what I would now like to do now is to section most of my designs. So I have the login section, I could tap on shift S or grab this section, I'll go to the top left or click on shift S, grab the section 2 and put my designs inside different sections and I'll show you why we are doing this. So with the new update of the dev mode, you can now easily, when you're satisfied to an example, creating those cases, annotating, drawing those red lines, you can mark those projects ready for development. Amazing. What this does is, when you hand this design over to the developers and they switch on the dev mode, they are only shown the page where you have marked the design ready and are not exposed to other pages on your designs that have unnecessary things for you to do. So after most of all the steps I've mentioned, which includes, you know, organizing the file, having your first meetup with the engineers and stakeholders, showing the interaction lines, annotating, designing edge cases, you would want to document and section your design. So this is another way of doing this and if you have time and you can create like different doc sections for different groups of the design you have, you can link them beside this. I would advise you for a start, you just have one document or if there's a PM that has a PRG link, you can also take some details from there to help you ease up the process, right? So that is it about that. So when you create this and you mark them ready for development, the designer comes here and they're able to see which of the frames or which of the sections are related together and which ones they can prepare for development. So there are some parts I'm going to talk about which is not necessarily like a flow but every designer to his own and people do this differently. Sometimes the developer might need help exporting some assets so you can also prepare assets for exports. Like for example, this simple interaction I did here, I made a component for it over here called the puzzles and I can prepare these assets for exports by just setting the exact amount I want them to export it and in which, you know, format I want them to export. But almost every developer now should know how to do this but if they have any issues with that, this is why part of the communication is important. If you have any issues, you can also just set this for exports and when they come and turn on the dev mode for things, they are able to see which of the sections they are to export and see the colors and everything they basically need to get in the project done. So this is just like an introductory to the handoff process showing you how you can do this for handoff. When you're done with most of this, you can obviously share, hit the share button, give them view access to access your designs and all of those to access your designs and see everything they need to do. If you need help or you're confused on how to facilitate some of these initial iteration parts which is like the stakeholder alignment and the developer alignment, leave a comment in the comment section and I'll see if I'll make a video or a workshop that shows how I facilitate some of those meetings. If this video has brought you value, don't forget to like and subscribe to the channel and if you'd like to know more about designs or some of the new features Figma launched, click on this video right over here where I'll be explaining it with a practical example and before I leave you, let me just show you how this prototype works and you basically drag this... boom. That's it guys don't forget to Like and subscribe and I'll see you in the next one.