The Perfect Spacing Framework in UI Design | Figma Tutorial

[@Mizko]

Ultimate Figma Design Masterclass (5,200+ students. 90+ Videos. 10+ hours) 👉 thedesignership.com/courses/the-ultimate-figma-masterclass 🏷 Get 10% off via checkout - SPACING10

[@mmmmmmmmmm710]

Does this come with a certificate that I can put in my portfolio?

[@Mizko]

@@mmmmmmmmmm710 Yep :)

[@reflectingwithry]

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!

[@Videosuser]

I think it's beacause some items on the interface need a smaller spacing than 16 px.

[@kylehilldesigns]

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

[@See_thru_it_all]

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!

[@Royalbeck99]

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?

[@EnesKab]

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.

[@ghostk3]

Perfect and easy to digest the information. Great Thanks!

[@teenylupini]

instantly subscribed after that sunglasses math edit... and the fact you're the first person to explain this simply

[@WB-zr7pq]

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.

[@aristosxanthus658]

That's a pretty good guide.

[@cooooms]

That’s a great point - different designers in a team will have different opinions on whether they add 32 or 36px between elements for example. Do you have any examples of this kind of systematic documentation? 🙏

[@hussainawardhawala7348]

You have a way to uncomplicate things, which is just amazing! Thanks Mizko

[@bvs455]

Would love to see a video covering design documentation and handoff to developers 🤞

[@ИльяКонстанта]

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.

[@anton.tronenko]

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🔥

[@Mizko]

I'm so happy to hear this helped you found value in this Anton!

[@Aririkateki]

It was really great and useful, Keep going Mizko

[@dannab8069]

Thanks a lot, this video brought me many clarifications, keep up the good work! 🙌🏻

[@alexsmedile]

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

[@reflectingwithry]

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!

[@hussainawardhawala7348]

Your videos are underrated!🔥

[@adilbek.ermekov]

Could you please explain why certain elements on your design have a 2px spacing?

[@rendivs]

this is actually straight forward tutorial

[@Ralphunreal]

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.

[@Vivi-sama]

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.

[@animianacs2002]

yes, the good old in between figure 8 method

[@juansandia5060]

Amazing! Thank you Mizko

[@Kwasyuk]

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!

[@fernwehtwl]

do you have the name of the design ebooks? I would be interested in checking them out too ! thanks

[@JuliaKrav]

Oh, God! Finally I got it!!!

[@MauriceKindermann]

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!

[@sk8trsurfr]

BRAVO! great post

[@eichieluis1276]

Thank you Mizko.

[@_________________________.-]

from a dev pov it's good to have consistent spacing but sometimes we just don't care that much.

[@Michael.design]

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?

[@TaufikKemal]

incredible, thank you!!

[@Mizko]

Thanks Taufik!

[@shadil8452]

Thank you for thos information ❤

[@marzoval9551]

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?

[@Mizko]

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.

[@AJ-yj6kd]

@@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.

[@miguelolivares3301]

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 :)

[@Mizko]

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.

[@EnesKab]

Yup. Line-height thing is a pain most of the times. Would be great to hear your tricks and opinions on that.

[@teban-lopez]

I finally understood this shit. Thanks!

[@rootrl6247]

Sir, There's no links on the description block that you said, Please update it, thanks!

[@zoorks133]

Love you bro ❤️

[@Mizko]

Thanks ZOORKS!!

[@diegoflorez7032]

Thanks

[@ethanwasme4307]

power of 2 textures sized/scaled to a 4x4 grid seems to be the most performant for the GPU

[@Sormanification]

Are those pixels though or just points? Sorry for nitpicking

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.

[@cardozzzo]

Bro, I was about to do this question. I've also using 8pt grid and feeling confused about when use one or another.

[@fernwehtwl]

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

[@ehrro]

It's called spacing friendship principle

[@sufm96]

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

[@AliHaidar-y5j]

Ustad kia bat ay

[@LightsaberPanda]

I follow this 4 rule like a religion at work 😊

[@سميرةسعيد-ز8ظ]

❤

[@mtc1516]

Been working out much? Looks bigger bro

[@ShrikeGFX]

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

[@LuisVeloz13]

If you know, you know haha 😉

[@SamyadeepPurkayastha]

NO

[@rendivs]

i am a web developer whatch this ☠

[@azazinlove7514]

dolboeb