The Perfect Spacing Framework in UI Design | Figma Tutorial

Подписаться 172 тыс.

Просмотров 75 тыс.

50% 1

Ultimate Figma Design Masterclass (5,200+ students. 90+ Videos. 10+ hours)
👉 thedesignership.com/courses/t...
🏷 Get 10% off via checkout - SPACING10
Practical User Research & Strategy Masterclass (NEW - 250+ students. 8 hours)
👉 thedesignership.com/courses/p...
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/produ...
Sign up to my newsletter for exclusive content:
👉 mizko.net/newsletter
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignership.com
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
My Ultimate Figma Design Masterclass (4,200+ students. 90+ Videos. 10+ hours)

Развлечения

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 65

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

@questfordopamine Год назад

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 5 месяцев назад

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

@codingwithrendi День назад

this is actually straight forward tutorial

@hussainawardhawala7348 8 месяцев назад

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

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

@B_Migs 10 месяцев назад

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!

@juansandia5060 Год назад

Amazing! Thank you Mizko

@user-op7ek2fh6e 3 месяца назад

It was really great and useful, Keep going Mizko

@hussainawardhawala7348 8 месяцев назад

Your videos are underrated!🔥

@EnesKab 11 месяцев назад

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.

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

@sk8trsurfr 8 месяцев назад

BRAVO! great post

@eichieluis1276 Год назад

Thank you Mizko.

@shadil8452 Год назад

Thank you for thos information ❤

@teenylupini 7 месяцев назад

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

@TaufikKemal Год назад

incredible, thank you!!

@Mizko Год назад

Thanks Taufik!

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

@bvs455 Год назад

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

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

@animianacs2002 Год назад

yes, the good old in between figure 8 method

@adilbek.ermekov Год назад

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

@diegoflorez7032 16 дней назад

Thanks

@zoorks133 Год назад

Love you bro ❤️

@Mizko Год назад

Thanks ZOORKS!!

@estebanlopez5372 Месяц назад

I finally understood this shit. Thanks!

@JuliaKrav 6 месяцев назад

Oh, God! Finally I got it!!!

@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

@questfordopamine Год назад

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!

@_________________________.- 9 месяцев назад

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

@Michael.design 8 месяцев назад

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?

@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 9 месяцев назад

That's a pretty good guide.

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

@ehrro 5 дней назад

It's called spacing friendship principle

@user-fi2mu5yx6z 5 месяцев назад

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.

@ethanwasme4307 9 дней назад

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

@rootrl6247 10 месяцев назад

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

@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

@user-bf5lw4pv7o 25 дней назад

Ustad kia bat ay

@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 11 месяцев назад

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

@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

@user-nd2oi1ws9v 6 месяцев назад

❤

Год назад

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