Create an Animated Slide Menu in Figma

in today's video I'm going to show you how to animate a slide menu in figma super fast so let's begin this is the interactive slide menu we are going to create together so let's analyze it quickly to really understand what we need to achieve okay so here as you can see we have this dismiss button if I click on it it collapses and if I click on this hamburger menu icon there we go it expands so not only should this slide menu be animated but also this icon should be transformed to this hamburger menu icon okay so let's start creating it here as you can see I already designed this menu this is the expanded version I didn't create the collapse version we are going to create that together quickly but first we need to animate our icon okay we need to animate it place it right here and then we will animate our slide menu how can we animate that icon here as you can see I don't have two separate icons I only have this hamburger menu icon because we are going to create that dismiss I icon together first I'm gonna select this icon here this Frame I'm going to duplicate it hit Ctrl D or command D and what I'm going to do here is get rid of these two lines all right as you can see inside we have three lines we have one two three I'm gonna get rid of this last one and this one as well and here I'm gonna keep this second line I'm going to hold down the shift key and rotate it just like this point 45 degrees all right let me zoom in now I'm going to duplicate it hit Ctrl D or command d right click on it and I'm gonna click on flip horizontal to flip it horizontally and as you can see we've got this dismiss icon but here is what we need to do as you can see here in this icon we have these three layers as well one two three we need to change the name of these layers because when we use the smart animate option figma needs to get rid of this third line and transform this first line into this one so what I'm going to do is Select this one change its number to one and this one is going to be two and that's all next we need to create a component set because we are going to create interactive components right so I'm going to select these two icons I'm going to head over to the toolbar and open up this drop down menu and here I'm going to click on create component set there we go here is our component set and the last thing we need to do is to create connections so I'm going to select this one the default one and I'm going to change its value here to closed next I'm going to select this variant and change its value to opened you can go ahead and modify this property name here for this component set to State just like this and now I'm going to select this closed one head over to the Prototype Tab and just connect it to this open variant okay here the three years should be on click the animation type should be smart animate and I'm going to change the velocity to quick because I'm going to have that bounce effect alright and I'm going to do the same thing for this dismiss icon I'm going to connect it back to this close variant and the preference says look good to me so we don't need to change anything here all right our icon is ready and now it's time to use an instance of this component so here I'm going to go to the assets Tab and let me drag and drop an instance of this icon right here and since I made this menu this slide menu responsive using other layouts and constraints as you can see this icon is taking up space and everything is disorganized so let's fix that quickly we just need to select this icon head over to the design inspector and click on this little icon absolute position and I'm going to move it right here it's so tiny for this button so I'm gonna scale it up I'm gonna hit K on my keyboard and I'm going to set it to width and height to 40. all right just like this let me set the top and right padding to 32. there we go okay but here we shouldn't be able to see this hamburger menu icon right instead we need to see this dismiss icon so I'm gonna change its state from close to opened just like that and also since we want to keep this dismiss icon to the top right corner we can adjust the constraints to top and right so if I select this menu now as you can see it stays right here on the top right corner alright so far so good now it's time to animate our slide menu for that we also need to create a component set so I'm going to select this menu frame here I'm going to turn it into a component and then I'm going to add a variant to it just like this so here we have a component set let me just expand it and I'm going to bring this second variant right here I'm going to put it right next to this one Perfect all right so what do we need to do now first I'm gonna select this components that this menu component set head over to the properties section and I am going to change this property name to state I'm going to select this first variant as you can see the value is set to open that's fine I'm going to select this one and I'm going to set it to closed all right now we need to make some adjustments to this closed variant okay first we need to get rid of these texts because we don't need them so I'm going to double click on this menu right here I'm going to hold down the shift and Ctrl key on my keyboard and select all these text layers just like this and I'm gonna remove them next I'm going to select this closed variant and I'm going to try to modify its width and as you can see since I used other layouts and constraints already for this slide menu it's so easy to adjust the width of this slide menu because all my elements are responsive alright for this variant I don't need this circle text here I just want to have this logo all right I'm going to select it once again and make it smaller I'm going to set the width to 120 just like that and then I'm going to select this dismiss icon and make sure that it's aligned to the center the same thing applies to this logo it should be aligned to the center alright so now I'm going to select this dismiss icon and I'm going to change it to closed all right now it's time to create our connections to create our interactions basically to do that I'm gonna select this dismiss icon here I'm going to head over to the Prototype Tab and I'm going to create a connection just like this here the trigger should be on click smart animate quick that's fine now I'm gonna select this hamburger menu icon on the other variant and I'm gonna connect it back to our open variant just like this the preferences look good all right now it's time to give it a try let's see if it works properly I'm going to create a frame here and I'm going to go to assets and from here let's get an instance of this menu just like this maybe I can change the background's color to Black just like that select this Frame hit play and let's see how it works alright I'm going to click on this dismiss icon there we go it works just fine how cool is that thank you so much for watching this video and don't forget to hit the like And subscribe buttons If you want to learn how to create smooth animations in figma like what you see on Apple's website make sure to check out this video on the screen have a lovely day and see you soon

Channel: DesignWithArash

Views: 33,046

Keywords: ui/ux design, ux design, user experience design, ui/ux design india, how to become a ui/ux designer, become a ui/ux designer, web design, figma, figma tutorial, figma design, figma tutorial for beginners, ux, ui, design, ui design, uxui design, uxui, learn ux, ux course, design course, designcourse, beginner ux, junior ux, junior designer, junior ux designer, entry level ux, how to learn ux, learning ux, user experience, user interface, animated sliding menu

Id: hYBd0tTs70Q

Length: 7min 42sec (462 seconds)

Published: Tue Jan 10 2023