How to use 8pt grid system to design app UI

[@bl7937]

I’ve been watching NUMEROUS videos on the explanation on how to use the 8pt grid and this video by far has explained this topic the best. You helped me understand how to use the 8pt grid for typography. Thank you!😊

[@luckyuwaoma4127]

I love the way you taught this carefully. Not everyone teaches this way. Thank you!

[@ShelbyParton-zu2wx]

Thank you for such a thorough explanation - it was helpful in understanding why people choose 8pt grid systems so often.

[@jerryjacob47]

I was oblivious about this rule & nobody even told me that there is an 8 pt grid rule in visual design. This really opened my mind & will definitely apply this to all my designs. Thanks @Akash

[@jerryjacob47]

@Akash Yadav Does the same rule apply when we make it for Web design or is it just for Mobile Apps design?

[@AkashYadavUX]

Hey Jerry Thanks for the comment. 8pt grid system is used only for mobile design. For Website design we a different framework which is called column layouts. It's a different approach as making things responsive is the main goal in website design. I will explain 12 column system in upcoming videos✌️

[@JRipz]

@@AkashYadavUX is there a video you made for grid for web design?

[@moniaafi6943]

As a beginner that video is really really helpful for me. I learn a lotttt..... your way of teaching things is soooooo good, clear, and understandable... thanks a lott...

[@chamaranuwan3956]

I was struggling with the term 8px grid in figma.Thank you Akash to creating these videos☺️these helped me a lot

[@AkashYadavUX]

Happy to help!

[@niwala2546]

very clear and neat explanation of 8pt grid system, I watched a lot of videos about grid system but its a great information. thank you so much sir.🙂🙏

[@AkashYadavUX]

😇😇

[@ChayonShaah]

Tell me about bootstrap it has only 12 grid system

[@chbmnya]

best video, the things which i was looking for finally someone showed up properly thanks

[@divyanshudv5539]

Love this format. Would love to see more like these. 😋

[@AkashYadavUX]

You got it!🤓🤓

[@chau.graphic]

When designing and using 8/4pt grid system, do you measure the spacing between elements by their bouding box (like in 11:48), or measure from the text's baseline itself? And if you are using the bounding box to measure, isn't the box is adjustable with line height? So how do you define that if you are using the bounding box to measure? Im so confuse with this for a pretty long time, please explain. Thank you

[@laceincission88]

Same doubt, could you figure it out?

[@sanketjadhav7062]

Hey please make presentations in dark background, I'm watching in the dark at night, on a oled display of the phone, the white just pops out too much. Love the video, all the best. I'm your subscriber now

[@AkashYadavUX]

Hey Sanket, Actually I was recording the older videos on darker background, but after a few subscriber complained of it being harsh I switched to light theme. Guess will revert to dark theme as I personally like it as well✌️

[@sanketjadhav7062]

You can try pastel or beige color, it's more soothing to the eyes.

[@WizardOP276]

sir jese ki apne kaha ki icons bhi 8 ka divisible hona chahiye toh sir ek doubt hai jo software mai H and W hai usme kesa present karna hai like jese 8x2= 16 so H=16 and W= 16 karna hai ya phir H=8 and W=2 karna hai? konsa wala apply karna hai sir?

[@sakshigupta3079]

you really taught it in very easy way . Really helpful

[@AkashYadavUX]

Glad it was helpful!

[@ismailtajudeen805]

Thank you Akash for this wonderful video.

[@AkashYadavUX]

I am glad it was helpful✌️✌️

[@ashishmishra238]

Waited for this 💥, thank you for sharing with us akash!

[@AkashYadavUX]

More to come!

[@talhashaikh1435]

nicely and cleary explain

[@judecruz1565]

Say I am designing a UI with cards and have the width of the 1x device say an iPhone i.e. w-375points (not exactly an even number) how would you centre a card in this do you use the gutter sizes for the cards and grid for UI elements that are left-aligned only ? loved the NFT video BTW !

[@AkashYadavUX]

Hey Jude So for artboard sizes that are not divisible by 8, we follow the same approach. You have to understand the absolute length of UI elements doesn't matter in app design.what matters is relative spacing between the UI elements and that should follow the 8pt system. You leave the 16pt margins from the edges regardless and make sure all the margins and padding between elements follow 8pts system that it. For eg What's the exact length of button is irrelevant. I will make some content on this soon :)

[@judecruz1565]

@@AkashYadavUX yeah, cool that makes sense, i guess I will have to try it out in practice a few times with different elements, thanks

[@NoContentVlogs]

Hey! This is awesome! But i have one problem. My Shape/objects/components is snapping only to a pixel grid (Snap to pixel grid) not Snapping to my custom grid that i have created?? why?? Help me with this!

[@laceincission88]

Learned a lot but I have a doubt, do we align based on the bounding box OR rather as per the elements inside the bounding box?

[@AkashYadavUX]

For no text elements align by bounding box. For text, Figma has a setting to trim the bounding box to x height, use that for more precise layouting✌️

[@rakshaslog3058]

Hi Aakash, thanks for explaining it so smoothly but could you explain the columns and rows, gutters and margin system used by designers?☺

[@AkashYadavUX]

That's literally comming in my next design system video😎

[@rakshaslog3058]

@@AkashYadavUX thanks would be waiting for that 😀

[@saiviswanath396]

Thank you akash 💥🔥

[@AkashYadavUX]

Welcome 😊

[@JRipz]

Is there a video you have on grids for desktop?

[@playpiano2264]

Hi Akash! I always use auto-layout for all my design components with the multiples of 4&8 in padding, margin and other spacing. So do I need to implement this as well for my mobile screens?

[@AkashYadavUX]

i am not sure if i understood your problem correctly, but 8-4 grid is only applicable for Ui elements and spacing, not the artboards.

[@sashanarlie2832]

Thank you so much! This was very informative! I learned something that I will use and take with me from now on. Does this apply to web design layouts as well?

[@AkashYadavUX]

Hey Sasha! No the grid system is only for app designs there is a different framework called "Column layouts" for responsive web design. i will explain that in upcoming videos🤓🤓

[@priyanshunegi02]

Can you make video on 4 col and 12 col grid?

[@AkashYadavUX]

Sure! Will work on this :)

[@ajithr1458]

Useful content, thank you

[@vishal.thakur]

Nice informative video. Thanks!

[@AkashYadavUX]

Glad it was helpful!

[@AliceS-uk6ng]

Great video!!

[@whimsical.me1]

very nice video thanks a tonne man

[@WizardOP276]

Does this same 8point grid applies in websites?

[@AkashYadavUX]

No! 8pt grids are not ideal for website design. for website we use column layouts, specifically 12 column layout. I have talked about this here kzbin.info/www/bejne/oaOXqoOLZq54paM

[@jericoherrera1331]

Thanks for this !

[@jasmines6768]

This was great thank you

[@AkashYadavUX]

You are so welcome!

[@kadmieljoseph170]

Good day sir, please any recommendations on how I can be a better UI designer? although am still learn. but would love your advice... THANKS

[@judecruz1565]

I would say try recreating effects you see in the designs that inspire you, later you can learn basic principles to make them better !

[@Aaron-dv2rm]

I'm leaning towards the opinion that this seems a little irrelevant considering any good designer would use a single component with autolayout to keep all measurements of it's instances consistent. I wonder if there is any need for a physical 8pt grid in figma if we are only ever manually entering measurements once when we first create the component. You can also save autolayouts to add to new components at the click of a button, leaving even fewer decisions to be made.

[@anuragtiwari6393]

Thanks !

[@ALLNALLProductions]

That was really informative.

[@AkashYadavUX]

Thanks Sanu 🤓

[@bhargavpatel_]

Thank you bhaiya!!

[@AkashYadavUX]

😇

[@v3i6v9]

❤