Left Nav Bar UI Design: Setting Up Your Grid Layout in Figma

hey guys welcome back to the channel today we're going to be exploring the left navbar construct and kind of how to set it up inside of your figma file so i just did a quick search here for dashboard because this is typically where we see these left nav uis any sort of like enterprise application or portal um they're not typically used on like marketing websites although there are some elegant ways to sort of introduce a left navigation construct into a marketing website but typically we see them on these sort of dashboard designs where we're like analyzing data right where we have this fixed left nav bar and then your main content area in the center which sort of allows for a little more vertical space because we don't have a top navigation here let's find another example here's another example with like these really nice icons on the side right where we're kind of reading left to right here where we're selecting something and then we're analyzing data or we're looking at some insights i've designed a few of these for a few different clients like internal sales tools types of things where they leverage like a left nav some have labels some don't but basically i'm just going to be showing you guys how to set up this grid basically inside of figma which will set you up for success when designing these uis with left navigation all right so we're back in figma and let's just draw a frame so i'm going to hit f on my keyboard and let's add a desktop size artboard and i like to go with let's do 1440 by let's do a macbook pro 1440x900 so we get that nice kind of rectangular ratio and notice this is 1440 pixels wide and that number is going to be divisible by four or eight and that's great because i like to use an eight point baseline grid i started doing this about a year ago and it just really helped with my vertical and horizontal rhythm and spacing of elements it just makes it a lot easier to build scalable design systems that allow everyone on your team to kind of be on the same page it really helps developers with spacing and aligning things i really started doing this mainly because i heard like google was doing it and the big players like microsoft and some of these other big companies were using an eight point baseline grid um rather than explaining exactly all the benefits of an eight point grid i'm gonna just link you a really great resource on the matter but basically what an eight point grid means or how to set it up anyway is to click your frame and come over here to layout grid hit the plus icon and by default mine's already at eight point or eight pixels so that means each of these little squares here um that is made from these intersecting grid lines is eight pixels by eight pixels so by default if you haven't done this already i think yours will probably be at 10 but to fix that you just click this and you change the size from 10 to 8 which i've already done and of course you can mess with the visibility of your gridline i i don't mind their default at 10 pixels or 10 so that's how you would set it up and one other thing if you do set up an eight point grid i would really recommend changing your nudge value so sort of what that means is say i draw out a square here right and it's you know snapping to these grid lines very nicely it's 40 by 40 which is divisible by 8. when i nudge to the left and right and up and down notice how this square is staying on grid it's snapping to those grid lines because it's moving in increments of 8 because i've set my nudge value to 8 instead of 10. so to do that just come over here to the menu and i would just search for a nudge it should pop up and just change your big nudge to 8. so by default yours will be 10. change it to 8 to allow you to nudge in increments of 8. cool so that's how you set up your 8-point grid now let's actually add the left nav construct here so all i'm going to do is draw out a rectangle and it's going to be flush with the left side of our screen right it's going to be fixed to the left side of the viewport that's how we typically see these left nav constructs even figma right like this whole left panel right it's fixed to the left side of the of the viewport so you can think of this in a similar fashion now in terms of the actual size of this left nav we want to obviously snap to our eight point grid but how wide do we want it well i typically like mine a little bit wider just to allow for a little more padding and breathing room for like any icons that would go on your left nav so if you look at an example um here's youtube right they leveraged this left nav construct and youtube is obviously part of the material design system so we know they're on an eight point grid system if we inspect this left nav by right clicking and hitting inspect we can actually see how how wide it is so theirs is actually 72 pixels wide but as you see like youtube also has text strings for labels and it gets a little bit tight in here right when you have these longer text strings and they probably do this for accessibility purposes but when you get into things like translations for different languages the 72 pixels might not be ample space or ample width for these longer text strings and for the left nav i'm going to be building i'm not even going to include the labels um it's going to be sort of a learn behavior right you're going to click on the icon and then you're going to quickly figure out what each of these icons mean i think it's just going to look a little cleaner yes for accessibility it's probably not as great but for tutorials sake we're not going to have the labels but anyway there's a 72 pixels wide i'm going to add a little more width so let's make ours like 96 for the sake of this tutorial and one cool thing about using this eight point grid system especially when you're not designing all custom icons yourself which i rarely ever do usually if i'm designing for a client they already either have an icon set or we're kind of just using material icons or we're using maybe like feather icons so let's use feather icons for this so i actually have this feather icon plugin they're really kind of modern looking icons i really like the look of them they have this great plugin that allows you to you know search for whatever you need and quickly insert them into your project so let's just insert an icon here and notice by default these icons all sit on a 24 by 24 pixel canvas which you know is pretty much designed for an eight-point grid everything's gonna align directly on that grid setup so if i were to come over here and paste this onto my left nav and kind of center align it as an icon would when i zoom in here one thing to notice we're actually not directly on our eight point grid if this is center aligned so notice there's 36 pixels of left and right padding here but one thing about using an eight point grid it sort of implied that anything that aligns to an eight point grid will also sort of align to a four point baseline grid so when you need a little bit of extra detail you can check to make sure you're on grid by um just changing your grid really quickly to four instead of eight so now when i zoom in notice we are snapping to these grid lines so if you ever need like a little more detail and you just want to make sure everything's sort of perfectly on grid you know you can toggle back and forth between a four and an eight point grid so i'm just gonna change this back to eight for now cool so now let's actually set up our grid or our columns rather for the actual content of this application that we're building here so to do that i'm also going to add another layout grid but instead of grids this time we're going to change this to columns and by default uh figma puts down five columns i'm gonna change this to 12 for desktop it's usually what i use for desktop it's pretty standard now instead of stretch instead of having this grid stretch from left to right so from one side of the artboard to the other side of the artboard we're actually gonna offset this grid a little bit because we have this fixed left nav bar so our content really can't be on top of this left nav area it has to start you know inward a bit so somewhere around here so we actually want to change this from stretch to left because when we do that we get this offset option so i'm just going to nudge this offset over a bit so basically our offset is going to be the width of this left nav plus whatever margin we want between the left nav and the first column so for this i'm going to kind of just draw out a spacer and check so maybe we want a little more maybe like 56 pixels of left and right margin for our grid so i'm actually just going to bump this offset up a little bit more until our first column sits right here so we have 56 pixels of left and we're gonna have ideally 56 pixels of right i don't know if it's going to align perfectly but we'll see so now we want to for 12 column desktop grids i usually like 24 pixels of gutter that's sort of what material design recommends and that's usually what i do and now i'm just going to kind of bump up the width until we have about equal left and right margin so i'm just going to duplicate the spacer and see if we could get perfect left and right margin which i don't think we're going to be able to do but let me just show you if i just bump the width up a little you see how when i do this though we're no longer on grid like these columns aren't sitting on our grid lines anymore so i'm just going to actually move this down to 80. so 80 pixel wide columns we have 24 pixel gutters and an offset of 152 and all these numbers are divisible by 4 or 8. the only thing is we're going to have a little more margin on the right side so instead of instead of 56 pixels of margin we're going to have 64 which is totally fine you know your users aren't really going to notice that we could probably get these exact if we maybe mess with the width of our left nav but we're going to keep it at 96. so now we have a perfect almost perfect grid to work off of so i know it doesn't even look like we did anything we pretty much set up a grid in this video i just wanted to show you kind of the thought that goes into designing these left nav uis and how you should sort of set everything up in advance it's going to make our life a lot easier when we actually go to start designing and creating components within this grid system we've created so make sure you subscribe for part two where we're actually going to start getting into the design of this ui it's going to be a lot of fun and i hope to see you there

Channel: Jake Pomper Design

Views: 57,970

Keywords:

Id: QofkGoEtgrc

Length: 10min 54sec (654 seconds)

Published: Fri Jun 05 2020