Another reason why the 4-pt grid system is so important to use, is that as a frontend developer it's best-practice to use REM's for typography and spacing. Since the default 1rem is equal to 16px, it's quite easy to keep things consistent while styling. 4px is 0.25rem, 8px is 0.5rem, 32px is 2rem and so on. So it not only makes it easier for designers, but also for us developers when it's time to build!
I always use a 4px grid (good 7 years now), and I have 2 questions: 1. How do you deal with the fact that most mobile devices screen sizes do not multiply by 4? (for example iPhone 14 W393px) 2. Do you also use 2px padding? 3. I found that when you have text next to icons (all divided by 4px in size) it looks too close with 4px or too far with 8px so I use 6px does it work? Do you have another go around it?
Usually it's good to keep line-height between 1.2 and 1.6x the base font size. 1.2 for H1's, 1.3 for H2's, 1.5 for body etc. But that isn't a set rule. Start from there and see what looks best!
Pretty similar to 8px grid, but 4px lets you work with better spacing since sometimes 8px might be too much for certain elements. I noticed I was doing 4px without even knowing it when I realized 8px is too much spacing for certain elements.
This is awesome, it becomes a great huristic to follow that artifically constrains the total possible options for spacing (many to few). Then visually, it more or less answers itself when you only have a couple 'breakpoints' to choose from. I was tyring to think of ways this might fail, like using rem/em, but even those are pegged to 16px, so I assume that's why you would want a dynamic spacing plugin like "Tokens". Question - do you use a similar approach for fonts and font heirachy (title, main, heading, content, etc)? Like do you generally go title is 2x, subheading is 2/3, etc? Very curious about that. Great work!
To be brutally honest, in most cases my team and I build our own designs and we're fairly experienced with our workflow, so these minor details don't make much of a difference.
@@Mizko So either is fine? Which is more accurate when it comes to development though? Because I know there is a line-height property for texts, I'm not sure if there's a vertical trim property. When you use vertical trim, the line height is set to Auto, so I wonder how the devs know the correct line height. Personally, designing with vertical trim is easier for me.
That might sound like a simple trick for most of the people (especially for beginners) but it takes lots of practice and even years to recognize it. Thanks for sharing.
4 pt grid is the way to go nowadays ! It is such a basic convention in our job but i'm still shocked that many designers are hazardous with spacing. For studying folks around here : UI is all about consistency and readability. Just don't improvise with spacing because "it looks cool for you". Following this simple statement will get you farther that many beginners.
Рік тому+1
I have a question for you Mizko. First, I'm not a UI/UX designer. I'm just a graphic designer. And I've been using the 8 pixels spacing system in my designs. After watching this video, I feel like I should not use the 8 pixels and Start using the 4 pixels. The question is: Should I use the 4 pixels spacing system instead of what I've been using, the 8 pixels?
Рік тому+1
I think they are kinda of the same thing, 8 is just two spaces of 4 afterall. It's just that when you need that fine adjustment just makes sense to jump to 4.
@@cardozzzo i have been taking courses from another designer who advocates 8pnt grid .. also adham dannaway another designer i follow also mentions 8pt grid too.. the 4pt grid is so new to me and it looks so squished on the sides . I still need to learn more about the impact that 4pt grid does over 8pt
I use 4pt as the base grid with use case caveats. Its important to adapt for your use cases set up your tokens use cases more and more. An example would be 4,8,12 for tighter smaller ui logic, ie nav, cta. 8,16,24,32,40,48 etc. - interval of 8pt on the 4pt grid for most other things Larger Sectional logic - 104,80,56. Very token heavy use cases make a difference in design systems. Gap keep things simple - 16-32 grid gap.
Thanks Mizko it was a really nice video, just 2 things... Don't know if it's beacuse you just upload the video, but the part where is you just talking full screen, looks a lil bit blurry. For the other side, you should make a video where you explain the Text Line Spacing with the same 4px grid rule. Thank you very much, your videos are so helpful :)
Hey Miguel, can you confirm that the video is still blurry now? I've forwarded your feedback to my team to make sure there's no quality loss in the future! Great idea, we'll line that video up as well.
Mizko, thanks for that video! I was bumping into that problem constantly, when inner spacing ended up equal border spacings, recently i was educated about it by a fellow designer, and now educated even more by your video🔥
I really wish someone would make a video addressing text line height, text bounding boxes and spacing. The “cap to line height” feature is great but developers can’t work with that. The inconsistent spacing of the bounding boxes makes working with text very annoying.
What I’m struggling with is spacing text elements on a baseline grid. Do I space them from baseline to baseline, or is it better to count pixels from container border to border? And is it better practice for example to apply leading trim to all your textboxes? What do u do Mizko?
I've purchased 2 design ebooks for ui, both are from VERY reputable sources (both based on a 4pt spacing system). Yet some of my designs still felt "off". After watching this video I noticed the missing link... somehow they don't talk about the hierarchy to work from bigger sizing on the outside, to smaller sizing on the inside on a component level... This video made me "get it". Thanks Mizko!
Brilliant exactly what I was looking for there's not many videos with the 4pt system. Just one question though for spacing in a design system would you include all the multiples of 4 or could you skip some after 40 for example so it would become 8pt 48,56 etc
Ok Mizko, you've had a lot a great videos in the past, but this video has changed my life (in terms of my Figma use). You have EVERYTHING on Automated Layout and now I shall too. It's so much easier than I had thought just 9 minutes ago. Thanks homie!
Ultimate Figma Design Masterclass (5,200+ students. 90+ Videos. 10+ hours)
👉 thedesignership.com/courses/the-ultimate-figma-masterclass
🏷 Get 10% off via checkout - SPACING10
Does this come with a certificate that I can put in my portfolio?
@@mmmmmmmmmm710 Yep :)
Another reason why the 4-pt grid system is so important to use, is that as a frontend developer it's best-practice to use REM's for typography and spacing. Since the default 1rem is equal to 16px, it's quite easy to keep things consistent while styling. 4px is 0.25rem, 8px is 0.5rem, 32px is 2rem and so on. So it not only makes it easier for designers, but also for us developers when it's time to build!
I think it's beacause some items on the interface need a smaller spacing than 16 px.
I always use a 4px grid (good 7 years now), and I have 2 questions:
1. How do you deal with the fact that most mobile devices screen sizes do not multiply by 4? (for example iPhone 14 W393px)
2. Do you also use 2px padding?
3. I found that when you have text next to icons (all divided by 4px in size) it looks too close with 4px or too far with 8px so I use 6px does it work? Do you have another go around it?
What about line height? I was wondering should that adapt in relation to font size in order to keep the 4 point rule and be armonic
Usually it's good to keep line-height between 1.2 and 1.6x the base font size. 1.2 for H1's, 1.3 for H2's, 1.5 for body etc. But that isn't a set rule. Start from there and see what looks best!
Could you please explain why certain elements on your design have a 2px spacing?
This is awesome, there are not as many 4-pt grid tutorials, so I'm sure this will help a lot of designers. KEEP KILLIN' IT! 🙌🏻
Thanks a lot, this video brought me many clarifications, keep up the good work! 🙌🏻
from a dev pov it's good to have consistent spacing but sometimes we just don't care that much.
Would love to see a video covering design documentation and handoff to developers 🤞
power of 2 textures sized/scaled to a 4x4 grid seems to be the most performant for the GPU
Pretty similar to 8px grid, but 4px lets you work with better spacing since sometimes 8px might be too much for certain elements. I noticed I was doing 4px without even knowing it when I realized 8px is too much spacing for certain elements.
This is awesome, it becomes a great huristic to follow that artifically constrains the total possible options for spacing (many to few). Then visually, it more or less answers itself when you only have a couple 'breakpoints' to choose from. I was tyring to think of ways this might fail, like using rem/em, but even those are pegged to 16px, so I assume that's why you would want a dynamic spacing plugin like "Tokens".
Question - do you use a similar approach for fonts and font heirachy (title, main, heading, content, etc)? Like do you generally go title is 2x, subheading is 2/3, etc? Very curious about that.
Great work!
It's called spacing friendship principle
When it comes to fonts, are you now using the new leading trim and spacing fonts with that, or are you still using the default bounding box?
To be brutally honest, in most cases my team and I build our own designs and we're fairly experienced with our workflow, so these minor details don't make much of a difference.
@@Mizko So either is fine? Which is more accurate when it comes to development though? Because I know there is a line-height property for texts, I'm not sure if there's a vertical trim property. When you use vertical trim, the line height is set to Auto, so I wonder how the devs know the correct line height.
Personally, designing with vertical trim is easier for me.
i am a web developer whatch this ☠
That might sound like a simple trick for most of the people (especially for beginners) but it takes lots of practice and even years to recognize it. Thanks for sharing.
4 pt grid is the way to go nowadays ! It is such a basic convention in our job but i'm still shocked that many designers are hazardous with spacing. For studying folks around here : UI is all about consistency and readability. Just don't improvise with spacing because "it looks cool for you". Following this simple statement will get you farther that many beginners.
I have a question for you Mizko.
First, I'm not a UI/UX designer. I'm just a graphic designer. And I've been using the 8 pixels spacing system in my designs. After watching this video, I feel like I should not use the 8 pixels and Start using the 4 pixels.
The question is: Should I use the 4 pixels spacing system instead of what I've been using, the 8 pixels?
I think they are kinda of the same thing, 8 is just two spaces of 4 afterall. It's just that when you need that fine adjustment just makes sense to jump to 4.
Bro, I was about to do this question. I've also using 8pt grid and feeling confused about when use one or another.
@@cardozzzo i have been taking courses from another designer who advocates 8pnt grid .. also adham dannaway another designer i follow also mentions 8pt grid too..
the 4pt grid is so new to me and it looks so squished on the sides . I still need to learn more about the impact that 4pt grid does over 8pt
I use 4pt as the base grid with use case caveats. Its important to adapt for your use cases set up your tokens use cases more and more.
An example would be 4,8,12 for tighter smaller ui logic, ie nav, cta.
8,16,24,32,40,48 etc. - interval of 8pt on the 4pt grid for most other things
Larger Sectional logic - 104,80,56. Very token heavy use cases make a difference in design systems.
Gap keep things simple - 16-32 grid gap.
That's a pretty good guide.
Ustad kia bat ay
Thanks Mizko it was a really nice video, just 2 things... Don't know if it's beacuse you just upload the video, but the part where is you just talking full screen, looks a lil bit blurry. For the other side, you should make a video where you explain the Text Line Spacing with the same 4px grid rule. Thank you very much, your videos are so helpful :)
Hey Miguel, can you confirm that the video is still blurry now? I've forwarded your feedback to my team to make sure there's no quality loss in the future!
Great idea, we'll line that video up as well.
Yup. Line-height thing is a pain most of the times. Would be great to hear your tricks and opinions on that.
dolboeb
you should really be doing larger steps the higher you go. Having 36 and 40 is completely redundant as example and makes things confusing and messy
Mizko, thanks for that video! I was bumping into that problem constantly, when inner spacing ended up equal border spacings, recently i was educated about it by a fellow designer, and now educated even more by your video🔥
I'm so happy to hear this helped you found value in this Anton!
I really wish someone would make a video addressing text line height, text bounding boxes and spacing. The “cap to line height” feature is great but developers can’t work with that. The inconsistent spacing of the bounding boxes makes working with text very annoying.
What I’m struggling with is spacing text elements on a baseline grid. Do I space them from baseline to baseline, or is it better to count pixels from container border to border?
And is it better practice for example to apply leading trim to all your textboxes?
What do u do Mizko?
Sir, There's no links on the description block that you said, Please update it, thanks!
I finally understood this shit. Thanks!
instantly subscribed after that sunglasses math edit... and the fact you're the first person to explain this simply
It was really great and useful, Keep going Mizko
incredible, thank you!!
Thanks Taufik!
Been working out much? Looks bigger bro
this is actually straight forward tutorial
You have a way to uncomplicate things, which is just amazing! Thanks Mizko
I've purchased 2 design ebooks for ui, both are from VERY reputable sources (both based on a 4pt spacing system). Yet some of my designs still felt "off". After watching this video I noticed the missing link... somehow they don't talk about the hierarchy to work from bigger sizing on the outside, to smaller sizing on the inside on a component level... This video made me "get it". Thanks Mizko!
do you have the name of the design ebooks? I would be interested in checking them out too ! thanks
yes, the good old in between figure 8 method
I follow this 4 rule like a religion at work 😊
Oh, God! Finally I got it!!!
Thank you for thos information ❤
BRAVO! great post
Your videos are underrated!🔥
If you know, you know haha 😉
Love you bro ❤️
Thanks ZOORKS!!
Amazing! Thank you Mizko
Thanks
Thank you Mizko.
Brilliant exactly what I was looking for there's not many videos with the 4pt system. Just one question though for spacing in a design system would you include all the multiples of 4 or could you skip some after 40 for example so it would become 8pt 48,56 etc
NO
❤
Ok Mizko, you've had a lot a great videos in the past, but this video has changed my life (in terms of my Figma use). You have EVERYTHING on Automated Layout and now I shall too. It's so much easier than I had thought just 9 minutes ago.
Thanks homie!