Prototyping animations with Figma

hi there and welcome to this video where we're going to be taking a design that i already created and we're going to be adding some interaction to it all within figma uh we're going to be using figma's prototyping features to be able to do this we're going to be adding in hover effects as well as a hamburger menu that can open and close uh the x will cross all of that so if this is something you'd like to see how to do stick around hi there my name is kevin and welcome to my channel we learn how to make the web and how to make it look good while we're at it with weekly tips tricks and tutorials and we're continuing from that last design that we did if you didn't see that video and you'd like to just see me build out that layout you can go and check that one out there should be a card popping up for that one right now hi there kevin from the future here and i just want to apologize for the audio on this one um you'll actually hear me very faintly talking in the background through parts of the video i really don't know what happened at all to be honest and i'm trying to figure it out i haven't seen it in any other recordings except for this one something must have been playing i didn't hear it at all uh hopefully it isn't too distracting for you as you watch through this but yeah it was a really fun video so i hope despite that you can still enjoy it and learn a couple of things along the way as i said we're going to be looking at figma's auto layout feature and just seeing how it works because honestly if you want to share this with a client or with a developer that you're working with and you need to show the different ways you expect things to work or you want the client to have a good idea of how everything works it's just so nice when they can see all that interaction all the different moving pieces before the hard work goes into actually coding it all up okay so here is the design that we left off with and what i want to do is take this and make it interactive using the prototype tool which means we need a whole bunch of copies pretty much of our layout here and so what i'm going to do is i'm going to start with my desktop view and we're going to work off of this one so i'm going to just i'm taking my regular move tool but i'm making sure i'm clicking right on the word desktop to select it and then i'm pushing alt or if you're on a mac it'd be option and then you can click and copy that whole thing down and we're gonna have two different groups in here we're gonna have one for the navigation so i'm gonna move this over to here um and then we're gonna have a second group for the buttons uh down at the bottom there so this one i'm gonna grab here again actually and just move that over this is gonna be our buttons and you could name your layers appropriately i'm gonna skip that step for now uh but here we're gonna have four of these guys and actually we can do one of them going this way as well and i just find it easier when i'm setting all this up to organize everything to make sort of trees on how everything is moving around and i'm actually going to move my base one all the way over here because i just find for organizational purposes it's a lot easier to do that and then i'm going to grab u and move him over and won't worry about the mobile one after it's going to be a little bit more complicated and you know what i think we can make this a little bit more interesting on the desktop u2 so i'm going to take this one and make a copy and this is where we're going to start everything off um and to do this what i'm actually going to do is take all of these i'm going to select them move them over to about here i'm going to move this one a little bit more and we'll grab these and move them even more now and this is similar if you don't move too far so they fall off if you need to move them really far out just make sure your cursor is still on the artboard because as soon as your cursor goes off the airboard they will leave the artboard or the frame as they like to call it a figma so i'm going to move all of them over like that i'm going to select everything here and we're going to drop the opacity and i know they don't it would be nice if they put opacity here um there's nothing listed but i'm just going to push 0 there and bring the opacity of everything to 0. and actually if you select everything and you push one on your keyboard that's ten percent zero is um so this is on the keypad i don't know if it works that works on the numbers on the top two so you can choose your opacity zero is a hundred percent but i think if you do zero zero it will drop to zero so you can do that so you can do that to speed things up a little bit so there it's at zero and then here it's going to move into place and have the color so let's try that out so to do it i'm gonna come here to prototype and i'm going to select the whole desktop and you'll see it gives me this little plus thing here and i'm just going to click on that and drag it down onto this one and once it snaps into place i'm going to let go and it wants to know how when is this going to happen so what's the event that's going to cause it on click on drag hovering what do we need to do in this case we're going to say after a delay of one millisecond so as soon as the page loads in we want this to happen and what's the animation is it instant if it's instant it literally means it's changing from this to this so that would be if you have like a whole bunch of pages built out and when they click on to go to the about page you want that to be instant because you want to switch to that page in this case i want to go and do a smart animate or you could do a dissolve i guess but i have two things happening i have it moving and i have the opacity coming up so if you're moving stuff around or resizing stuff that's when you want this smart animate which is really cool how it works you can choose the ease in ease out i'm just going to go with an ease out over 300 and what i want to do is see how it looks so i'm just going to push the little play icon here and you see that we saw it come in if you want to see it again just push r on your keyboard and you can watch it happen again um so what i'm actually going to do let's just close this now when you do this it opens a new tab um so don't close your figma window because i do that all the time i'm going to close that tab and i'm actually going to move these guys out a little bit more i want there to be a bit more movement though let me know and i think i might slow that animation down a little bit so i'm clicking on the desktop just so i can select my little arrow thing here and we can come here and maybe make it 500 milliseconds and let's try that again we have this going but it's stopped i think that looks better the takeout's moving a little less than i'd want it to so maybe i have to move him over i might have missed it when i did that last one but when it page loads that can slide in like that just you know for fun we're learning how this works so but it could be an interesting thing let's just move that over and try one more time which is terrible there we go i think that looks pretty good perfect so with that done now we can make some more interesting things happen um so this is where i have all these different states that i want to build out so the first one is going to be for my buttons here so let's say this button so here's this is the default we're going to be here but what happens when i hover on my button so when i hover on that button we're going to go to this screen here so i'm going to go back to design and i'm just going to choose this color i'm going to switch it to the yellow and we'll switch the text color which is the fff here we'll switch that one over to my that's not high enough contrast so we'll switch it over to the really dark one like that i'm not a super fan of how that looks um but it should be okay so we'll go to prototype and now instead of selecting the entire frame like i did last time this time i'm going to go only on this button and i'll take you and i'll drag it down to the screen smart animate should be fine i'm going to do like a 250 this time i don't think we need 500 i think 500's a lot but now i don't want it on click i want it to be while hovering and this is something i was worried that i'd have to make like on mouse out go back to here but if you use the wall hovering figma's super smart about it so if we hit play we're gonna go back to the start everything should load in and then when i hover i get my hover effect on my button there i i just think that's so much fun so then we can do the exact same thing for this other one so i can take this what happens when we hover on this one you'd have some sort of design system or something probably but let's just make it look exactly the same they uh no this will turn to the yellow i actually want to use my colors here that will go to there and my text inside of it will switch to white and not white with the dark color there we go and then we would come up to this one and on my prototype say that we're going over to here navigate to on while hovering so exactly the same as we had before and now if we come back and usually wherever this play symbol is is if you hit play here where it starts so it loads in that one's working and that one's working like that so you get this nice interactive little thing you can share with people get feedback on it i find it so so cool super so that's looking pretty good um and now i'm going to do the next part kind of fast because it's exactly the same thing that we just did so it just means on each one of these i'll be changing the color so i'll be back in just a second okay so i've set up all my links you can see them jumping all over the place there so if we go and hit play on here we should have it load in and then i can hover on there hover on there or i've changed the color of all of these and made the exact same thing i did all the other ones to add the hover when i hover on top of those so i think that looks nice and cool it's not too hard to set up but one gotcha i want to show you is make sure that your design is really finalized before you start building these links in because if you decide oh i need another screen i forgot about one of the screens and i want to base it on the original desktop when you copy that over it's keeping all of those connections in place now you can select them individually and delete them but i find like it ends up creating if you need to have like in between state and you don't want to keep all of these other ones i don't think these would get in the way but just in case along the way you're playing around with stuff and you need to make another copy it can be problematic if it's keeping all of these things that you've set up so just be careful with it so here at mobile um so let's move on to the phone because the phone's gonna have a bit more of an interesting one here i think it's going to be there's a few extra things we want to do so for the phone we need to have let's just do our start and end state so when so when we click what's you know we're clicking on that so what's the first thing that's going to happen obviously my menu needs to grow let's double click to bring it now here's one thing that's uh important is you see how my navigation is actually behind this text i think some problems can happen from that so i'm actually going to delete this original one i want to make sure that my on mobile my main navigation is actually probably on top of everything including that hamburger let's try making sure it's just on top of there i might keep the hamburger we'll see what happens um so let's just bring that so when somebody clicks on this we want this to grow out and i think that could be okay i can fit everything here so that maybe the hamburger could stay on top that could be interesting so that's going to grow out and i want to change this so i think what i'm going to do is actually just move him not off screen all the way um but move him pretty far this way and on my design i'll drop the opacity of it down to zero so when we go from there to there that will disappear sort of slide out and disappear at the same time and then here what i'll do is i'll rotate it and then i'm holding shift while i rotate if you don't hold shift it's free rotation whereas if you hold it it goes in 15 degree increments and i'll just move these up and down a little bit to try and get a perfect x is that perfect i don't know i'm sort of doing mobile first i might have to move one of them over there that looks a little better so i can get my x like that um and you could play with the sizes and all of that so let's just see how that's going to look so we're going to start here on my phone and let's go to prototype um actually this is could be a problem because we have three different little things here we don't want to force somebody to click on one of those little things so what i'm going to do is push r for rectangle i'm going to draw a big rectangle here this is going to be my click zone um so here we can choose the same color that's my background and i want to put this in my navigation but after the text so my logo that navigation group is all of the text that i think i deleted so there's nothing in there um but i want my logo and then i want this big clickable area and i'm going to use that as because that's a lot easier for somebody to see and to click on and then when i prototype it i can see if somebody clicks on that we're going to go over to here the only problem is we're going to need that here too so that's this rectangle i'm just going to bring it on over to here as well and in that one make sure it's in the exact same place as long as the layer name is the same i'm pretty sure that we won't run into any issues with that especially because we don't really see it anyway so i don't think we'll cause any problems but now on this one if somebody clicks on it we're gonna instead of having it go there it can come and go back to this frame here so if we click on it here it goes to here if we click on it here it goes back to there so let's see if that even works and see what that looks like so what i'm going to do actually is zoom out a little bit because i need to grab this little play button and drop it down over here right there um so that way if not we have no way to navigate to this now that my play button is there when i click play we should be there and now i didn't do the hover states we're on mobile so i'm not going to stress about it and you can see i get my little hand icon and if i click there we go so the smart animate is moving that over it's fading it out it's crossing those automatically and it's making this move up and down like that so i'm going to speed that up a little bit i think it's a little bit slow um so to do that i'm just going to click here it's at 250 let's try 175 and then i'd want the same thing going back the other way so i'll select it 175. and let's try that again if the elements aren't big enough yeah i think that looks a lot better you don't have to make that move i just wanted to show you that we can do a lot of cool different things with that you don't have to close this every time you can click back and forth i've always been closing it but um now one thing i did do obviously is i deleted and this is where remember i just said you want to be careful and not copy and paste stuff because it copies connections so i'm just going to grab all of those and copy that and i want to bring them back into this design actually paste and i want to double check one thing really i'm going to bring them here actually for now and you can see they have all those connections so maybe i shouldn't have deleted them in the first place so just something to always be aware about i'm just want to delete so i'm just gonna click on the connection for each one and get rid of it because i don't want that hover to be there it's gonna be super weird it's gonna change screens and everything um now in this case i don't want them like that i want them to actually be one on top of each other i should have one floating around and other stuff maybe that's playing with it i don't know there we go and i'm not too worried about organizing them well because i can select them all and i can tidy them up and let's align them all to the left and then bring them in like that now the one problem is these don't exist on this layer so now if i go to my prototype and i go there they're fading in which is fine because they're going from non-existence to existence so if you want something like that we could be very happy with that but if we want to do something a little bit more what we could do is actually bring these to be living on this one as well and if they're living here as well but once again what i'm going to do is i'm going to move them up a little bit and we'll drop their opacity down to zero and what should happen is when i click that see how they're moving down with the menu as they fade in so just different options if you do want to animate things make sure they're on both layers at the same time and so we could do something a little bit like that if we wanted to so there we have some of the things that we can do with prototyping in figma we're just scratching the surface with it but i think it is a fun exploration of some of the possibilities you can do and of course if you want to share this with people whether it's a developer that you're working with or a client that you're working with it opens up them having something they can actually interact with before the website starts getting built so they really know everything that's going to be happening and just even for yourself sometimes it's nice to sort of experiment with these types of things and the auto animate honestly there's you can try a whole bunch of stuff and most of the time it does a really really good job soon i will be coding this whole thing up so if you want to see how i managed to do that we'll be using html and css to do it if you're curious how i do that and you haven't yet subscribed please do consider subscribing to my channel a big thank you to my patrons for helping support me and everything i do here every single month you guys are absolutely amazing so thank you very much and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 27,433

Rating: 4.9796748 out of 5

Keywords: Kevin Powell, tutorial, html, css, figma, figma animation, figma animate, figma smart animate, smart animate, figma tutorial, figma prototype, figma tutorial for beginners, ui design, figma smart animate tutorial, figma prototype animation, figma prototype transitions, figma animation tutorial, figma tutorial web design

Id: ps6p9e6QmgY

Length: 16min 54sec (1014 seconds)

Published: Wed Oct 07 2020