You'll Regret NOT Using The 8pt Grid in Figma (UI/UX Beginner Tutorial)

[@dievas_]

Also 8px system allows easy use of EM and REM units for developers, as default browser font size is 16 pixels, so they can use 0.5em for 8px, 0.25em for 4px etc. EM units are important to accessibility amongst many other advantages compared to using pixels in CSS. Using this system will save hours, days or even weeks on larger projects. Great video as always!

[@TimGabe]

great points, Šaras!! 🤩 happy you liked it! 🥳

[@vietkhoado6723]

Thanks Sara. For EM and REM units, which one would you suggest using the best? I'm just learning the No Code development tools, so I am very confused.

[@dievas_]

@@vietkhoado6723 you need to use both EM and REM. No code is trash, always was, always will be.

[@dievas_]

@@vietkhoado6723 die-netzialisten.de/wp-content/uploads/2014/05/em-rem-min1.png

[@vietkhoado6723]

@@dievas_ Thank you, BTW, what's this?

[@twitchplaysTV]

As a senior graphic designer pivoting into product design, your videos are really helping. Keep pumping out this kind of content and your channel is going to to really well

[@TimGabe]

that’s so cool to hear. thanks a lot for this kind comment 🤩🙏

[@xhongaronga]

Just came back to this after 7 months to refresh my knowledge on the 8pt grid. Great tutorial as always, Tim 🌟

[@TimGabe]

you're the best, my brother 😍

[@melaniedesigner]

Awesome! I was reading an article about it but it wasn't clear to me, so I found this video and it helped me a lot. Thanks 💙

[@TimGabe]

happy that I could be of help, Melanie! 🙏💜☺️

[@noymorgenshtein9191]

exactly what i needed to see right before starting my first designs for a personal project! also as a fullstack dev I loved your point about devs paying attention to the designers' patterns and checking with them if something seems off, work gets a little robotic sometimes so if you give me a design and ill do it pixel-perfect but having a consistent system through out the project is important!

[@TimGabe]

delighted that I could give you something to help you start the personal project, Noy 🤩 yes... it's so hard to tell the difference between when a designer does something intentionally and when they don't, so having systems is super helpful!

[@phkoon]

Thank you! I was really intrigued about setting the main website container sizes to match the 8pt grid system and spent a LOT of time trying to figure out a common ground of fixed widths for columns and gutters only to find out now that this is where you don't have to follow the rule. Relieved

[@d.S.b.]

Great video, I was looking for some guidance like this when I was a junior . I think a lot of young designers will appreciate this.

[@TimGabe]

thank you, my friend!! I really hope that I can inspire people to start using best practices quicker than I did... saves a bunch of time 😅

[@dc33333]

wow such a clear eloquent speaker.

[@TimGabe]

really appreciate that, thank you so much!

[@WellnessWhispers000]

thanx for your impressive teachings with relevant examples. keep up the good work sir.

[@moniaafi6943]

Wowww! As a beginner, this video really helps me a lot... I learned a lot of new things from your video... Your way of teaching is soooooooo good with your cute expressions haha. Thanks a lot, man.

[@TimGabe]

really appreciate the kind comment, thank you!!

[@KostasWasHere]

Thank you so much for this series of videos Tim! You can't image how useful they are to someone who just starts their journey in UI design. Keep it up, you are a real pro!

[@TimGabe]

I love seeing these kinds of comments. thank you for sharing, my friend!! 🙏

[@ivanpost4079]

Keep going! you are rising star now) Thank you!

[@TimGabe]

that's so nice of you, ivan! makes me happy!!

[@seedcamcreationstudio]

This is the best video explaining the 4'8 grid system

[@fAlekr1]

Great video! I'm a developer who's starting to also do designs and your content is helping me A LOT! Cheers from Brasil! \o/

[@marcorieser]

Thank you, as a developer I am very grateful for such videos. Consistency!

[@TimGabe]

that's great to hear. gotta think about the devs!! 😃

[@tayyubahmed1646]

Clearly explained, definitely subscribing, thanks Tim!

[@TimGabe]

thank you Tayyub!! 🙏🤩

[@zaudiko]

Your content is valuable for us, please make more we support you. Thank you

[@vcodev108]

As usual excellent vid, thanks man! it was really helpful!!!

[@TimGabe]

Vcode, thank you for the support, as always!! 🙏😃

[@Shatz]

Thank you very much for a detailed and understandable video!!

[@TimGabe]

happy to be of help, Shatz! 🤩

[@sayekatchakraborty2552]

Thank you Tim 😊 very useful information for grid system 🙏

[@TimGabe]

really happy you enjoyed the video, Sayekat!! 🤩

[@nicepicbro3425]

OMG ! That channel like a gem.

[@TimGabe]

so grateful for the support and nice comments! thanks a lot 🤩

[@stoptominate]

Love your videos man, thank you so much :)

[@TimGabe]

happy to hear it, friend 😃

[@badermuteb4552]

nice explanation Tim. nice moustache too.

[@TimGabe]

haha, thank you so much Bader--the moustache comment really warms my heart 🤩

[@dilankamadushan9736]

Thanks for this ❤️ I have a qustion, do we need to use 4 or 8pt system for our line heights and font sizes?? It would be great if you can make a tutorial..

[@TimGabe]

hey Dilanka!! I never use it for line heights or font sizes -- if my sizes do end up being divisible by 4 or 8, it's random. I'd say: don't worry about it for those things 😃💜

[@wadhaibrahim7954]

Keep going 👏🏻

[@rafaelcalderon6658]

Great work mate... Thank you!!

[@ikennagibson3933]

Well done TIm👏🏻

[@TimGabe]

thank you Ikenna!! hope you're well 🙏

[@ikennagibson3933]

@@TimGabe You are welcome Tim😃 yeah I am doing great, I trust you are too💪🏼

[@cosmiqdesigner]

Thanks for this informative video.

[@TimGabe]

appreciate the comment, Cosmiq 😃

[@cosmiqdesigner]

​@@TimGabe and I appreciate the efforts made into putting such quality content.

[@softdave]

Very helpful, thanks

[@TimGabe]

so good to hear that you found it helpful David!! thank you for commenting 🥳

[@shivudesign9210]

Thank you finally it came 😊

[@TimGabe]

glad I could help, Shivu! 😃

[@shivudesign9210]

@@TimGabe Yeah! literally it helped and understood 🤩

[@onien4926]

As developer I absolutely agree and when you say designer to use 4pt grid and you see 51px is just terrible. I like to use tailwind and it uses the same system so this is twice helpful

[@TimGabe]

awesome to hear!

[@janisbillepp9396]

Great stuff! We are currently using 5-10. Any benefit in using 4-8 instead?

[@TimGabe]

4-8 is the industry standard, but i'd always say that whatever rows your boat is the best in the end!

[@analinalino]

Greaaaaat class!

[@SzabatDesign]

Love you Tim ❤️🙆‍♂️ I waited half a year for someone to explain it to me ... each designer designs differently. I have one more dilemma that has not been touched upon here, namely the lineheight of the text. what if we have a lineheight of 170% and the bounding box is so big? Where visually is 16px and the bounding boxes of 35 for example? I hope soo you understand me.

[@TimGabe]

thank you for always supporting Christopher 🙌💜🤩 means a lot! not sure I really understand the question, but for text heights, and for elements/layouts where content will decide the full height in general, I don’t really care to follow the 8/4 pt grid since ☺️

[@brunocarvalho4342]

Hi Tim 😀 I found your video really helpful and interesting. I was just wondering how do you deal with screen widths that are not divisible by 8 (like 375px on iPhone 13). I think the only way to go with it would be taking a px on one of the columns, but wouldn’t that “break” the 8pt system grid? Thank you!

[@TimGabe]

hey Bruno! generally when it comes to the horizontal axis in design, and especially for column grids, I really don't care about following the 8pt grid since the width always will be dynamic. the width of the columns will change with the width of the screen (or frame), so you don't really gain anything from nailing it down to 8pts for one specific device size 😃

[@TimGabe]

and thank you for the comment 🙏

[@brunocarvalho4342]

@@TimGabe Thank you so much for replying. It was really helpful. Keep up the good work!

[@mudassarch5]

Thanks for this information... Should we also follow 4.8 system in height and width of elements (Like any rectangle, icons, buttons)? If we do this, the space between elements doesn't remain according to 4/8 spacing system

[@TimGabe]

for heights of buttons, inputs fields, etc. (generally anything interactive that you might want to align with other similar interactive elements), you can follow it for the heights! for widths it's hard to follow and you shouldn't try!

[@jenstornell]

It's the same system Tailwind CSS uses and It's perfect.

[@TimGabe]

yes!!

[@tomashruska2171]

thanks for the video

[@TimGabe]

thanks for the comment, Tomáš ☺️👌

[@yoshikotezuka6485]

I have a question. How does this 8pt grid system work when you have not only column grid guide but also rows of grid guide? If I prioritise 8pt system of padding and spacing, it doesn't follow the baseline of the rows which I made with 8pt height. It is because if we hover the element it shows the spacing from the text box not the text itself. I think it all matters of which I chose but I would like to know the standard way of doing this and your suggestion. Thank you for the great tutorials!

[@TimGabe]

I don't fully understand the question, my friend 😩

[@batool.tatari]

Thanks a lot Tim to this gorgeous information, Can i asked for the figma file?

[@TimGabe]

I'm afraid I can't find the Figma file for this one any more 😩

[@batool.tatari]

@@TimGabe no problem, I am really appreciate your interest. You are such a great design teacher 🧡

[@HamzaELMOQADDAM]

Thanks man

[@afrosymphony8207]

Is their an app for this in figma?? it'd be criminal if nobody has thought of transforming this idea into a figma addon

[@TimGabe]

not sure if there is... 🤯

[@emrahaliyev3876]

I'd rather to use 4, 8, 12, 16, 20px... than 8, 16, 24, 32... Becoz sometimes we need less than 8px padding. Most designers don't use 8px, there are tons of people using the 10 px grid

[@dievas_]

10px is a horrible idea. Ypu cant center 5px... Only a terrible designer could use 10px.

[@emrahaliyev3876]

Saras, I know it, that's why I don't use the 10px grid. Also padding must be divided by 2 in projects. We can't divide 5 by 2 but we can do it for 4. So 4 and 8px grid is the most advantageous option for both designers and developers.

[@TimGabe]

definitely agree with you both here! sticking with 8 or 4 is the game 🥳

[@unbendable85]

Sometimes 5/10 grid much more interesting and simple than 4/8.

[@vincentdaniel8140]

Hi Tim, (or anybody) can you please describe why you used 10px on the button, since the height of the button 40px and you can go with 8 or 16? or actually how 10px comes in?

[@TimGabe]

if you set a fixed height on an element, the padding is irrelevant 👌 so in this case you don't really have to think about anything else but the height 😃

[@drgregoryhouse1470]

Nice biceps bro

[@AbrarulRhythm]

thank you

[@grant6821]

THANK YOU

[@Sebastian-zs8cp]

It is't normal design without this rule? Do you also use it for Smartphone app's? I will be killed when I don't use it?

[@TimGabe]

haha!! you won't be killed, but it makes life a lot easier!

[@GeneralEnthusiast]

Everything in this video relates to following a system, not necessarily 8pt. Your pref is 8pt, but metric makes more sense, which is why it's preferred internationally.

[@TimGabe]

4 or 8pt is used a lot across big companies and websites, so i think it's a pretty safe bet 😃 but yes, any system will help!

[@quest307]

what about typographic scales like perfect fourth can you use them too? :)

[@TimGabe]

i'm not personally using it, so can't speak to it! 4/8pt is the standard!

[@ytRap007]

Really needed this badly thanks for this Tim.

[@ytRap007]

@Tim Gabe can we ask a video about how to make illustration in figma by different style of illustration ,flat, 3d,glossy and many more. Thank you very much.

[@TimGabe]

thanks a lot, Ritche ☺️ and thanks for the suggestion, this will be added to the list of ideas 👌🥳

[@7rollface]

It bothers me that in the first slide showing off the different sizes of UI elements, all the boxes are the same size and just gradually fade into the background.

[@TimGabe]

sorry 'bout that!

[@manuelsilva4931]

i'm using 10px grid..... Help!

[@TimGabe]

if you can, switch it over to 4pt or 8pt whenever you have some spare time -- it'll save you a lot of headache in the future 🙏

[@workmail1]

hej tim!

[@TimGabe]

Alfred, my friend 💕

[@umashankar34]

👍👍👍

[@TimGabe]

😃🙏

[@urmilpatel5297]

I want to do review on my ui ux can anyone help me?

[@nrdfoss]

i use 6 12 24...

[@TimGabe]

that's totally fine, as long as it works for you!

[@spacemike800]

only hardcore 1 pixel grid folks + you artistic skills other stuff is just a lie to make your life easy ))) in this world we have 0(no action) and we have 1 if we need to do something with matter around us so yeah 1 pixel grid + love )

[@TimGabe]

I understand nothing of this, but I love it. ❤️

[@exgeeinteractive]

4pt grid >

[@TimGabe]

yes, 4pt is even more awesome!

[@exgeeinteractive]

Actually @@TimGabe, I take that back. It really depends on the situation. 🤣 Since posting that comment, you have no idea how many times I've squandered my design systems with 4ptg. Lesson learned; be flexible and open to change 🤣

[@TimGabe]

@@exgeeinteractive i think it’s more flexible, and 8 is just not small enough in a lot of cases… 🥲

[@dennyour]

I like 5pt Grid, easier

[@TimGabe]

whatever works for you is the best for you!

[@tonychopper4114]

Why are you calling it 8pt Grid? 8pt in px is 10.66666666666666 px. Isn't it appropriate to call it 8px Grid System to make it clear?

[@Djerique]

Why?

[@StudioSerious1]

We could also adopt the rule of 8pt for the title, subtitle, body text sizes, couldn't we?

[@TimGabe]

yes! I do that most of the times just for OCD purposes (😂), but it's definitely not a must!

[@greggalf6140]

Why not 5, 10, 15 etc?

[@TimGabe]

here’s an article explaining this: diegovz.com/en/blog/8pt-vs-10pt-grid