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

In this video, I demonstrate how to set up your design file when working with an interface with a vertical, left navigation bar.

[karissaseiersen]

You actually just saved my life. Working on a new project and kept having to readjust every page cause stuff just wasn't aligning or fitting right. Super frustrating. I never use the grid...that just changed everything. Thank you!!!

[mateusztobola]

At 1440, if you make the navigation a bit wider, 104, you can then set the 12 columns to 80, with 24 gutter, and this will round up perfectly for 56 margins. Nice vid.

[highlymotivated]

This was an excellent rundown on the left-nav layout! Loved the tips that you shared for things like nudge and grids which are relevant for any design work.

[erichepperledesigns]

Thanks JP! The offset columns is a good tip for left sidebar designs.

[asmahamad]

WOW this what I was searching for in hours. Don't stop please. So useful.

[jordangauger]

Thank you! I was really struggling this AM with my Side Nav grid.

[aerozg]

64px margin on the right, 56px margin on the left. 56+64=120/2=60px, so you could have gotten a nice rounded 60px of margin on both sides, or as someone else suggested, play with your sidebar width to achieve a similar result. Designers are sometimes confused with these grids, the best way to have a complete grasp of it is to actually implement it a couple times using a framework like Bootstrap. Because, as a designer, you are preparing the work for the front-end engineer who is tasked with implementing your design correctly. It you're a beginner, or confused with grids, i suggest to find a good front end engineer as a mentor and do a couple of good exercises on grid design implementation and best practices using a popular front-end framework. Good luck!

[yogesharc]

please make a video on the design system

[treyburghardt]

Yahoooo! Brilliant. Jump started my dashboard client work. thank you 🙌

[juditheke-efeme]

Thank you JP this video is amazing, I have a better understanding of grids. Could you actually make a video where we create a dashboard project to see the use of grids? It would be super helpful!

[elonskira]

To achieve the best 8 grid point system grid layout, the closest solution would be:

Columns: 12 * 80px = 960px
Gutters: 11 * 32px = 352px
Subtotal: 960px + 352px = 1312px
Remaining for margins: 1440px - 1312px = 128px

The remaining 128px can be evenly split into two 64px margins (left and right).
Final pixel-perfect layout:

Screen width: 1440px
Columns: 12 columns of 80px each (960px total)
Gutters: 11 gutters of 32px each (352px total)
Margins: 2 margins of 64px each (128px total)

[eduardafleckcurcio]

Thank you!! This video really helped me out :)

[maryrose]

It is a really useful video! Do you have any plans to upload a video of your working on the design with this grid?

[Alstrice]

Thank you!
Is there a part 2 for this?

[beaukrasimirova]

Thank you so so so so so much! This was really helpful!

[shreeify]

@JP Design Academy..can this method be applied to a collapsible nav bar?

[Vipin]

Thank you so much! This is very helpful :)

[ChandniVora-wwtl]

Is it essential for your columns structure and grid to line up? Should you tweak the the gutter and margin of your column strucuture

[stusmith]

In material design is it best to make base breakpoint for desktop 1440 or 1280?

[koidrago]

Hi Jake! thanks for the video. I have a doubt. Do I follow the same instructions of grid creation if the Left nav is always open in my design? for ex. in your example it was collapsed, and in mine if its open like the one on youtube would the grid creation be the same?