8 Point Grid system - Improve your UI designs (Figma file included)

10X your UI Design skills using the 8 point grid system. Learn how to use it, set it up in Figma, and how to improve your designs.
Link to Responsive design grid Figma file: www.figma.com/community/file/...
00:00 Intro
01:10 Multiples of 8
02:10 Set up grids in Figma
04:07 Re-design - 4 Design principles
📺 Watch next:
Improve UI Designs: • Better UI design skill...
Responsive design grid: • Master Responsive Desi...
📘 UX Books:
- Dont make me think: amzn.to/3VBi4Bj
- The design of everyday things: amzn.to/3BdWMS
The giveaway competition is now closed, but sign up to receive updated on the next one:
Mailing list: mailchi.mp/ca51b817ab2a/ol6ec...
Instagram: / uxtshili
Twitter: / uxtshili
Tiktok: / uxtshili
💬 HAVE QUESTIONS about UX/UI, tech or Figma? Add it in the comments and I will be happy to answer. You can also let me know what topics you would like me to create videos on
Some of the above are affiliate links, at no extra cost to you.

[@uxtshili]

Let me know how you have found using the grid in your designs 🙂

[@greatstoriesproductions]

It's been so helpful. It makes work easy.

[@drakZes]

Why is your desktop Margin so low? I have seen other developers use a bigger margin for desktop. Why is this?

[@LexieZhang-hl5qm]

Very useful and practical content!! Absolutely what I need. Thank you so muchhh :)

[@marie_toni]

Happy to have discovered your channel! You speak so eloquently/your communication is very clear. Looking forward to learning from you. Thanks for sharing

[@uxtshili]

Thanks so much and welcome ☺

[@johnedeh1650]

Using grid in design has been so helpful, tshili you are the bomb🔥.. love your teaching skills

[@uxtshili]

Happy to hear that! Thank you for watching

[@dragonflyjones5023]

Great job with the visual hierarchy. Improved the rhythm so much.

[@uxtshili]

Thank you for watching!

[@praiseelechi8832]

Great video.
I love that you explained the design process and decision in a simple way.
Thanks.

[@uxtshili]

Thank you! Glad it was helpful!

[@ayomideashiru554]

Interesting to see and watch how you redesigned the screens with your concept!!! Makes it a unique tutorial and i love the hands-on approach style of teaching

[@uxtshili]

Thank you very much! Glad you found it useful 😊

[@Futureshucks]

This is excellent. I am familiarising myself with Figma prior starting work on my first prototype and this is so massively helpful.
Also your delivery is excellent, perfect pacing, everything clearly defined. Also it helps to humanise the content having you in screen, as you talk through each point. First rate.

[@uxtshili]

Thank you so much for your kind words, Im glad it was helpful

[@user-uy6ze8vx4e]

So refreshing to hear a great voice. Thank you!

[@uxtshili]

Thanks for watching 😊

[@greatstoriesproductions]

Tshili you're simply the best. You're my teacher henceforth. I'm so happy I discovered your channel. Love the way you teach. Great work 👏

[@uxtshili]

Thanks so much, I'm glad you like it 😊

[@sierrasims]

Thanks for the explanation. Very thorough 💛

[@uxtshili]

Glad you found it useful

[@supahmariostyle]

Ma'am....I love you. Your explanations are clear and easy to understand.

[@uxtshili]

Thank you, I'm glad you find them useful

[@AsianliteNews]

You are a great Teacher. Thank you :)

[@uxtshili]

Thank you for watching

[@temitopeolowe6191]

Thank you for sharing, i am sticking with 8 grid system in all my designs.

[@uxtshili]

Amazing! Thank you for watching

[@maddieritter4595]

This helped so much! Thank you!

[@uxtshili]

Glad it helped! 😊

[@Tee8917]

Great video! I’ve deffo seen an improvement in my work!

[@uxtshili]

Glad to hear!

[@b_arias]

This is amazing! thank you for sharing!

[@uxtshili]

Glad you enjoyed it!

[@angelicojohnrago2878]

The redesign is killer

[@uxtshili]

Thank you

[@warishas5951]

So helpful! Thank you

[@uxtshili]

You're welcome!

[@stanvulcci1275]

Good job,i cant wait to see the video on colors.

[@uxtshili]

Coming soon! Thank you for watching

[@user-bb6uv4kk9n]

Thank you !

[@uxtshili]

Thank you for watching 😊

[@uifry]

Wow, this is a game-changer! The 8-point grid system is a secret weapon for leveling up your UI design skills. The beauty of this system lies in its simplicity and effectiveness. By adhering to an 8-pixel increment, you create a harmonious rhythm and alignment throughout your design, making it visually appealing and user-friendly.

[@uxtshili]

Yes game changer indeed! Thank you for watching 😊

[@tickone8572]

thank you.

[@stephanieburns508]

MUCHAS gracias!

[@uxtshili]

De nada! Thanks for watching

[@afrosymphony8207]

great video but i wish you showed us a demo on how exactly you went about redesigning the ui and fitting them into the proper grids. you just said you did it without any example. you're a great teacher just sthng to keep in mind for next time

[@uxtshili]

Sorry about that, will keep in mind next time 😊

[@dao.808]

very good content! thank you :)

[@uxtshili]

Thanks for watching 😊

[@OlyaPonny]

Great!Thanks!

[@uxtshili]

Thank you for watching 😊

[@emmanueltolani7243]

Super helpful.

[@uxtshili]

Thank you for watching

[@thankgodlove]

thank you. great video dear

[@uxtshili]

Thanks for watching 😊

[@Godheals_always]

Fantastic

[@uxtshili]

Thanks for watching

[@peteromailey1613]

Interesting. Thank you
Pls make a video on components

[@uxtshili]

Thank you for watching. Yes its on the list 🙂

[@Ve.for.victory.]

Subscribed ❤️

[@uxtshili]

Thank you for watching

[@augustinesolomon6286]

Also a video on how to make userflows would be nice
Thanks

[@uxtshili]

It's on the list!

[@jancihamara]

Great video, I'd just say, you don't necessary HAVE TO do everything in multiples of 8, such as image height... yes it is better for visual harmony and rhythm, but there may be use-cases where you may "break the rules" while still aligning the element correctly within the 8point grid, and it doesn't necessarily mean it's wrong :) neither will each element ALWAYS adhere to a certain number of columns, e.g. your company logo may span more width than width of single column within its aspect ratio, but it doesn't necessarily mean you will right away scale it up all the way to the width of two columns, just to fit the columns layout :)

[@uxtshili]

Yes I totally agree, but that is advanced design thinking 😅 this rule helps those who are struggling to make their designs look polished

[@augustinesolomon6286]

Nice one, can you do a video on how to ideate and make sketches

[@uxtshili]

Great idea!

[@fatimasbee]

Thanks for this
Couldn't agree more!... Grids really makes my work neat
Sometimes, I use 4pt...I hope that's okay too?

[@uxtshili]

Absolutely!

[@ramatumarie]

Found this super helpful and engaging! Thank you!
My only question was; I read that gutters should be at least 24 to promote good spacing, but in the video you went with 8 and 16. What I should I stick with?

[@uxtshili]

There are different variations of this out there. The most important thing is to make sure things are consistent. Some people use the 4point grid system, so 24 could work for the websites, but thats too much space for mobile.

[@ramatumarie]

@@uxtshili ahhhhh right, thank you x

[@Phoebus-xxx]

Great video, i was just wondering how the screen’s width is related… shouldn’t it be a multiple of 8 too?🤔

[@uxtshili]

Good question. No screen widths can vary because tech manufactures make screens of all sizes. Which is why we focus on making it responsive to fit any size 😊

[@fuzzyfredy4010]

Great video!!! Does the 8pt grid system applicable to web design

[@uxtshili]

Thank you. Yes it does. I show it at 03:07 if you watch that part again

[@martynk]

🎉

[@saraibrahim2181]

What numbers in the 8-grid should I use when working with frames (1512x982) Is it the same as deskshop?

[@uxtshili]

Hi I use 1400 wide, any length

[@nikknence]

Perfect. 2 questions. First its ok when i do something on 1440. My client if she/he have 1920 resolution, how they will see on prototype? I f you put actual size, they will se it small. IF they see it from a 13macbook actual size they will see it perfect. And second, for the developers, when they will do it larger screen above 1440, how i can export photos, i mean for a full screen 1920? I must design also the 1920?

[@uxtshili]

Prototypes usually fit to the screen. If you're designing responsively, the final design should minimise and fit to the screen. I'm not too sure about 1920, but this is where you work collaboratively, talk to them ask them what is best and you can try different things out together. That is what I do at work.

[@westtventertainment8167]

How do you grid vertically

[@uxtshili]

Its a bit trickier, better to just measure all the elements. All my boxes, the sizes are multiples of 8. But you can experiment with rows, by playing around with the settings. Choose rows and the size to 8px

[@kousar335]

you could have shared this file for our understanding beginners

[@uxtshili]

Hey. Apologies, I thought I explained it well enough. Try watching the video slowly, stop and pause it, and follow along on Figma. Let me know how you get on.

[@kousar335]

@@uxtshili Thankyou for your response I have gone through the video if we would have got reference file what you were explaining it would be helpful

[@drakZes]

For desktop you are only using 32px Margin. I see many developers use like 90-120px. Any reasons for this?

[@uxtshili]

I mentioned in the video that its up to you what size you choose, as long as you're using multiples of 8. But you should be collaborating with your developers, and decide together what size is best

[@shahid_hossain594]

❤❤❤❤❤

[@uxtshili]

😊😊

[@adeolatoyin1211]

What about row? Tshili

[@uxtshili]

Great question. If you make sure you’ve measured the sizes properly, they will align.

[@adeolatoyin1211]

@@uxtshili but from my knowledge on Row I use 800 for count
Type : center
Gutter 0
Height 8
For me to get a proper alignment

[@tonychopper4114]

Why the grid called 8 point grid if you are using px? It sound confusing, I think it is better to called it 8px Grid System.