Designing & Prototyping Navigations in Figma (Crash Course)

hey everybody what's up gary simon here of designcourse.com so today because i've been sick now for over a week with kovid i just have not had the energy or the willpower to create a new content so what i'm going to be doing is giving you a module or a video from the upcoming designcourse.com in which we're going to talk about i'm going to show you exactly how to build navigations we're going to talk about navigation basics and make them responsive and also prototype them in figma alright so if you haven't yet make sure to subscribe and let's get started now wait one moment if you're interested in figma you might also be interested in making your designs a reality with front-end development and if that's the case then you could definitely check out the sponsor of this video scrimbot.com they've recently launched their front end development career path which is a collection of courses that cover html css javascript react and much much more as you see it's over 75 hours of awesome content there are hundreds of interactive coding challenges and it's all geared towards helping you go from beginner to someone that's hireable as a front-end developer so click on the very top link here in the description and you'll gain access to the front-end development career path at scrimba.com welcome we are going to talk about navigations here and just one type of navigation and the one that is going to be the most familiar the most common that we see on websites and that is a primary horizontal navigation that sits at the top of a layout now there are a lot of other types of navigations that we're going to cover throughout this entire curriculum but i don't want to bog you down with all of them at once because you probably forget a lot of them so we're going to take things one step at a time alright so let's take a look here at first just of some slides of you know the structure of a navigation because while we're talking about a simple navigation uh there's a lot to think about even in a simple navigation so a navigation first i we can you can define by having an entire background i you don't have to have a background that's a part of your your navbar as it's called or a navigation bar um you could just have it the same exact background color of the website that it's sitting on now traditionally a common pattern that we see is the branding will go on the left side so the brand could be the logo usually an svg format this case it's just a word mark and then we have a navigation itself that is typically right aligned to the side now one thing that's really important is that we establish a solid visual hierarchy between these two type-based elements usually a logo will have text associated with it and if that's the case we don't want to use the same exact text here because then we have an issue of a visual hierarchy we're not sure where we should be looking first so you want to separate these elements visually and of course you can do that in many ways as you already know through font size this is a slightly smaller font size also through font weight and also through color and contrast so these two are separated out quite well next up you should always designate when possible which page a person is currently at and you do that through the font weight you could do it also and or through color you can actually change the background of it you can underline it there's many ways you can go about designating what is the current page that they're out there on now additionally your navigation or your nav bar can have multiple elements for instance here we have three columns we have the branding the navigation itself and then we have a search element so this is all about determining based on the needs of the website or the app itself if it makes sense to put a search bar or anything else like a phone number so these are decisions that you have to make before you get to the actual design process and we'll be getting into that as well later in the curriculum now also drop down menus that's another thing if it makes sense for a given section of a website that may have sub categories giving them quick access to it through a drop down menu which could be accessible when you click on a link i then do so just make sure however that you have good and solid visual hierarchy to differentiate this navigation from the top navigation up above now additionally responsive considerations so your navigation needs to work on all devices i cannot stress this enough and this is something that we'll be talking about a lot because our designs that we create they need to work on every device from the smallest mobile phone from a tablet all the way up to a large desktop in which the browser is maximized so here we could see we've made a decision we don't have enough physical space when we get to a tablet size to include all of these elements they would just become squished and you do not want that so you have to make a determinate determination in terms of priority which of these elements you can leave out so the search bar here is something that we've decided we can leave out here now next up on a cell phone or a smartphone we've decided that we don't have enough space physically for all this information and so this is what's called a hamburger menu and this menu is a it's the most common pattern for establishing a actual navigation on a smartphone now notice we still have quite a bit of space right here we could for instance specify maybe just a one or two of these links because we have the space for it so we could do something like this if our services really made sense i in order to put it there and then finally once a person clicks on it we want to make sure people actually have uh the the links here for the navigation itself and then a clear way for people to get back in out all right so that's a very quick little crash course on on navigations there's a lot of considerations and now what we're going to do is i'm going to create one from scratch within figma and also shares the figma way of doing this sort of thing okay here in this figment document we have three different art boards and we're gonna i'm going to share this by the way and you can follow along because it's important to develop the muscle memory because we're going to be learning about certain figma features in order to make this navigation a reality so here's what we have what's kind of referred to as a skeleton ui the intention is for this not to be a full user interface but just to get us started with something so that we can have some context when we develop or design this navigation so we're going to go with you know a standard pattern for having a navigation bar with a logo on the left and then also the navigation itself on the right so to get started i'm going to take the type tool we're just going to have a type based logo here and i'm going to put in some company and we're going to go to the design tab i'm going to this is the important part up until now we've been just kind of changing the fill from this section maybe making it white here and we want to click this little icon that has the four dots and it's the style section all right so right here we have different styles that are associated with our document now you may not see the same thing as i've already been working within these but essentially what we want to do i is start using this when we start by defining colors using this section because then we're able to change a color in this central location and then across all of our different frames or different layouts and designs any other element that's using that color will be updated automatically alright so for this i want to use white and then we already have white selected here and the way you add it is by clicking this plus sign right here and then when you do that you can then give it a name and it'll add it here to this section so i already have one here called text and we can use that color we can also i'm personally going to choose to i make this into actually two different layers so that we can have more of an interesting logo i the way i'll do this i'm going to zoom up here is we're going to click plus or rather click on this the little icon the styles icon and then i'm going to make this one this primary light all right so if we access this and we click on this little adjustment bar the properties for this is 0 0 c2 ff right so if you want to use the same exact color go ahead and choose it i in the main color area like right here and then click on the styles icon and then click plus and give it a name i gave mine primary light and then hit enter all right then we're going to go ahead and take this and then we're going to change this to some company right there and then we'll go ahead and i'm going to choose this color this primary color now this color code just for your reference happens to be 0075 ff all right great so now what we can do is i'm going to change this from roboto to nunito and we'll make them both bold all right so now at this point we're going to see what size this is so in relation to the rest of the user interface it does look a little small so i'm going to use my keyboard up arrow keys with both selected and i think right around 24 is pretty good so we'll just move these over and that is our logo now i'm going to take both of them and we're going to create a component so you can right click choose create component or just control alt and k which is what i'll do from now on so now when we do that notice in our layers it becomes a component we can rename it by double clicking and we'll just call this logo and now in our other or artboards in the future when we go to replicate this i'll just you don't have to follow along at this point when i put it over here we've created an instance of that component now if i decide to change the color in the future say from primary maybe to this lighter blue right here it will update on all other artboards or layouts or frames whatever whichever you want to call it now if i back up one thing to note when you have an instance of a component and you decide to change something about it like the the font size weight color etc it will not change it in the original so if i change this to let's say white it does not change it in the original component over here so that's just something to be aware of let's go ahead and back up and now it is the original we can get rid of that we will deal with this one in the future so now we want to create the actual navigation the horizontal navigation which means it's going to be put into different columns all on the same row now what's important i for what we're about to do is it's really important to use guides so or our rulers so ctrl r or shift r rather sorry we're going to pull down oh i already have some i'm going to get rid of these just by dragging up here because i want to do this from scratch we're going to drag down and it doesn't have to be right on top of the type but you'll see why we're doing this in a little bit all right so now the type will be pretty much centered right in the middle and these guides are going to essentially allow us to keep everything in perfect alignment and you'll see what i mean here um going forward so let's go ahead and create an actual navigation with the type element so hit t on your keyboard and we're going to put in home for the first link alright so right now the font size of these elements is 24 this one is 24 as well let's go ahead and i choose white right here click on the styles icon and then click on the plus and then change it to text or you can name it light or whatever you want all right so now it's the light color and we do have visual hierarchy separation simply because this is white and also because it's moved over here but typically i would like to scale this down just a little bit so we'll go to around 18 and we're going to make sure that we are indeed in the center here right there you see the guides right through the center that's what you want okay great so at this point instead of just doing this manually and duplicating these and putting one here like products and then duplicating another one there's a better way of doing this so that we create a maintainable uh system for our design when we're just dealing with one little page right here and that's it and we're finished just for an example it's fine to do it like this but most projects are gonna have a lot of different pages that are reusing this navigation and when you want to make a change it's horrible to have to make a change in all these other iterations of these versions that are using your navigation so we want to do things intelligently with components interactive components and something called variants as well so let's go ahead and get started with that so what i want to do is instead of i just creating a component out of this here specifically i want to create a rectangle container out of it and we want it to match up with this guide right there all the way to this bottom now we're going to just push it down beneath the home text so that we can see it and right now i'm going to actually get rid of the fill and we'll just do that by clicking that little minus sign now i'm going to take both of these elements so now both are selected and we're going to right click and we're going to choose add auto layout all right so what that ends up doing is we've created what's called a auto layout and in our our property inspector over here we can see we have constraints and resizing we have auto layout right here at the top and we have a couple different options so if we if we adjust this right here spacing between items this is something that will eventually get to i but it's not relevant for this current example um if we click on here notice it says mixed that's because it's the top right left or sorry the top padding the right padding the bottom padding and the left padding are of different values right now and so if we adjust these or add 9 here we'll see that it affects the actual position of the element inside of it which in this case it happens happens to be text so at this point we're going to create a component so control alt k all right so now when we do that we have this option over here called variance and we're going to click on the variance plus sign now it adds this purple uh stroke around it letting us know that this is a variant now what are the purpose what is the purpose of a variant so essentially this is going to allow us to create different states of our button so when somebody hovers over it with a mouse we can create a difference in the design if somebody clicks on it we can create a press state and so on and so forth so when you create a variant it'll automatically create a a duplicate version of whatever it is that you created the variant from so the bottom one and notice over here when we have under the property inspector under the variant section we have property one its name is default we can just leave that as default for here and notice its variant two let's change this to hover all right so now we can make a something change about this design we could for instance change the background remember we removed the background here so we could give it a fill and then maybe we can change it to a panel dark right here like which is a another color um we'll leave it like that i'm not going to leave it with this design but i'll just show you real quickly and once you have your design changed here then you can come to the prototype tab and notice this little plus icon we're going to drag it over and then over here where it says on click we're going to change to while hovering so because we're creating a hover state notice all these other options that we have for triggering different design changes so we're going to choose while hovering and we're going to change it right here change to property one hover which we already dragged this over here you can have animations like instant dissolve smart animate we'll get into these things in the future but we're going to leave it right there for now now if we want to get this onto our artboard we come to our assets section and we're just going to drag this over and there we go so now if we click on play right up here in the upper right corner up sorry it's not currently designating this as the frame that we want to play let's click play again and we hover over it look at that and it just works so let's continue on for me i don't want to have a background kind of adjust like that i just want to change the type the type color so what we'll do is instead of we're going to come back to our design section and we're going to get rid of panel dark there we're going to double click to select into right there this type and for the text we're going to change this to text hover so just to show you that color code if you're following along that is 9 2 e 5 f f all right so now we can go back and when you leave this tab open all your changes happen automatically so you don't have to refresh it manually now it has the new type here so i tried to scroll up a little bit so you can see that but it's a little bit uh finicky okay great so what's great about this is now we can duplicate this just ctrl d move it over see they're right there at the edge of each other now we can duplicate into this and change this to products and now go back they both work automatically all right so we can duplicate this one more time and then maybe we'll have frequently asked questions and we'll duplicate it one more and we'll change this here to contact oop not that version there we go now we can take all these we can move them over and we also should have remember what i said a designed specifically for the currently active page so how you choose to do that is up to you but what we can do now is we can come over here and we can duplicate this so ctrl d and now what we can do is we can name this to active because this will be our active state button and then we can double click into here and we'll click this section and we'll just use perhaps our primary light color and then we can come over here to home and we'll say that that is the currently active page actually you know what let's make products the currently active page so then what we can do is we can change from text to primary oops sorry wrong area what we want to do is change this from default to active all right so now if we go back there we go so now what we can do is we can take these four elements and we can right click and choose to add or shift a and auto layout and that way we can be able to to create white space extra white space between these elements if we wish so auto layout so then we can come over here and we can choose spacing between elements and we can click this up and that way we can easily adjust the white space just by adjusting this value right here so again to to get into this you can see here it says frame five we can just call this nav right here we can double click into this and then access all these other um elements so just remember double click or to get inside of your nested items you can navigate here through your layers panel over in this section and then finally we can also take these elements right here and we could create a component but there's a problem right now if we did that and i'll show you so ctrl alt k and when i do that if we go back here no longer do the hover actually work the the interaction just doesn't work when you try to create a component i based on uh components that are nested inside of it that have interactions with them now that's an issue that might be fixed in the future but at the time of recording this it's it's not fixed so i'm going to back up just to make sure that we're not dealing with that situation now we could also right click and create a auto layout here as well one more thing before i i forget though with auto layouts we can move things around very easily which is always very fun and you can easily duplicate another item to create you know more nav links if you wish but yes we can take this here and create an auto layout from these two sections and notice how it kind of pushed this up which is something that can happen sometimes when you're dealing with auto layout simply a matter of kind of clicking around inside we're going to push this down and then we're going to i take both of these and make sure we choose to center to a line in the middle so now this is one big auto layout we could actually take this and push it over here that over there although we wouldn't necessarily need to do that and so now if we hit i shift r to get rid of those we can now duplicate this and then place it over here and then make sure we're lined up here there we go and then we can reduce the amount of white space between it automatically and we definitely will have enough room for tablets so we're not going to have to condense anything all right and if you wanted to you could for instance make it so that the right of the t is along this guide right there and of course if you want to be absolutely certain you can place it right there and i was able to get that eyeballed up pretty good all right so that's looking good and of course we can always drag in prototype mode this over here and we can click play just to make sure it's all working there as well and then we can also do the same thing over here however i'm go i'm going to tell you right now i know for certain that we're not going to have enough room so if i duplicate this and we put some company there we're not going to have anywhere near enough room to if i just change this manually to zero just not enough room we may have enough room maybe for one link but really with the current size of the logo i it would be best just to stick with the hamburger menu so we could do we can double click into here and just delete that whole nav all right so now we're going to have a hamburger menu in this section and we'll come out actually we can right click here and just go to plugins and choose iconify and i've already searched for menu just click find icons after entering menu and we'll use let's just use this one right here just drag it on and we want to use our color styles we're going to use text here just for something that's high contrast and that people can easily see and be able to click on all right that looks pretty good right around there you could always come in here and make this wider if you wish i think that's a little bit better all right so now what we want to do is we're going to take this here and we're going to create a component out of it so ctrl alt k and now it's purple outline thus a component and what we want to do now is create an overlay for the actual slide out navigation for the mobile navigation so we're going to take our rectangle and we'll just go about two-thirds you can go all the way out if you wish but just make sure you have enough space and padding and white space on the inside of it so that it doesn't get cluttered you want to have a lot of room for people's fingers to be able to press on a lot of white space the actual links so for the background of this we want to make sure that it's just different enough from the background so that it doesn't get confused or lost within the main interface so for that i'm going to use one called panel dark and we could probably even go a little darker than this it's just slightly darker than the background but that will work and if you want to see what that looks like it is 27282e all right so now we're going to create this uh design specifically for uh our now yeah for our navigation so we could reuse these buttons over here these actual button components but i'm not going to choose to do that we can just create these from scratch just because it is a different navig type of navigation that's going to be i stacked vertically on top of each other so i can just come out here with a type tool we'll choose home and we will also make these white alright so we're using 18 here these are all using 18 as well they don't necessarily have to match up and be the same in fact it would make making a little bit more sense to make these a little bit larger on mobile so people can clearly click on them and you have options in terms of alignment too you can align them to the right you can align them here to the left what i wouldn't do is align everything in the center i because that never really works well especially when you have different characters different number of characters so if i put products here and put it in the middle it just it doesn't flow well because there's no discernible actual eye column on the left or right so instead of doing that let's go ahead and i'm pretty happy with this uh we'll keep this this this example pretty simple we could have like a container around it kind of like we did here and then have i you know a different background color slightly from this one but just to keep this symbol simple we're going to go ahead and create a component out of this so ctrl alt k it is now a component and then we can just duplicate this or if we want to have component states for rinsed inside like a pressed state we can do the variance so we might as well get uh our practice under our belt so we can now click on variance you make sure you double click into that so we get access to the text and let's just make it primary light and we will call this once we click back here to active and then we'll come to prototype drag it while hovering all right and for this right here we want to rename this from home we'll call this to mobile navigation buttons so we come back to our assets and we see mobile navigation buttons we can place this right here and then we can go ahead and duplicate this we'll call this one products all right and then we'll name this one faq and then finally contact now we're going to change this one right here oops let's not do that let's go back to design we're going to change this one here to active just to keep in line with this and then we're going to select all of these four and then we're going to create a auto layout all right so now we can adjust the spacing and notice how it knew based on the alignment of these elements to adjust them vertical now we could also click this button here to change the direction of the layout which is really handy all right so that's looking pretty good right there you want to give users a way to exit out so we can right click go to plugins and iconify we'll type in exit maybe we let's see i'm not sure if i see one that i like very much close there we go so like i will just choose this filled version right here sometimes when you drag them on they're quite large so shift alt and just scale down and we'll use our styles we're going to make this white and if we're going to put this here and i don't really like it over here i kind of like this sticking to the standard conventions of just kind of keeping things over here now when i'm hovering over this it's it's looking like it wants to add in the the menu that's behind here so what i'm going to do is go back to my layers and i want to make sure that if i just move this temporarily that we lock that because i don't want it anything i don't know any interference uh with that that button here so if i select this we'll get this moved over centered up right there and there we go alright so now what we want to do is we're going to take all these elements right here so there's three elements selected and we're going to create a component out of those so ctrl alt k and we're going to move it off the screen and then we're going to switch to prototype we're going to click on our button which is currently locked we'll click on it and we're going to drag it over here to this so on click which is the action that we want we want to open overlay so it's going to open this up now we want to make sure that for the overlay we choose manual placement so what that means we see a duplicate version of it and we can push it over here and get it aligned up with exactly where we had it before and that way when that menu is clicked it will automatically go back so now at this point where it says i where it says move in if we click this it's going to show you what direction the overlay will come from so we want to leave it right here coming from this area over here because it's aligned to the right anyhow and then you could also change the easings and the uh the duration of the animation the easings will affect how the animations occur and that's something that you can play around with yourself so what we can do now is we can switch this little play icon so when we click play it's going to show us that board and we can click on it and there we go now what happens if we try to click this nothing because we haven't tied it to go back or to hide the overlay so what we can do now is when somebody clicks that we can take this go back there to the original and this will be let's see what happens when we simply leave it to i that default option so it kind of just hides what we can do is close overlay and let's try that and there we go it will automatically reverse instead of just hiding it like that now we don't have to worry about hover states for the other buttons simply because on a mobile device you don't have hover now something in the future you we may get involved with is having pressed states but for now this is pretty good and now all of our designs for desktop let's click play oops i have to drag this over here got to remember that we'll click play again so for desktop works right here also for ipad or tablets these work as well and then also you just saw the mobile version all right everybody hopefully you found that interesting i think i'll be creating new videos next week i unless something really takes a downturn um well for sure i'll be creating new videos and definitely go to designcourse.com enter your email to be notified when it launches which is going to be in july or we went down july january 4th of 2022. i'll see you all soon goodbye [Music] you

Channel: DesignCourse

Views: 6,156

Rating: 4.986928 out of 5

Keywords: figma navigations, navigations in figma, figma navs, ui design navigations, navigations ui ux, ui/ux, gary simon, designcourse, prototyping

Id: WBSeGPW1SuY

Length: 37min 15sec (2235 seconds)

Published: Fri Oct 01 2021