Why and How to use a Spacing System for Web Design and Apps

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

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

50% 1

Why and How to use a Spacing System for Web Design and Apps
Figma community file
www.figma.com/community/file/...
TIMESTAMPS
00:00 Intro
00:17 Why use a spacing system
01:06 Dev handover
04:43 Component example
07:54 Align with grid
08:37 4pt grid
08:50 Hide spacers
Get my Free Figma component library based on Shadcn/UI and Tailwind CSS
soloui.com
Visit my Store - Free and Premium Design Templates
royquilor.lemonsqueezy.com/
Sign up for Figma's Professional Plan
psxid.figma.com/ol7m4lwlsljq-...
If you are a beginner, developer or designer who wants to improve their design, the best thing is to practise daily, weekly, share it and get feedback.
👋 CONNECT
Website: www.quilor.com
Instagram: / royquilor
Dribbble: www.dribbble.com/royquilor
Twitter: / royquilor
#Figma #uidesign #ui

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

30 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@salemmohammad2701 3 месяца назад

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

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

@salemmohammad2701 3 месяца назад

@@ReadyDesignerOne So there are no references provide recommended values for spacing in the various sections in the page?

@ReadyDesignerOne 3 месяца назад

You mean a resource on the 4pt system?

@salemmohammad2701 3 месяца назад

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

@ReadyDesignerOne 3 месяца назад

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

@prr7275 2 года назад

Nice video and thanks for explaining! I did not find too many spacer videos...thanks again!

@ReadyDesignerOne 2 года назад

Thanks pr, glad it helps

@Ioannnify 2 года назад

Another great tutorial with great tips & tricks, thanks Roy!!

@ReadyDesignerOne 2 года назад

Glad it's helpful 🙏

@aname206 2 года назад

This changed everything. Thank you so much. Subscribed.

@ReadyDesignerOne 2 года назад

Thanks Tewelde. Glad it helped and welcome 🙂

@badmusroushid9045 Год назад

I totally I am subscribing. Thought I had known everything about spacers, just learnt how to fix without disrupting auto layout. Great watch man

@ReadyDesignerOne Год назад

Welcome to the channel Badmus, glad I can help

@victorbruce800 2 года назад

Learned a new trick with the holding of the space so that the auto layout is not affected 👍.

@ReadyDesignerOne 2 года назад

Ha yeah, it's pretty cool 😂

@joyceadeleke4513 Год назад

Same. 😁

@ReadyDesignerOne Год назад

Nice

@thedamme6526 5 месяцев назад

Glad I bumped into this video. Really helpful

@ReadyDesignerOne 5 месяцев назад

Your welcome. You can put those values in variables too

@urunspecialbabe Год назад

I'm quite a beginner, and this vid has helped me so much with my project! Thank u a lot

@ReadyDesignerOne Год назад

Glad it helped 👍

@polarbyrd23 Год назад

So useful!!! Thank you so very much 🙏

@ReadyDesignerOne Год назад

Your welcome

@uxmato Год назад

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!

@ReadyDesignerOne Год назад

Thanks, glad the video helped. Planning to do part 2

@mdbdrrhm 2 месяца назад

I looked over the figma file, and the spacing would be easy for a developer to implement it into code. Thanks for sharing.

@ReadyDesignerOne 2 месяца назад

Your welcome. Have you tried variables? Another good way to store values in tokens.

@figmintutorials Год назад

Thanks man! Great content

@ReadyDesignerOne Год назад

Thanks for watching

@babatundeodeyemi8255 2 года назад

Roy is a life saver !

@ReadyDesignerOne 2 года назад

Thanks for watching Babatunde

@holisticlivingwiththatdada9732 2 года назад

Awesome tutorial for beginners

@ReadyDesignerOne 2 года назад

Hello there, glad it's helpful

@akeemolushola9398 2 года назад

Thanks very much for this tutorial, Footnote: There is a plugin on Figma called Space Manager which help to toggle space easily.

@ReadyDesignerOne 2 года назад

Hi Akeem, thanks for the tip. I will check it out

@1WillyDAVID 2 года назад

thanks bro, really useful

@ReadyDesignerOne 2 года назад

Thanks William, glad it's helpful

@scottdamien8395 2 года назад

nice work!

@ReadyDesignerOne 2 года назад

Thanks Scott 🙏

@chriscarton4728 2 месяца назад

thanks it's an interesting subject

@ReadyDesignerOne 2 месяца назад

Your welcome. Have you tried variables?

@theadongo 2 года назад

I'm currently using this tip in one of the project where I work.

@ReadyDesignerOne 2 года назад

Nice. Keeps things consistent and don't waste brain power 😅

@EvanBlack11 Год назад

My left ear luv this video.

@ReadyDesignerOne Год назад

Thanks Evan

@kalahari8295 2 года назад

Finally found what I was looking for 😤 RU-vid needs to fix it's algorithm ❤️

@ReadyDesignerOne 2 года назад

Thanks Emmanuel, glad it's helpful. How did you come across the video?

@kalahari8295 2 года назад

@@ReadyDesignerOne a lil more scrolling than expected and clicking, to checkout bits of the full videos

@mrajax_0101 2 года назад

Hey, i did research and found that 4pt grid is giving us more flexibility thanks

@ReadyDesignerOne 2 года назад

Nice. Very good for mobile apps too 👍

@mrajax_0101 2 года назад

@@ReadyDesignerOne and for desktop?

@ReadyDesignerOne 2 года назад

@@mrajax_0101 yes

@bl7937 Год назад

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.

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

Finally, a guide that isn't some corny overenthusiastic cringe! Thank you so much!

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

Your welcome

@preciousofortube7182 Год назад

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.

@ReadyDesignerOne Год назад

Hi Precious, yes you can delete those. I leave them just to show the process, where i duplicate frames.

@rachaeln2038 Год назад

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

@ReadyDesignerOne Год назад

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.

@philippain Год назад

I was thinking that’s what this vid will be all about,seems not too many vids like that on RU-vid.

@ReadyDesignerOne Год назад

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?

@mrajax_0101 2 года назад

Which One is Better 8pt grid or 4pt grid?

@ReadyDesignerOne 2 года назад

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

@DimitriiRusev 2 года назад

So actually I didn’t understand where to use 40 and where to use 16? If there is any system?

@ReadyDesignerOne 2 года назад

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

@DimitriiRusev 2 года назад

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

@ReadyDesignerOne 2 года назад

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

@DimitriiRusev 2 года назад

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

@ReadyDesignerOne 2 года назад

Cool. Here's a video I did on case study ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-RTOd4qzFZPQ.html