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

[@JakePomperDesign]

Book a 1-on-1 session with me: tidycal.com/jakepomper

[@mateusztobola1929]

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.

[@joespanti]

This is actually off by one pixel :/

[@TumiEdun]

@@joespanti Hi Joseph, how is this off by one pixel?

[@karissaseiersen261]

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!!!

[@JakePomperDesign]

Yay! Glad it was helpful

[@highlymotivated555]

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.

[@jordangauger3515]

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

[@JakePomperDesign]

Awesome! Glad you found it helpful 🤙

[@erichepperledesigns]

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

[@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!

[@asmahamad7255]

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

[@JakePomperDesign]

I'm glad you found it helpful!

[@elonskira2652]

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)

[@juditheke-efeme777]

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!

[@treyburghardt]

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

[@yogesharc]

please make a video on the design system

[@anth0ni33]

Please🙏🏾🙏🏾🙏🏾

[@beaukrasimirova]

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

[@JakePomperDesign]

Boryana Krasimirova you’re so so so so welcome! Happy to help

[@eduardafleckcurcio1288]

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

[@JakePomperDesign]

Glad to hear it! Thanks for watching

[@hhh-yu1xb]

Keep doing your great work man!

[@JakePomperDesign]

Thank you! I will try!

[@raininggumdrops25]

This was super helpful. Thank You!

[@JakePomperDesign]

Thanks for watching!

[@Vipin27]

Thank you so much! This is very helpful :)

[@JakePomperDesign]

You’re welcome, glad you find it helpful!

[@maryrose7127]

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

[@Blackcat5595]

Very helpful, thank you!

[@JakePomperDesign]

Thanks for watching, glad it was helpful 👍

[@shree21ify]

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

[@thisismargo]

There’s so many math people here 😂 I’m just amazed

[@Alstrice]

Thank you! Is there a part 2 for this?

[@soonkpaik2037]

This isn’t really robust. The grid system works only your screen size is full screen. Once your screen size shrinks, every grid is broken as you can’t ‘stretch’ the grid with fixed left margin for nav

[@filipdjokic6495]

Thank you dude!

[@JakePomperDesign]

You’re welcome!

[@_hvsn]

Good!!! Thank you

[@lexib9516]

Helpful!

[@stusmith1201]

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

[@zummotv1013]

Thank you!

[@JakePomperDesign]

You’re welcome!

[@ChandniVora-ww7tl]

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

[@GaryDid]

Thanks for showing the way you set up grids! I typically set up my grids in 10px increments for desktop and 8px increment for mobile. Is Figma your favorite product design tool over Sketch, Studio, and Adobe XD?

[@JakePomperDesign]

Yes typically I’ll use figma for UI design

[@sunandakulkarni2690]

Thanks for the tutorial. Quick question - this works great. Can we do a similar grid with left nav but a responsive great. This grid is not responsive, is there a way to do that?

[@JakePomperDesign]

Yes if you want the grid to be responsive, you can apply a stretch grid to a frame, and then nest that frame within another frame. This is actually a better practice, I just personally don't always like working with nested frames. Hope this helps!

[@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?

[@honeylavender1122]

If we had selected 'Stretch' for column option, our layout would be responsive. But to optimize for left nav l see the usefulness of Left type- is there anyway to make it responsive with this selected?

[@JakePomperDesign]

You can just nest a stretch grid frame within the main frame and resize it to fit. This is actually the better practice, I just don’t always like working with nested frames. Hope this helps!

[@Pancake-dj4vp]

Great video! I am wondering how would you set up 1920 layout grid for the left nav bar UI design?

[@JakePomperDesign]

Add a frame next to the left nav with a stretch grid applied

[@raerlymade]

Can you break the baseline grid in a contenting element like a nav bar? Like if I have links for ex: Home - Shop - Explore inside of a containing nav bar, does the text have to sit on the baseline?

[@jason_liam]

Amazing ! What is the name of the Dashboard icon at the top left?Is there a name for it so that i can get it from somewhere or should i create myself?

[@JakePomperDesign]

Hi there! That’s specific one I believe is called “activity” from the feather icon set. Hope that helps!

[@jason_liam]

@@JakePomperDesign Thanks but i was asking about the icon shown at 1:17 .Those four dots just above the Dashboard label.

[@danielemilazzo432]

Where's part 2 please?

[@ListenOliver]

Can Figma create a stretch grid with a fixed left sidebar? like an offset stretch grid?

[@JakePomperDesign]

Yep, you can add a stretch grid to another frame and place it inside your frame with the sidebar. That’s another popular way of doing this, I just don’t always like working with frames within frames. Thanks for your question! Jake

[@gpyk306]

why wont you just insert new frame starting from the place where the sidebar ends ? then you can just apply layout to this frame. i think its better this way, because if u decided to change the size of the sidebar u don't have to change the layout settings.

[@JakePomperDesign]

You could definitely do that too! It’s a personal preference thing...I don’t always like working with “frames within frames”

[@paulosince]

If only center alignment allowed us to set up offset...

[@JakePomperDesign]

You can just nest a frame with a stretch grid and offset the frame itself

[@HelalUddin-ot5uy]

bro please share your first view web site link

[@heportela]

Good video and content, horrible audio....

[@JakePomperDesign]

Henrique Portela hmm sorry about that. Would be helpful if you were more specific so I can correct things in the future

[@heportela]

@@JakePomperDesign sorry, my bad, it was my own audio (airpods problem); nevertheless, the lack of white noise is, imho, annoying...

[@manishray6103]

This was a great help. Thanks!

[@JakePomperDesign]

Happy to hear it was helpful! You’re very welcome, thanks for watching ✌️