Great! Why did you choose 80, 40, and 16 for spacing on this card? I mean is there a reference you follow to determine which values you will use for spacing in the various layouts or sections like Hero, Features, Sign up form, Newsletter, etc.?
@@ReadyDesignerOne I mean when a designer designs a web page he determines what specific values for paddings, margins, and gaps will be used within sections like Hero, Features, etc. So I am wondering if there are references that define the typical values for those spaces within the various sections on the page. Or maybe if you have a comprehensive spacing system that you apply for any project you work on.
@salemmohammad2701 ah I see. I look at inspiration galleries and live websites. You can see the spacing they use. Godly.website is one I use. Then find a category you like and then you can take a screenshot paste in figma and try to replicate it. You will start to notice that they use a 4 point system. Such as the spacing between sections and elements like buttons. When you replicate lots of websites, you will build some muscle memory.
How do you determine which spacing to use in between elements? Is this initially established by just seeing roughly how it looks on a page and then matching it up to the spacing grid? Hope I'm making sense
Hi Rachael, yes you can do that. When you practise it enough, using the system, you will start to remember the values. You can experiment and develop your eye. If you struggle to decide, find some reference apps or sites that you like.
Please let me know what would be helpful? A walkthrough of going through a inspiration design and then using the spacing values to closely or copy the design for practise?
Hi Dmitrii, thanks for your comment. It's mainly for things like margin, padding and gaps. You could also show them as small spacers so developers could see the values
@@ReadyDesignerOne yes I understood for what they are needed. But me as a beginner. How to understand the spacing system for example between H2 H3 and basic text. Between basic text and H3 I should use 16px space but between h2 and h3 24px?) this what I can’t understand)
I understand now. Thanks for clarifying. Good question. I need to plan a video on this. You can experiment with the system and try the values. Anything else that you need to know, please let me know
Cool, thanks for this! I would use the Absolute position feature for the spacing elements. You can still group/frame them after placing, it remains absolute. That way, each spacing element can still be part of the auto-layout group which I consider very handy. Also, thanks a lot for the "hold Space" tip! It even works when you're trying to move something big that's clipped in a frame and you don't want it to pop out!
I'm confused, why are you not aligning the "text" on the baseline grid 8px? I noticed that the outline of your content is but not the actual text that should be aligned to the baseline.
Do we leave the remaining textboxes that we didn't component, also what are the extra text boxes(where we have the 16 spacings) for? Saw you didn't delete them but left them there.
Great! Why did you choose 80, 40, and 16 for spacing on this card? I mean is there a reference you follow to determine which values you will use for spacing in the various layouts or sections like Hero, Features, Sign up form, Newsletter, etc.?
Thanks, I use the 4 PT system. In this case, I just used certain values for this component. so you can go 20, 32, 72. The values will be consistent
@@ReadyDesignerOne
So there are no references provide recommended values for spacing in the various sections in the page?
You mean a resource on the 4pt system?
@@ReadyDesignerOne I mean when a designer designs a web page he determines what specific values for paddings, margins, and gaps will be used within sections like Hero, Features, etc.
So I am wondering if there are references that define the typical values for those spaces within the various sections on the page. Or maybe if you have a comprehensive spacing system that you apply for any project you work on.
@salemmohammad2701 ah I see. I look at inspiration galleries and live websites. You can see the spacing they use. Godly.website is one I use. Then find a category you like and then you can take a screenshot paste in figma and try to replicate it. You will start to notice that they use a 4 point system. Such as the spacing between sections and elements like buttons. When you replicate lots of websites, you will build some muscle memory.
This changed everything. Thank you so much. Subscribed.
Thanks Tewelde. Glad it helped and welcome 🙂
thanks it's an interesting subject
Your welcome. Have you tried variables?
Thanks man! Great content
Thanks for watching
Finally, a guide that isn't some corny overenthusiastic cringe! Thank you so much!
Your welcome
Learned a new trick with the holding of the space so that the auto layout is not affected 👍.
Ha yeah, it's pretty cool 😂
Same. 😁
Nice
How do you determine which spacing to use in between elements? Is this initially established by just seeing roughly how it looks on a page and then matching it up to the spacing grid? Hope I'm making sense
Hi Rachael, yes you can do that. When you practise it enough, using the system, you will start to remember the values. You can experiment and develop your eye. If you struggle to decide, find some reference apps or sites that you like.
I was thinking that’s what this vid will be all about,seems not too many vids like that on TH-cam.
Please let me know what would be helpful? A walkthrough of going through a inspiration design and then using the spacing values to closely or copy the design for practise?
Which One is Better 8pt grid or 4pt grid?
4pt grid will give you more options and fine detail. 8pt grid to start fast. So if you need more detail, go for 4pt. Tailwindcss use 4pt
So actually I didn’t understand where to use 40 and where to use 16? If there is any system?
Hi Dmitrii, thanks for your comment. It's mainly for things like margin, padding and gaps. You could also show them as small spacers so developers could see the values
@@ReadyDesignerOne yes I understood for what they are needed. But me as a beginner. How to understand the spacing system for example between H2 H3 and basic text. Between basic text and H3 I should use 16px space but between h2 and h3 24px?) this what I can’t understand)
I understand now. Thanks for clarifying. Good question. I need to plan a video on this. You can experiment with the system and try the values. Anything else that you need to know, please let me know
@@ReadyDesignerOne oh if you would do video on that will be great. Plus if you can make a video how to prepare case study for portfolio)
Cool. Here's a video I did on case study
th-cam.com/video/RTOd4qzFZPQ/w-d-xo.html
Nice video and thanks for explaining! I did not find too many spacer videos...thanks again!
Thanks pr, glad it helps
Thanks very much for this tutorial,
Footnote: There is a plugin on Figma called Space Manager which help to toggle space easily.
Hi Akeem, thanks for the tip. I will check it out
Super helpful! Thanks so much :) Just subscribed!
Awesome! Thank you!
Cool, thanks for this! I would use the Absolute position feature for the spacing elements. You can still group/frame them after placing, it remains absolute. That way, each spacing element can still be part of the auto-layout group which I consider very handy. Also, thanks a lot for the "hold Space" tip! It even works when you're trying to move something big that's clipped in a frame and you don't want it to pop out!
Thanks, glad the video helped. Planning to do part 2
Hey, i did research and found that 4pt grid is giving us more flexibility thanks
Nice. Very good for mobile apps too 👍
@@ReadyDesignerOne and for desktop?
@@mrajax_0101 yes
I'm confused, why are you not aligning the "text" on the baseline grid 8px? I noticed that the outline of your content is but not the actual text that should be aligned to the baseline.
I'm currently using this tip in one of the project where I work.
Nice. Keeps things consistent and don't waste brain power 😅
Finally found what I was looking for 😤 TH-cam needs to fix it's algorithm ❤️
Thanks Emmanuel, glad it's helpful. How did you come across the video?
@@ReadyDesignerOne a lil more scrolling than expected and clicking, to checkout bits of the full videos
Another great tutorial with great tips & tricks, thanks Roy!!
Glad it's helpful 🙏
I looked over the figma file, and the spacing would be easy for a developer to implement it into code. Thanks for sharing.
Your welcome. Have you tried variables? Another good way to store values in tokens.
Awesome tutorial for beginners
Hello there, glad it's helpful
Do we leave the remaining textboxes that we didn't component, also what are the extra text boxes(where we have the 16 spacings) for? Saw you didn't delete them but left them there.
Hi Precious, yes you can delete those. I leave them just to show the process, where i duplicate frames.
I totally I am subscribing. Thought I had known everything about spacers, just learnt how to fix without disrupting auto layout. Great watch man
Welcome to the channel Badmus, glad I can help
thanks bro, really useful
Thanks William, glad it's helpful
Roy is a life saver !
Thanks for watching Babatunde
Glad I bumped into this video. Really helpful
Your welcome. You can put those values in variables too
nice work!
Thanks Scott 🙏
So useful!!! Thank you so very much 🙏
Your welcome
My left ear luv this video.
Thanks Evan
I'm quite a beginner, and this vid has helped me so much with my project! Thank u a lot
Glad it helped 👍