Create a Functional HAMBURGER MENU NAVIGATION in Figma (Tutorial)

in this figma prototyping tutorial we're going to create a hamburger menu with a functional navigation in figma so in the final result you'll be able to go through individual pages and you'll also be able to open and close this menu as usual if you're interested in downloading the source file for this project make sure to check the link in the description below now let's get started so let me use the frame tool and create a new screen let's say iPhone 13 Pro over here and I'm going to rename this screen to screen so it's going to be called a screen like this simply and then what I'm going to do is create a new Square by pressing r on my keyboard clicking once and then I'm going to change the size of this rectangle to 64 by 64. what I'm going to do next is actually zoom in on this new rectangle and by the way I've done that by selecting the square and then pressing Command 2 and then I'm going to press p on my keyboard to use the pen tool and create three lines like this first of all I'm going to create just the first one I'm gonna Center it like this so that there is equal distance from all sides or at least from the left and right and then I'm gonna duplicate this twice so that we get this kind of hamburger menu right I will select these three lines and then increase the spacing to about 12 I will then also rename these individual layers so that this one is called top middle and bottom next thing would be actually selecting these three lines and then making sure they equal a distance from all sides so 20 from top and bottom and 15 from the sides right so that we get this icon that we have here then I'm gonna select this and press command option okay to create a component from this and I'm gonna rename this component to be called hamburger menu I will also go over here and click this icon to add a variant and with this variant which is going to be called open by the way while this run is going to be called closed I will press command and select the middle line and move that over to the side also I will set its opacity to zero so that it disappears and then with these two remaining lines I'm going to rotate them by 45 degrees each one in a opposite direction then I will select these two press option fee to make sure that they are equally distant from all sides right so we have our hamburger menu over here now what I'm going to do is use my text tool to create a button and this is going to be called menu button so I'm going to type in menu button you can use any font you'd like I'm going for a battle mono and I will set the font size to 18 and I think I'm going to keep it at bold next I am going to select this text object make sure it's centered and press shift a to add an order layout around this and then I will add some padding vertically and rename this old layout to button or menu button and increased width and also select overall Auto layout and then make sure it's being centered by setting this icon over here right setting this uh position of Inner Elements over here I think I'm going to go for some more in terms of vertical padding and horizontal padding as well so 16 and 16. then again we're going to create a component from this so command option K we're going to add a variant and this variant is going to be called pressed and under fill I'm going to add a black fill with opacity of around 10. right so we get this darkening in the pressed down state also I'm going to select both of these states and then go to Corner rounding over here and set the code the rounded Corners to about eight then I will select the first variant go to prototype and connect the first variant to the second variant like this and I'm going to set interaction to be while pressing change to property one pressed and it's going to be instant so we had the hamburger menu component and we have the menu button component next thing would be actually creating multiple screens so here we have one single screen that's going to be our home page so let me position the text over here and type in home page I am going to make this slightly bigger and I'm gonna make it more transparent and then I will again select frame and type in page one on the screen name and then I'm just gonna duplicate this four times so that we get five individual pages and a home page this home page I will rename that to home page so that we know what's up and with these Pages I'm also going to change the text to reflect their name so page one and here page two here we will do page three page four and then finally page 5. awesome so now that we have the pages the home page the menu button the button uh the hamburger icon I'm gonna use one of these buttons over here and also I'm gonna select both these texts and go to content and I'm going to create a new component property and that's going to be called menu button text menu button text enter and then you can see what this creates is an option in the instances that I can easily change well the text of the button right so page one I will duplicate this four times and then also create one additional button for the home page I will change the text to reflect that fact so home page and then page one page two and so on right three for four and five now I'm going to select all of these press shift a to add an auto layout this Auto layout is going to be called menu when I select the menu and press enter I need to go to Vertical sorry horizontal resizing and set resizing to fill container that way when we select the menu and we change the width buttons within that menu are gonna reflect this change then I will also add a fill it's going to be white and I'm going to add some padding from the left from the horizontal and vertical sides and then also a bit of spacing between individual items let's say eight right this menu is going to be 390 pixels wide awesome so we have all the pages we have the menu button component hamburger menu icon component then we get this menu that we have right here prepared what's the next step the next step is actually linking individual buttons to their respective pages so let me go to prototype and then connect the first button to home page on Tab navigate to home page transition is going to be instant and then we're going to do the same with all these remaining pages so button called page one is going to lead to page one makes sense right same with page two and then page three page four and page five so we have linked all these buttons to their respective Pages then the next thing we're going to do actually is select this hamburger menu icon and duplicate it so alt and then click and drag option click and drag to create an instance of this hamburger menu I'm gonna press command x with this selected select menu and then command V that way we're gonna paste this menu inside this menu all the way out I will also set position of this hamburger menu icon instance to Absolute position and then I'm going to make sure it's right over here so it's outside the frame and the constraints are set to right and top so this is our goal this is what we're going to get with the menu and with the icon right this right here we need to make the icon a part of this menu all the way out next thing I'm going to do is Select some kind of text object and create a logo placeholder from this text object um I'm gonna break all these variants all these component properties and I'm going to change the size of this logo to 24 right then I'm going to again use an instance of this icon a close one select both of these and press shift a to create a all layout I will rename this all the way out by pressing command R to header right and then also adjust alignment so that it behaves like this I will remove all the spacing from here and then go to Advanced layout settings and under spacing mode I will set this to be space between that way when we do this this is the behavior that we're getting right that's our goal I will also go under independent paddings and I'm going to set the padding from the left side to be I think about 16 something like that and also at add a fill so that the header has a background I think we could do a bit more when it comes to the left side spacing so 20 about 20 yep makes sense and this whole header or layout is going to be 390 pixels wide now let me select this header Auto layout and again create a component from this so I selected this header and press command option K and then I will select this icon within this header component and then go to prototype click on plus next to interactions and I'm going to say on Tab open overlay and this overlay is going to be menu right the position is going to be not centered but that's going to be the manual and you can see that we get this overlay preview right here and I'm gonna just use my mouse position this overlay so that these two icons these two icons overlap precisely so like this right that is our new overlay when we click this icon and overlay opens which is going to be this one and then also we need to set that when you click this icon over here in the overlay I'm again gonna go do interactions over here and then click the plus and this is going to be on tap close overlay which should close our overlay whenever it's open right then let me also go to prototype and then click this menu and remove the starting point the flow starting point from here and add the flow starting point to the home page which will make sure that when we launch the Prototype it's going to open on this homepage right now let me go back to this header component and under this interaction that opens our overlay we're gonna go in here and set add background behind overlay and I think we could go for like 40 this will make sure that it's gonna darken the remainder of the screen except for the overlay and then also let me go to this hamburger menu icon and I think I'm gonna change this gray color to white I don't like how it looks and then I also I will press enter and with the stroke I think I'm gonna set the stroke to two pixels right I think this looks way better all of this is done the menu button component is done the hamburger icon is done we have this overlay over here and we set up that when you click actually this icon over here this overlay pops up when you click days the overlay closes so now All That Remains is actually place our header component onto our screens so let me go to assets and then search for header right here and then click and drag to place that over here we want to make sure it's placed within these frames somewhere around here right so let's go for like 60 pixels from Top maybe 30 from the top is going to look better actually and then I'm gonna select this instance press copy and then select all of these remaining pages and press command V to paste this component and on a second thought I think we could actually disable the background behind overlay so let me uncheck this and let's just add a nice shadow so let me select the menu go to effects and then on the drop shadow over here I'm gonna just do a slightly different setting so let's do a lot on the Y coordinates set up then make it really blurry even 100 I think then the opacity let's set that to around 14. now the moment of truth I'm gonna go over here to launch the Prototype and we're gonna test our result so I get this screen I'm on the home page I have the logo placeholder and then I can click this hamburger icon and we get this menu where I can go to page one which takes me to page one and also notice that when I hold the button pressed down it's gonna darken a little bit which is exactly why we defined this interaction right here right so this interaction while pressing is responsible for advanced Behavior so again menu which I can open and close by clicking this icon as the usual real life menu you get on your phones on your websites and apps and then I can just go through individual Pages page one through five I can open and close this menu on any page and I can also return back to the home page and that's it that's how you set up a functional mobile app menu navigation using the hamburger icon if this video helped you please leave a like and also if you'd like to download the source file and support the channel make sure to check the link in the description thanks for tuning in and I will see you in the next one

Channel: Mavi Design

Views: 22,032

Keywords:

Id: dr6C_LK1U_Y

Length: 15min 27sec (927 seconds)

Published: Mon Dec 05 2022