omg thank you so much you literally saved my life, my adobe suddenly stopped working and i was so clueless about how to make these grids in figma THANK YOU
Really helpful!! Before I was putting the actual grid setting on which always bothered me because the grid doesn't match the stretch 12 columns. the 12 columns in an 1140 frame makes sense and the style has the 8 rows, but do you do them separately when you're using a larger screen, like a 1440?
@@decheka6158 he was using a 1200px wide frame, so he needed 30px margin on each side (1200-60) to get 1140, and 120px margin on each side (1200-240) to get 960. hope that helped:)
Been watching your videos for a few days and they are really good and straight to the point compared to many other folks out there. Leaving this appreciation comment here for you! Keep up the excellent work❤
6:03 Hi. Is having 20px gutters not an issue if one intends to use an 8pt grid system? I thought the width of margins, columns and gutters should be a multiple of 8. For example, there is an article, one among many, that suggests (12 columns × 72px) + (12 gutters × 24px) = 1152px container. Of course I understand that there isn't one grid for all designers but... Here are my latest thoughts : - Margins size doesn't have to be a multiple of 8 since one is only interested in the container's width. Won't really break any rhythm. The only thing important is that it looks good on a 1280px screen. Any container width below 1200px could be good. - Gutters should be a multiple of 8 since they determine the spacing between most of our elements (and yet you go with 20px. That's not a multiple of 8 but it's a multiple of 4 so maybe that's why you " tolerate " it.) - Columns. Well, I don't really know anymore. I thought it was important since it determines the size of elements (in order for it to be a multiple of 8) but I'm not so sure now. Conclusion: I kind of felt that the size of the gutters was the most important but I don't really know anymore (you're not using a multiple of 8 😁). Is there any of those things (margins, gutters, columns) that must absolutely be a multiple of 8 if you intend to use an 8pt grid system or not 😵💫 ?
I would say that you are never forced to do anything as a designer 😃 the 4/8 pt grid system is mostly there for your own (and your developers') sanity. if you and your devs know that your buttons will be either 40 or 48 px tall, then they'll immediately understand that 46px is probably not the right measurement in an erroneous design. so, use it as a guideline to help you stay consistent and structured -- but don't make it a stressful thing. 😃
8:23 actually I cried... 😭 Thank you for mentioning that I really appreciate... I am a fullstack developer. I know a little bit figma but not pro like you. and I learn lots of the things from you Thank you so much
Thanks for the video. Can I ask whether I should use both grids at the same time in order to get beautiful compositions on my website? e.g both 8px grid and 12 col grid. how about the type, should it always be a placed on the grid?
Starting to understand, Cheers! I do have some questions: - you mention that the margin is 30px if the container width is 1140px but why is that ? is this arbitrary ? if not, how do we calculate this. - why are we using an 8 point grid system when the vertical columns don't adhere to it ?
I am having trouble with my container size on the desktop breakpoint...with the responsive grids, how can I ensure my overall container size doesn't exceed a certain width? I am designing at a 1440px screen size, but for users on large desktop monitors, the design gets way too wide when I have everything fit to the responsive grid. Is there a way to limit it? Any help would be hugely appreciated.
What a great video, but there is one thing I don't understand at 8:19 where you were saying that elements must not be at the middle of a column or the developer will cry, while you are placing the "Sign up" button in a place where it is not aligned to anything! is it because it is a component with "Read more" button or what?!
Hi Tim, thanks for explaining both the horizontal and vertical elements of the grid in addition to the 8pt grid system. I have observed that most senior designers use 1120 px of the container with 32 px of gutter in the stretch mode for desktops, so is it a kind of the best industry practice or just a matter of choice? Thanks!
I think this is very much a matter of visual taste as long as you're not sacrificing UX! 😃 and following the "standard" is usually a good way to go if you want to optimise for usability!
for containers (your outer boxes) you want to try to stay within full columns as much as you can as that makes it easier for developers if they're using traditional column frameworks 😃
So what should the margin be when making column Grid, it was a bit confusing at that part? Like you said it depends what my container is going to be, but before I start designing don't I want to set up a Grid already?
Thank you so much for this video. I was always wondering how to set the margin. I even asked ChatGPT. It said 120. I thought it seems ridiculously large as margin. Your video helps me!! I have one additional question. So you told us how to set columns for different devices, but how's about rows, do we always set them as 100 for tablets and phones as well?
Amazing video explanation! Thank you very match mate! I downloaded the figma files also, really thank you for these too. One question: The rows, remain the same to all sizes (Dektop, Tablet, Mobile)? For example I did put - 100 rows - Type: Top - Height: 8px - Gutter: 8px, I do the same to Tablet and Mobile or I have to change it like did with the columns? Thanks again :D
Hi! Love your videos! You explain that a 1140px container should have a 30px margin and 960px a 120px margin. How did you calculate that? I tried to Google these numbers as I thought they were standard measurements. Can you please elaborate this? :) Thank you!
hey Nubi! 😃 if we're talking about the same zoom, it's done in Final Cut Pro X when editing the video in post production. you can zoom in Figma by hitting "Z" and selecting a specific area on your canvas! I hide the Figma UI by hitting CMD/CTRL and the ":" key 🥳
yes, I've gotten a lot of comments regarding this one 🙏 feel free to check the comment field and see if you'll find an answer to your question, Muhammad 😃
Hey! Thank for a useful content:) I have a question regarding the design example that you've shown on 7:05 sec. I've noticed the buttons are not "nested" in the columns. For example, the "Read more" button ends on gutter, not in the column. Is that technically correct?
thank you for commenting, Liana 😊 buttons are one of the elements where you don't generally care about them covering (or not covering) X amount of columns -- you just want them to align nicely with other relevant content on your page. 👌 note though that in some cases for mobile designs, you'll see that a button covers all columns (i.e. 100% of the width).
I am so glad to find your channel. So concise and clear on the videos. My question is how do you decide the width of each column and the gutter, is it based on the 8px or 4px system?
happy you like it, my friend! the width of the columns and gutters isn't something I care about (generally) -- I usually just care about the width of the whole container 😃
can u please tell me about the road map if i want to make design agency regrding to ui ux designing what track should i follow .... or if u have any video regarding this pleaselet me know
I'm completely new to the world of web design, so I had no idea how to auto-layout all your stuff. I now have an almost finished website with cool animations. but when I press autolayout it often deletes my front layers such as a black image that I use as a transition. Is there a way I can fix my project or do I have to start over
Oh my god. This was the best comprehensive explanation of grid systems! Thank you so much, Tim! Also, I wanted to add I think it’s 4 or 8pt because typically device screen sizes are divided by 4 and 8, right?
wow, that's so cool to hear 😃 thank you!! regarding the reason for it being 4 or 8, I really don't know... Apple for example tend to do things like 393px, 375px, etc. for their devices. 😅
Hi! I've created styles of the rows and columns like you've shown in this video. However, I'm unable to apply both row and column styles on my frame (I'm using Macbook Pro 14"). I'm only able to apply one of the styles created. Could you please help me out? Thanks!
are you creating styles out of them both? I think you can only have one style applied at once, but if you break them into just normal grids (no styles) it should work ☺️
use the center option with 75 px coulmn width, this gives you 1120px container. if you add the 10px space on each side that is by default how website builders calculate the space between elements, 10 px on each side, you'll get a perfectly accurate 1440 container with 10px margins
I'm following you up till the 1120px container, but you lose me at the part about 10px on each side. Can you explain some more on how you get a 1440 container?
Since in css every column has a space AROUND it, you get a 1140px container by setting the column width to 75px and gutters to 20px. It's going to show up as a 1120px container in figma, but notice that there is no space before the first column and no space after the last column. In web, you have a 10px padding around them so your container width will actually be 1140px. Figma just trims the outer padding.
Hey Tim! When I am designed a card, the height of the card is 332px which is not divisible by 8. Do you recommend stretching my card to 336px so that it is divisible by 8 & perfectly aligns with the rows grid. There are few elements with height that is not divisible 8. So should I keep in mind that in future I have to design elements with height divisible by 8? Waiting for your reply
I really love the pattern of your explanation and how simple it is.. But please if i may ask... 1. How do you zoom in so close to the layout grid? and 2. How were you able to make only the grid visible at some points? i.e clearing out figma design components
i wanna know one thing, as a developer, when i get a design like this, should i declare a 12columns grid and work with it, or should i jst declare grids for each section differently and declare how much columns and rows i need depending on the content of the section ?
Great Content bro keep it up, can't wait for a full landing page design start to finish following to guidelines you mentioned. one question tho. on 06:22 why did you choose 30px for the margin. how did you come up with the number? can you elaborate please?. cheers again
Damn! another useful content dude thanks a lot 🤩btw one suggestion I wanted to share that I think this is very useful and essential points for beginners that in 8pt grid text style with its font size and line height.. much confused on how many text style to use and how to calculate the light height of the font? this points needed to cover in tuts videos
@@TimGabe You're most welcome so kind person Tim, I'm so glad to feel my suggestions coz I personally suggested to many other YTvr's to cover this topic no one responded but you felt my suggestions point😇and Yeah! I'm always there to support you and get the new useful and useful points the one who don't cover 🤩
Love it! A quick questions: why do you set up 20px gutter for columns? Like, when we create 3 cards within 12 columns, the space between each card is 20px. But we want follow the 8pt grid system, which means we want the space between each card is 24px or 32px. May I know how to handle this? Thank you!
I think the setup for iPad Pro 11"is perfect, 16px gutter, 32px margin. But for the mobile, the setup is 12px margin, 12pc gutter. I know we don't need make all the cards or containers to follow 8pt grid system, but how about the space between each card? I have some confusion here when I'm create grid system in my design doc.
hey Jin! I get your confusion and my simplest answer would be: don't overthink it in this case. if you feel like being consistent with the 8pt grid for the column gutters, then be consistent with it. in the end, the 8pt grid is there to help you (and devs/designers) reduce confusion around your spacing. 😃
Link to Figma file: www.figma.com/file/a1CERaSdsmQAOHiuc7EcdC/Grids-%26-Columns?node-id=0%3A1&t=sghAFU2WQf2PyMBt-1 ♥️
this is the first 'no-bullsh*t' video on grids that I am seeing on YT. Thanks for keeping the world sane Tim!
that's so cool to hear. thank you so much!
Agreed
They are the best tutorials on TH-cam. They solve all your doubts better than others.
this makes me happy. encouraging words like this is the best!
I'm thrilled to have started using Figma, and even more delighted to have discovered your channel ❤
delighted that I can teach you stuff!! 😃💜
Very clearly and concisely explained with no fluff or filler - Amazing vid thanks!
that's so cool to hear since it's exactly the way I want the videos to be perceived. thanks a lot 🙏😃
Tim, I would say one word : Thanks!
thank you for commenting, youssef!!
Thank you, it was really valuable and so clear to understand. Don't need any other videos to watch anymore.
that's great to hear, thank you for the comment!! 😃
omg thank you so much you literally saved my life, my adobe suddenly stopped working and i was so clueless about how to make these grids in figma THANK YOU
This information is pure gold! So valuable, thanks again Tim, you're the best teacher. Chao! :D
thank you so much for the continuous encouragement, Andrés 🥳 deeply appreciated!! 🙏
very detailed explanation, keep consistently making content like this
will do my best! thanks again Daffa 😃🙌
You’re one the best people on TH-cam man really appreciate your effort.
that really means something to me, Ali.
thanks for these super kind words 🤩🙌
Our guy deserves more subscribers!
really appreciate that, my friend 🙏
As a developer I love this video, thank you for your content, I'm learning English so excuse me if I don't wrote it well
that's amazing to hear, sandro!
Really helpful!! Before I was putting the actual grid setting on which always bothered me because the grid doesn't match the stretch 12 columns. the 12 columns in an 1140 frame makes sense and the style has the 8 rows, but do you do them separately when you're using a larger screen, like a 1440?
Thank you so much for sharing your knowledge🌼
happy to share it, Neha!! 🥳
Wow you're a miracle worker! You packed so much knowledge in a such an intuitive and concise manner. Thank you!
That synthwave feeling 💪💪 super bra video Tim. Tack så jättemycket!
nothing beats the synth waves! 🥳 och tack själv för den snälla kommentaren, Michael!! 😃
Great Video. Did I miss what breakpoints in pixels you are using?
Thank you so much for this video! I was wondering though... isn't it annoying to break the multiplier of 8 rule for mobile gutters and margins?
Premium content, everything explained in easy to digest way,good work 👌
thank you so much, pp!! deeply appreciated 🤩
Nice one Tim, I enjoyed this as usual👏🏻
so glad you liked it Ikenna! thanks for support, as usual 🤩
@@TimGabe you are welcome Tim😃
Hi there, how did you decide the margin for columns? I'm not sure why 1140 is 30px and 960 is 120px.
here I just tweak the margins to make the container (the columns) a specific width - so the value depends on what width I want ☺️😃
@@TimGabe Thanks for the reply :)
me too. i'm stuck in that part
@@decheka6158 he was using a 1200px wide frame, so he needed 30px margin on each side (1200-60) to get 1140, and 120px margin on each side (1200-240) to get 960. hope that helped:)
Been watching your videos for a few days and they are really good and straight to the point compared to many other folks out there. Leaving this appreciation comment here for you! Keep up the excellent work❤
that’s very nice of you, Rahull!! makes me happy to read comments like these. thanks a lot! 💜
6:03 Hi. Is having 20px gutters not an issue if one intends to use an 8pt grid system? I thought the width of margins, columns and gutters should be a multiple of 8. For example, there is an article, one among many, that suggests (12 columns × 72px) + (12 gutters × 24px) = 1152px container.
Of course I understand that there isn't one grid for all designers but...
Here are my latest thoughts :
- Margins size doesn't have to be a multiple of 8 since one is only interested in the container's width. Won't really break any rhythm. The only thing important is that it looks good on a 1280px screen. Any container width below 1200px could be good.
- Gutters should be a multiple of 8 since they determine the spacing between most of our elements (and yet you go with 20px. That's not a multiple of 8 but it's a multiple of 4 so maybe that's why you " tolerate " it.)
- Columns. Well, I don't really know anymore. I thought it was important since it determines the size of elements (in order for it to be a multiple of 8) but I'm not so sure now.
Conclusion: I kind of felt that the size of the gutters was the most important but I don't really know anymore (you're not using a multiple of 8 😁). Is there any of those things (margins, gutters, columns) that must absolutely be a multiple of 8 if you intend to use an 8pt grid system or not 😵💫 ?
I would say that you are never forced to do anything as a designer 😃
the 4/8 pt grid system is mostly there for your own (and your developers') sanity. if you and your devs know that your buttons will be either 40 or 48 px tall, then they'll immediately understand that 46px is probably not the right measurement in an erroneous design.
so, use it as a guideline to help you stay consistent and structured -- but don't make it a stressful thing. 😃
Great video!. One question, What about the menu? elements are outside the container column grid, is that ok?
The best video about this topic! Really useful, thank you;)
thank you for the kind comment, Irina! 🤩
Really Well Explained
8:23
actually I cried... 😭
Thank you for mentioning that I really appreciate...
I am a fullstack developer. I know a little bit figma but not pro like you. and I learn lots of the things from you Thank you so much
haha, happy it resonated 🙏😅
thank you for the comment!!
Loved it and love your channel ! Please make more !
so cool to hear, Joanna! thank you 🥳
Thanks for the video. Can I ask whether I should use both grids at the same time in order to get beautiful compositions on my website? e.g both 8px grid and 12 col grid. how about the type, should it always be a placed on the grid?
Thank you for this video, I love it.
happy you like it NicePic ☺️🙌
Starting to understand, Cheers! I do have some questions:
- you mention that the margin is 30px if the container width is 1140px but why is that ? is this arbitrary ? if not, how do we calculate this.
- why are we using an 8 point grid system when the vertical columns don't adhere to it ?
Thank you Tim for an amazing tutorial.❤
Do all the data in this apply for client platform based design as well, or is it more of web based format? Really appreciate the pacing, helps a lot!
I am having trouble with my container size on the desktop breakpoint...with the responsive grids, how can I ensure my overall container size doesn't exceed a certain width? I am designing at a 1440px screen size, but for users on large desktop monitors, the design gets way too wide when I have everything fit to the responsive grid. Is there a way to limit it? Any help would be hugely appreciated.
I’m having the same problem! I can’t find a solution online 😢
Thank you, Tim! For sharing your resources and knowledge. Be healthy and successful! 👍🏻💪🏻
ROWS:
Gutter: 8px / Count: 100 / Type: Top / Height: 8px
COLUMNS:
Desktop: Gutter: 20px / Count: 12 / Type: Stretch / Margin: Depends on your container (usually 1440px frame)
Tablet: Gutter: 16px / Count: 8 / Type: Stretch / Margin: 32px (834px frame)
Mobile: Gutter: 16px / Count: 8 / Type: Stretch / Margin: 32px (375px frame)
Why did you change all the mobile values?
Thank you for this guide. It helps a lot for newbie like me
appreciate you supporting, my friend 🤩
This was incredibly helpful! Thank you so much!
New subscriber alert and I’m here to say!
Just what I needed. Thanks Tim 💯
Thank you so much for this!!! Gonna remember the standard measurements by heart in my future prototypes :)
glad you found it useful, Doto! 😃
What a great video, but there is one thing I don't understand at 8:19 where you were saying that elements must not be at the middle of a column or the developer will cry, while you are placing the "Sign up" button in a place where it is not aligned to anything! is it because it is a component with "Read more" button or what?!
as long as the container of the two buttons stick to a column it's fine!
Amazing explanation♥
appreciate the support, Radhika 💜
Hi Tim, thanks for explaining both the horizontal and vertical elements of the grid in addition to the 8pt grid system. I have observed that most senior designers use 1120 px of the container with 32 px of gutter in the stretch mode for desktops, so is it a kind of the best industry practice or just a matter of choice? Thanks!
I think this is very much a matter of visual taste as long as you're not sacrificing UX! 😃 and following the "standard" is usually a good way to go if you want to optimise for usability!
thank you. this video helped me a lot
that's great to hear!!
Informative video:).But I am stuck at 8:20 sec where he said to not go by covering half columns.Why is it so?Can someone explain
for containers (your outer boxes) you want to try to stay within full columns as much as you can as that makes it easier for developers if they're using traditional column frameworks 😃
So what should the margin be when making column Grid, it was a bit confusing at that part? Like you said it depends what my container is going to be, but before I start designing don't I want to set up a Grid already?
When you pick type Stretch, you can adjust the margin to get the container size you want, but isn't this going to change as the screen size changes?
correct, so it’s not ideal with the new auto layout feature in Figma!
Thank you for this, Tim!
This was very helpful, thank you !
happy to help, Calloga! 🤩
Thanks, I descovered somethings new for my self👍
awesome my friend!!
Love your content! Keep up the good work!
thank you so much for the cool comments 🤩
Great vid, very helpful
happy you liked it!! 😃
I love this! Thank you!
happy you liked it, thank you!!
Wow this is amazing.. Should I also use 8pt design system to font size?
i usually use it just because it's easier to remember sizes and for ocd purposes, but in some cases (smaller sizes) it's harder to adhere to!
Thanks! Very helpful and well explained.
appreciate the comment, Santiago! 🥳
Thank you so much for a clear and concise understanding of the grid system!!!
Thank you so much for this video. I was always wondering how to set the margin. I even asked ChatGPT. It said 120. I thought it seems ridiculously large as margin. Your video helps me!!
I have one additional question. So you told us how to set columns for different devices, but how's about rows, do we always set them as 100 for tablets and phones as well?
Excellent Video♥ Love how easily you explain and show things.
thanks Asim, I really appreciate it man! 🙌🤩💜
@@TimGabe Could you please make a video on iOS Design? Like designing screens using Human Interface Guidelines
Thank you so much for the details responsive Grids lesson🤍
happy to be of help!! 🤩
Amazing video explanation! Thank you very match mate! I downloaded the figma files also, really thank you for these too. One question: The rows, remain the same to all sizes (Dektop, Tablet, Mobile)? For example I did put - 100 rows - Type: Top - Height: 8px - Gutter: 8px, I do the same to Tablet and Mobile or I have to change it like did with the columns? Thanks again :D
Great Content 💡, Easily understood 💯... I'm subscribing right away👌
very glad you liked it, Samuel 🤩🙌 happy to have you as a subscriber!
great video for the beginner who wants to learn ui ux
@Tim just to confirm that you are using 1200px wide frame, and not 1440px, where you set the margin to be 30 px to use a 1140 px container?
exactly George! so you would have to tweak this depending on the size of your frame 🤩
Hi! Love your videos!
You explain that a 1140px container should have a 30px margin and 960px a 120px margin. How did you calculate that? I tried to Google these numbers as I thought they were standard measurements. Can you please elaborate this? :) Thank you!
hey Jakob! the margins in this case depend on the width of your container - the wider it is, the less margin you need 😃
But how did you calculate that specific margin amount? Because 30 is neither divisible by 4 or 8.@@TimGabe
When it says it is responsive, does the spacing between elements (cards, buttons, title and text, etc.) remain the same size or vary proportionally?
usually, some elements will have to change size with the device width because of the size constraints!
@@TimGabe , thanks for the answer!
Thanks very helpful video!
thank you for the comment, Ernesto! ☺️
in 3:57 mins. how did you made the zoom possible?
in 3:25 mins.. how did you make only the frame visible?
Thanks
hey Nubi! 😃
if we're talking about the same zoom, it's done in Final Cut Pro X when editing the video in post production. you can zoom in Figma by hitting "Z" and selecting a specific area on your canvas!
I hide the Figma UI by hitting CMD/CTRL and the ":" key 🥳
@@TimGabe Thank you tim
seen the video today, found it a bit technical at time stamp 6:00 (adjusting margin for diff sized container), will see it again😇
yes, I've gotten a lot of comments regarding this one 🙏 feel free to check the comment field and see if you'll find an answer to your question, Muhammad 😃
Hey! Thank for a useful content:) I have a question regarding the design example that you've shown on 7:05 sec. I've noticed the buttons are not "nested" in the columns. For example, the "Read more" button ends on gutter, not in the column. Is that technically correct?
thank you for commenting, Liana 😊 buttons are one of the elements where you don't generally care about them covering (or not covering) X amount of columns -- you just want them to align nicely with other relevant content on your page. 👌
note though that in some cases for mobile designs, you'll see that a button covers all columns (i.e. 100% of the width).
@@TimGabe thank you very much! Love your content
Pretty cool man !
happy you liked it!!
great video 👍
thanks a lot, friend!!
I am so glad to find your channel. So concise and clear on the videos.
My question is how do you decide the width of each column and the gutter, is it based on the 8px or 4px system?
happy you like it, my friend!
the width of the columns and gutters isn't something I care about (generally) -- I usually just care about the width of the whole container 😃
Thanks for such an informative video👍
Hello I have a quick question is it valid or not to have different gutter sizes for different screens for the same app?
can u please tell me about the road map if i want to make design agency regrding to ui ux designing what track should i follow .... or if u have any video regarding this pleaselet me know
don't have any content on this, sorry friend!
I'm completely new to the world of web design, so I had no idea how to auto-layout all your stuff. I now have an almost finished website with cool animations. but when I press autolayout it often deletes my front layers such as a black image that I use as a transition. Is there a way I can fix my project or do I have to start over
Oh my god. This was the best comprehensive explanation of grid systems! Thank you so much, Tim! Also, I wanted to add I think it’s 4 or 8pt because typically device screen sizes are divided by 4 and 8, right?
wow, that's so cool to hear 😃 thank you!!
regarding the reason for it being 4 or 8, I really don't know... Apple for example tend to do things like 393px, 375px, etc. for their devices. 😅
Hi! I've created styles of the rows and columns like you've shown in this video. However, I'm unable to apply both row and column styles on my frame (I'm using Macbook Pro 14"). I'm only able to apply one of the styles created. Could you please help me out? Thanks!
are you creating styles out of them both? I think you can only have one style applied at once, but if you break them into just normal grids (no styles) it should work ☺️
Love it! To the point and simplified.
happy you liked it, Sudipto! 🥳
use the center option with 75 px coulmn width, this gives you 1120px container. if you add the 10px space on each side that is by default how website builders calculate the space between elements, 10 px on each side, you'll get a perfectly accurate 1440 container with 10px margins
I'm following you up till the 1120px container, but you lose me at the part about 10px on each side. Can you explain some more on how you get a 1440 container?
are you referring to 10px gutters, Sam? 😊
Since in css every column has a space AROUND it, you get a 1140px container by setting the column width to 75px and gutters to 20px. It's going to show up as a 1120px container in figma, but notice that there is no space before the first column and no space after the last column. In web, you have a 10px padding around them so your container width will actually be 1140px. Figma just trims the outer padding.
Annette
Kudos for this content!
Great class, man.
Hi, what size you usually work to design for desktop?
it really depends on what you're designing, but I usually use a 1440px wide frame with a container/grid of approximately 1140px 😃
@@TimGabe Perfect! thanks i try with that now!
Nice video! Thank you for your help
always happy to hear it was helpful! thank you!!
Hey Tim! When I am designed a card, the height of the card is 332px which is not divisible by 8. Do you recommend stretching my card to 336px so that it is divisible by 8 & perfectly aligns with the rows grid. There are few elements with height that is not divisible 8. So should I keep in mind that in future I have to design elements with height divisible by 8? Waiting for your reply
hey my friend!! I personally don't care too much about 4 or 8pt grids for heights of things since that'll get complicated real fast. 😃
@@TimGabe thanks for the clarification
I really love the pattern of your explanation and how simple it is..
But please if i may ask...
1. How do you zoom in so close to the layout grid?
and
2. How were you able to make only the grid visible at some points? i.e clearing out figma design components
thanks a lot for commenting, Nubi. 😃 I answered your questions in the other comment!
@@TimGabe Thanks. this means alot to me.
Neat explanation beo ❤
thank you! 💜
For example, your Sign up button it's not aligned with the grid columns. Is it also by design?
the box that contains the buttons is, so you could see it as the parent (the box) still making sure that we're aligning to the grid!
Where do you find the sketch images? :)
can't remember exactly, but it was from a Figma Community file!
Solid video. Do row measurements stay the same on tablet and mobile or similarly to columns measurements decrease slightly?
i wanna know one thing, as a developer, when i get a design like this, should i declare a 12columns grid and work with it, or should i jst declare grids for each section differently and declare how much columns and rows i need depending on the content of the section ?
Great Content bro keep it up, can't wait for a full landing page design start to finish following to guidelines you mentioned. one question tho. on 06:22 why did you choose 30px for the margin.
how did you come up with the number? can you elaborate please?. cheers again
hey Osher ☺️ happy you like the content!!
30px is what’s needed to have the container be 1140px in this case 👍
@@TimGabe Thank you for the quick reply appreciate. so basically this is the remaining area on a 1440px viewport or any other viewport?
What about landscape orientation for tablets and mobile?
Nice one!
thank you for the continuous support, my friend 🙏🥳
Super helpful! Thanks :)
Damn! another useful content dude thanks a lot 🤩btw one suggestion I wanted to share that I think this is very useful and essential points for beginners that in 8pt grid text style with its font size and line height.. much confused on how many text style to use and how to calculate the light height of the font? this points needed to cover in tuts videos
excellent video suggestion! I’ll look into this, Shivu ☺️ and thanks for always supporting 🤩
@@TimGabe You're most welcome so kind person Tim, I'm so glad to feel my suggestions coz I personally suggested to many other YTvr's to cover this topic no one responded but you felt my suggestions point😇and Yeah! I'm always there to support you and get the new useful and useful points the one who don't cover 🤩
Love it! A quick questions: why do you set up 20px gutter for columns? Like, when we create 3 cards within 12 columns, the space between each card is 20px. But we want follow the 8pt grid system, which means we want the space between each card is 24px or 32px. May I know how to handle this? Thank you!
I think the setup for iPad Pro 11"is perfect, 16px gutter, 32px margin. But for the mobile, the setup is 12px margin, 12pc gutter. I know we don't need make all the cards or containers to follow 8pt grid system, but how about the space between each card? I have some confusion here when I'm create grid system in my design doc.
hey Jin! I get your confusion and my simplest answer would be: don't overthink it in this case. if you feel like being consistent with the 8pt grid for the column gutters, then be consistent with it.
in the end, the 8pt grid is there to help you (and devs/designers) reduce confusion around your spacing. 😃
Thank YOu Sir
thanks for the comment, muhammad!
Are these rules valid for emails also?
email design? i'm actually not sure, haven't designed a lot of emails!