Left Nav Bar UI Design: Setting Up Your Grid Layout in Figma
HTML-код
- Опубликовано: 20 май 2024
- In this video, I demonstrate how to set up your design file when working with an interface with a vertical, left navigation bar.
More on the 8pt. grid: / the-comprehensive-8pt-...
Email: jpdesignacademy@gmail.com 
Кино
Book a 1-on-1 session with me: tidycal.com/jakepomper
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.
This is actually off by one pixel :/
@@joespanti Hi Joseph, how is this off by one pixel?
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.
Thanks JP! The offset columns is a good tip for left sidebar designs.
Yahoooo! Brilliant. Jump started my dashboard client work. thank you 🙌
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!!!
Yay! Glad it was helpful
WOW this what I was searching for in hours. Don't stop please. So useful.
I'm glad you found it helpful!
Thank you! I was really struggling this AM with my Side Nav grid.
Awesome! Glad you found it helpful 🤙
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!
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!
Keep doing your great work man!
Thank you! I will try!
Thank you so so so so so much! This was really helpful!
Boryana Krasimirova you’re so so so so welcome! Happy to help
This was super helpful. Thank You!
Thanks for watching!
This was a great help. Thanks!
Happy to hear it was helpful! You’re very welcome, thanks for watching ✌️
Thank you!! This video really helped me out :)
Glad to hear it! Thanks for watching
Thank you so much! This is very helpful :)
You’re welcome, glad you find it helpful!
Very helpful, thank you!
Thanks for watching, glad it was helpful 👍
It is a really useful video! Do you have any plans to upload a video of your working on the design with this grid?
please make a video on the design system
Please🙏🏾🙏🏾🙏🏾
Helpful!
Good!!! Thank you
@JP Design Academy..can this method be applied to a collapsible nav bar?
Thank you dude!
You’re welcome!
Thank you!
Is there a part 2 for this?
Is it essential for your columns structure and grid to line up? Should you tweak the the gutter and margin of your column strucuture
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?
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?
I appreciate the helpful video. I have a few questions.
1. Are these columns different from bootstrap? I'm trying to grasp when/where bootstrap columns are used.
2. Do you base your widths on the columns or the 8pt grid?
3. Do you have any other resources, or resources you recommend, to better understand grids?
Thank you!
Following
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?
Yes typically I’ll use figma for UI design
Thank you!
You’re welcome!
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?
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!
Great video! I am wondering how would you set up 1920 layout grid for the left nav bar UI design?
Add a frame next to the left nav with a stretch grid applied
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?
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!
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?
Hi there! That’s specific one I believe is called “activity” from the feather icon set. Hope that helps!
@@JakePomperDesign Thanks but i was asking about the icon shown at 1:17 .Those four dots just above the Dashboard label.
There’s so many math people here 😂 I’m just amazed
Can Figma create a stretch grid with a fixed left sidebar? like an offset stretch grid?
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
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
bro please share your first view web site link
Where's part 2 please?
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.
You could definitely do that too! It’s a personal preference thing...I don’t always like working with “frames within frames”
If only center alignment allowed us to set up offset...
You can just nest a frame with a stretch grid and offset the frame itself
Good video and content, horrible audio....
Henrique Portela hmm sorry about that. Would be helpful if you were more specific so I can correct things in the future
@@JakePomperDesign sorry, my bad, it was my own audio (airpods problem); nevertheless, the lack of white noise is, imho, annoying...