How to Design Responsive Header Navigation in Figma - Autolayout #figma #config2023

hi today we'll create responsive header navigation in figma I'll show you how to create responsive headers for a desktop tablet and mobile devices let's get started first what we need we have to create a frame right and ideally we want our our height to be somewhere around 78 to 80 pixels okay first what we need our logo so for the logo I will use a placeholder text just that indicates this is logo then later on we can replace it with um with a real logo then this is gonna be our monogram placeholder as well it's gonna be logo right then let's delete this Frame we don't need it then we're gonna create the menu items all right their projects all right that will be ideally it should be 16 to 24. 24 right medium that's fine then let's duplicate it but ideally let's let's create it then all the items then we'll add the copy click Auto layout I'm gonna put it on on the left let's put it on the center because we're gonna Center realign them let's have 16 and have seen on the on the top right okay that's cool it's good manual then let's do it duplicate it will be services all right it's gonna be about us all right and then it's gonna be contact us contact us let's skip five for now then we're gonna have two buttons right gonna be signing sign up button so let's create the button first it's gonna be 24 16. it's at white colored seed for now pretty black that's fine at the round is two eight let's duplicate it and create sign up button which will have different color let's add this nice blue color this would be white [Music] here we go now let's group them it's gonna be buttons here is going to be menu items menu items and here we're gonna have our logo select everything and create an auto layout now what we want to do is so ideally ideal ideal um a left and right side would be if you have for the desktop it's usually 120. this is how I'm usually doing it then I'll put this on a on um fix with at 440. this is what we want it to be and then we will align the the entire components is going to be aligned centrally right what we're going to do next is ADD padding it's gonna be 16 top and 16 bottom right we got 88. let's put it to 14. 88 is acceptable as well but let's use it 14. yeah I think this is good now what we want to do is have this monogram in balloon another solid color to white right then let's put all the items to be in yes it's gonna be three he's gonna add the colors here navigation that's cool okay now it's a medium it's all sent a little line so we don't need the additional you see we have additional padding here inside which we don't need so I'm gonna delete that content here we go so now I'm gonna add this 120. now exactly what we need so what we're gonna do next is go right here and click X and what's gonna happen it's gonna create it in Auto right then now all we can do is we can increase to 114 40 and then all the elements will be split between each other okay because we wanna buzzing between them so the concept is responsive no this is gonna be our desktop had enough let's move to mobile um the tablet sorry so now let's delete those let's decrease the padding usually for the monk for the tablet it should be 768. the padding left and right should be 32. and the buttons and the logo remain like that what I wanted to do right here I think ideally you can leave it like that because we we want to add the accent always this is this is I think it's more important to sign up users because we always um interested on having new users to sign up so that's why let's add the accent but if you feel like you need to add more accent to the sign in just feel free to add the accent color to it I usually they cannot be the same color so the good approach would be to add them sign up sign in button is going to be outlined that would be the best the best approach for for this instance it's up there here as well hi that's cool we've done that it's gonna be our tablet right tablet I've had that enough okay so we got 84. 84 usually it's I think it's going to be too much so let's reduce it to 12 here it's gonna be 80 and I think even 10 that would be that would be good as well so let's keep it to 76 I think this would be if it'd be good for mobile for a tablet now let's create the mobile one with that mobile hit the Nerf five all right so then right here what we'll have to do is for this for this is this if you see right now the overlap right so then what we need is a new create that ideally what you're gonna have to do is use large buttons for um for the desktop device and you can use medium buttons for uh for a tablet and you can use small buttons for um for a mobile devices this is how it usually should be done okay so now let's go ahead and do that oh yep so now let's remove so if it's gonna be 24 and 16 so then the medium button usually the way I'm doing it is going to be 18. and 10. here we go that's fine and then the padding between them should be 12. or yeah well this should be good now let's delete this mobile one and duplicate tablet mobile and then for the mobile one what we want to do is have 16 which is going to be small buttons and eight yeah I'm padding between them should be 14. logo logo as well for the logo you can make it smaller if you need to but if you can't if you can't make it smaller then you have to try to adjust the the the components and leaves was padding okay so let's create mobile 375. frame right padding should be 16. then all right twenty that's gonna be eight it's gonna be two 12. usually it's gonna be it should be 18 but I will keep it to out okay for now here we go so as I suggested ideally I should we should have the logo in 3 um three sizes as well large medium and small but if you can't have that at least you should have for a desktop and tablet you should have a desktop logo size and then for a mobile it should make it smaller okay skip it oh it's that right now 29 let's hit it to 28. that's cool okay something broke 28. let's go so let's decrease this 20. and let's send a little line let's go okay now let's see if it works here it works fine now what we have to do select all the all the variations we have we're gonna create multiple components and combine them as variants right we're gonna have here header navigation all right then we're gonna have this one as desktop this is tablet and this is mobile we're gonna select all of them we're gonna have command r or Ctrl R we're gonna say size equals L right then we will change it stayed default here we go that's fine now I'm gonna add this is m and this is gonna be add news now let's check if we don't have any invalid versions so now all I have to do is when we just add our real logo here and then when you have your frame so you say you create the frame right now right which is gonna be desktop 1440. byte 1024 right all we have to do is just get our instances and add it here right this is 10 24. let's see what is inside okay let's see he got something now it's bigger now you see that if you notice the instance has been updated automatically what I want to also do is have um create a divider okay because ideally I really want to see the difference but if you don't want it you can start the background which is a fave PFC now you can see a little bit of difference right here so let's create this other stroke a border to it this is gonna be just 10 percent I'm gonna add the alignment to the bottom right because you want it we want you want it to be noticeable but not to stand out too much okay okay so now this is done what you're gonna do for the next frame it's gonna be the same go to tablet you pick your tablet device which is gonna be 768 right to get this instance the header now you add medium and you just add it in here perfect same applies for um for a smaller devices which are iPhones we're gonna add is 375 by 820 a12 sorry now let's switch it to us and yeah so now it's done this is how you create responsive header navigation in figma thank you for watching the tutorial have a great day

Channel: Design League

Views: 1,457

Keywords: figma, figma tutorial, ui design, learn ui/ux, user experience design, user interface design, ux basics, nav bar designs, navbar in figma, design navbar in figma, responsive navbar, responsive navbar figma, responsive menu figma, menu in figma, navigation menu in figma, #config2023

Id: TSs1Bx4go90

Length: 15min 44sec (944 seconds)

Published: Fri Mar 10 2023