Learn how to use Figma prototypes correctly!

guys in this video I want to talk about something incredibly important and it is understanding prototypes and figma now a lot of people may think that they understand figma prototypes and they may actually very well do understand figma prototypes but most people in my opinion uh don't really understand the power of figma prototypes they just keep on using smart animate they think that they understand smart animates so they can do anything that they want so my question to you would be and you have to be very honest with yourself be very honest and tell me how you would achieve this particular effect so imagine if this was your design so I'm just going to go to this design and if I click on this living room what I basically want to happen is if I click on this living room I want this whole screen except the header and accept the footer to actually slide up the screen and then this content that we have on this other screen to come to this come to the screen basically come become visible in the Prototype what do you think you're gonna do I'm gonna wait let's say five or ten seconds just think about it I hope you've thought about it what a lot of people would do or their their first thought when they think of a prototype like this is okay we actually want to achieve this effect so what we can do here is I can actually have this content let's just have this content and I'm gonna paste this content directly here and then I'm actually gonna move this content on the side so once this happens if I click on it then obviously this content and we can name it like let's say inner content or something and this is going to be our main content stuff along those lines and what we what's basically going to happen here is on this living room screen we're also going to have the inner content this is the inner content and the main content is going to be here and then we're basically going to slide it off onto the right so now if let's say we click tap on the living room and obviously we need to add the smart animate property here so we smart animate we refresh and then we tap on it so voila we've done it like this is exactly how you go ahead and do something like that wait a minute who are you wrong you don't do it like this because this is a lot of work why now imagine if you actually wanted to update something here or let's say I wanted to change this position I wanted to let's say bring this here I wanted to have the good evening at the bottom even though it doesn't make sense but imagine if I wanted to do these things now if I try to do this animation again as you can see something weird is happening because obviously we've changed the content on this screen but we haven't changed the content on this screen which is functioning the smart overlay or sorry the smart animate which is why this is a useless approach of doing or achieving the effect that I just talked about a lot of people who mentioned that they want a smart animate the layers in this particular manner you're wrong this is not how you do something like this what you want to do here instead is you definitely don't want to do something like that there is an easy way for you to do it if you know how to use prototypes and you know these different animations and transitions that are available so for a transition that I was talking about or for an animation like that we can just say push what the push is going to do is let's just go ahead and have a look at it even though I haven't fully configured it but I'm going to do it step by step this is not exactly going to work the way that we want it so if we go here and click on it as we can see the whole screen this whole screen is being pushed out for this screen but we don't really want to do that so what do we actually want we want this header to remain consistent so if we want this header to remain consistent we obviously are using a component so we can say that the smart animate matching layer so if the header is consistent keep the header the same if the footer is consistent keep the footer the same so if we now go ahead refresh this prototype and click on this this is exactly the effect that we were talking about now as we can see the back icon is animating this grid icon is also animating and we can just go ahead and quickly just name them the same thing so we can just go here we can say that this menu is just menu and this one is menu solid so let's just go ahead and rename this to menu and similarly for this particular back icon we can say this is going to be the left icon just name it something generic and we're going to say this is also going to be our left icon that's it now if we go ahead and animate it as you can see the left icon remains or pertains its position it doesn't really again it just appears disappears and appears and then we also have this particular footer icon not necessarily doing a lot so here we basically have the same thing that we actually wanted without a lot of duplication so you easily can just update this screen you can update any screen and it's not going to mess with anything because obviously this is directly linking one frame to the other so now that we have an understanding of what push does I also want to go ahead and actually just talk about some of the other animations that we have which a lot of people may not be familiar with since we have Smart animate everyone's just crazy about smart anime but they forget about these basic transitions that actually save you a lot of time so let's just go ahead and create a ball so here we have ball one I'm also going to say we have a header let's just go ahead create an auto layout and maybe make this header a bit bigger and probably position it here centered okay so here's our header let's just give it a color something like this and then we have a footer as well obviously so let's just go ahead and create a footer now we have this ball one and then we have another ball let's just call it ball two now if we wanted to actually animate this ball to this one what would we do so I'm just going to go to this flow here if we click on it we have this ball coming in because we have Push now a lot of people may say that if you want this ball to go out and that the other ball to come in we should smart animate and all of that stuff but you don't have to do that this is your basic push animation you don't have to use Smart animate for these things push animations already allows you to do so if you wanted to do it in a different direction you can do it like this as well this ball is going to go on the right the other ball the new ball is going to come in so the benefit of push animations move animation slide in slide out all of these different animations is you basically get the effect that you want without doing a lot of complex duplication within frames which is really helpful now what's going to happen when you actually say move in so I just want to showcase what happens here so if you say move in what basically happens is the thing that we actually want to be displayed that's that we're going to is actually just going to overlap or con come on top of the current element so it's going to come here imagine if we in this particular case now this is really important I'm not sure if I have something like that here let's just go ahead and build it so I can show the use case of that particular thing to you imagine if we wanted to show let's say a pop-up menu a pop-up menu that comes from the bottom up and imagine I'm just going to write pop-up menu and I'm not sure why I created like a rectangle obviously you never use rectangles so imagine this is a pop-up menu that has to come up from the bottom if you wanted an effect like this so if you click on it the pop-up menu should come from the bottom up a lot of people again would be very ex very excited about the fact that you can just use Smart animate like maybe you can have this outside you can click on open overlay and stuff along those lines but usually when you're presenting designs to a client they also want to look at how the designs are looking actually physically on the screen so if I was to let's say and then let me just actually grab the circle and place it here as well and for the pop-up menu let's let me just change the color so we can differentiate it sorry here change the color so here's our pop menu so when we're presenting these designs to client they actually want to see what the physical screens are going to look like if we have this pop-up menu kept separately and we're linking this with let's say open overlay and stuff along those lines if a client is looking at your file he wouldn't know where exactly is this pop-up menu appearing until and unless they actually are using the Prototype view so imagine if this pop-up menu was like this and you actually wanted this pop-up menu to come from the bottom up what would you do well you would basically just tap on it and now if we go ahead and say that it should move in but it should come from the bottom up now let's see what happens so this is exactly the effect that you want you don't have to do open overlay you don't have to create a component you don't have to basically build this pop-up menu in this screen and then have it a bit upwards on the other screen and all of that funky stuff using smart animate you don't have to do that build these screens like how you would normally build them for designers for the executives for the people and the clients that you're sharing these files with and then use different effects that we have the slide in slide out move-in move out so on and so forth now if you wanted to go back here the good thing about this particular thing is since this is actually using a native transition that figma has if you link it to back I'm just going to Showcase it here you click on it the pop-up menu appears but if I let's say want to dismiss it I click it again again it's actually going to follow the same transition that we applied it previously so we don't have to do all of that funky stuff about like making sure that everything's in place on the other screen it actually goes out or whatever it is you don't have to do any of that you can basically just achieve a similar effect by using these basic transitions there's one other thing that I obviously want you guys to know as well and you guys can play around with these different types of animations we have move in move out obviously move out is very similar animation as move in so let's just try and move out it's going to be really weird here so if we do move out obviously nothing happens because we're doing it in the opposite way if we were somewhere here let's say I'm gonna go on to flow 2 and then we tap on it actually we have to click here and then we're gonna say this should move out so again we have this moving out and let me just go down so if you click on it it's going to move out it's basically the opposite of move in now there's another transition that I want to talk about which is the slide in transition so the slide in transition what does it do let's actually have the same example of the pop-up that we have and if we tap on it we have the slide-in effect which is pretty similar a lot of people would argue like what exactly is the difference between slide in and slide and move in so let's just go ahead and explore that so imagine if this ball was ball too and the color was slightly different the color was something like this and we have a move-in let's just first of all talk about a move in so move in is gonna let's say we wanna actually have it appear from the right to the left so we have this moving in it comes on top of the element without actually animating or changing this particular element that we have on the screen instead if we actually did a slide in now you can see that this particular and this particular ball is sliding out similar to a push animation but what it's doing is it's actually pushing it out slightly not completely off the screen and it's also so fading it out so it's a middle ground between push and move in which I think is can be extremely useful in certain cases and we can definitely talk about them in some other videos and when we're actually creating actual mobile designs or desktop designs so what I want you to take out from this video is not to over over rely on Smart animate and bake every animation in one screen because that doesn't really work usually when you're presenting designs to a client you want all of your screens in front of them and have them look at those screens add comments do whatever without necessarily going to the Prototype view so your screen should look pretty intact and all of the prototypes should also work so in order for you to actually work your way around that you need to start utilizing these three animations that I just talked about which is slide in slide out move and move out and then push so that's going to be pretty much it for this video do subscribe do hit the Bell icon and I'll see you in the next video take care bye

Channel: AM Design

Views: 15,845

Keywords: asaadmahmood, figma, figma animation, figma prototypes, figma smart animate, move in, move out, prototype, prototyping, push, slide in, slide out, smart animate, ui, ux

Id: _yVgc34ZejI

Length: 12min 18sec (738 seconds)

Published: Thu Mar 09 2023