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

you ever guess what spacing value you should use in your web design or in your apps do you know how much spacing you should use between the heading and the text how much padding you should have around the card should it be nine pixels 12 pixels can take a lot of time and thinking hey youtube i'm roy a ui designer based in the uk why is a spacing system important it's just simply to keep things consistent and you won't have to think what values to use so your team or developers you know that you have a certain spacing system there are two popular spacing systems there is the four point grid or the eight point grid and as a reference the one that i like to use is from tailwind and also this file will be available in the figma community so you can download they actually got the size in rams and pixels and this is very very useful so this is something that you and the team can use copy this resource so command c go to your spacing system and then just paste that and you practically already have a spacing system to use how do you then communicate these spacing values to a developer when you handle for your designs we're going to create some very simple spaces so you can actually show the spacing when you hand off to developers we can hit the t tool we can click we're going to type 16 and what we're going to do is we're going to make this quite small so 12 points into regular and a line height of 12 so it's going to be solid and we are going to turn this into an auto layout so shift a we're going to get rid of all the spacing 0 0 we're going to give it a fixed width and a fixed height of 16 and 16 and if we hit enter to go into the text layer it's got hug and hug okay great and we go back to the frame we just want to center a line and we're going to give this a very simple color and let's say we go in let's say we go slightly red or pink okay great so we've done our very first spacing block and what we're going to do just as a reference we're going to duplicate that we're going to call this our dot base space and it's good practice to create a a base component or a base that you're going to use for all the other components which i'll demonstrate what we're going to do is command d again we're going to make this into a component so command old k we are going to duplicate that hold shift drag that out so this is the journey from creating a very simple block and then we're creating we're doing the naming space base we made it into component and then now we just done an instance of that and then we're gonna wrap this in a new component so command alt and k we're gonna call this space and then we're going to create a variant so hit the plus and this new variant we're going to go up to 24 and then we're just going to keep going so let's say 32 let's say 40 and then the last one i'm just going to jump up to 80 just to save some time okay so here i'm going to go in say 24 i'm going to go in here say 32 and then 40 and then 80. and then what i want to do is to go into each one and actually change the width and height so press enter that will take you to the next layer down and this should be 24 and 24. [Music] okay so things are looking quite messy so what we can do very quickly is hit shift a to put this into an auto layout let's say spacing is 16 okay now we can get rid of what yeah let's put a spacing around of let's say 40 so now we've got a very nicely organized spacing system and the nice thing again about having a base component is rather than making a change to all of these you can go in here you say hey i actually want this to be i want this to be lime right you could do it like that and it does it for all of them rather than you having to go into each one if you're finding value in this video please hit the like button so here is a component and this is a card which has a heading text button an avatar on a testimonial so if we go in if a developer had to look at the spacing values they'd have to go in and say oh okay so there's a spacing of 40 uh and then if i go into this this spacing is 16 if i go into this there's a spacing of 16 if i go into this card all around there's a spacing of 80. right there's a quite a lot of work for them we can visually show this and this could be part of the documentation when you hand over so if i hit shift i i look for space and i'm going to get this very first one and that will put it right into the auto layout however it's affecting the auto layer we don't want it to do that so i'm just going to click and bring it out now the magic is i'm going to actually go up to the very first one i'm going to say 80 and if i just make a quick change if i go right click go to main component default one let's say that is 16 great and then we go back to example so here what i want to do is i want to bring this over here now if you just click and drag it's going to affect the layout but what you have to do is you have to click drag and then hit hold down the spacebar bring it over and you can see here it's not affecting the layout it doesn't snap but it's not affecting the layout which is great so you can just drop that in and you can see on your layers it's just put it on top of that frame so the next thing to do is okay so i'm gonna bring in some more so shift i space so the next one to bring in just click that brought it in there so i'm gonna duplicate that a couple of times and i'm gonna say okay we actually now want the spacing of 40 i'm going to click hold down space and i know the spacing between these is 40. do the same thing for this now how can you actually see that these are lining up well you can go here and you can see right there if i zoom in you can see this line i actually have to go up two spaces and this is where it gets very precise so if i click here you can see the line is perfect i click there the line is perfect if i zoom in again so this one should go down two lines so one two so those are lining up nicely this one as well if i go in you can see there right on the edge if i click on this text layer you can see there right on the edge that is pretty cool okay so another nice thing to do is if i just delete that one so here you can see these spaces and we can we can show them lining up even more by creating a grid but you can't do this in a auto layout you need to do it within a frame so we're going to get these full space and i'm not sure why they're outside the frame but we're going to drag it in what we're going to do is we're going to make this into a frame so select all right click frame selection we're going to go to layout grid and here currently it's a eight point grid so even that is gonna quickly show here that's lining up this is lining up this is lining up four point grid if i just change that to four now we go in and you can see that this is lining up nicely of course if you don't want to show the values you can just we can just go into the frame we can hide that and also in order to hide these we need to hide the main base so if i right click go to main component i'm going to say we actually want to hide it so if i hide it like that it doesn't work so you have to go to zero percent and it's hidden it so now if i go back to the example you can see here is hidden all the spacing values that we put in let me know in the comments what you think about a spacing system and this has just saved me so much time i hope you found this video useful please leave a like leave a comment subscribe hit the bell you

Channel: Ready Designer One

Views: 31,509

Keywords: Why and How to use a Spacing System for Web Design and Apps, figma, figma tutorial, figma design, figma ui design, web design tutorial, figma web design, web design, ui design tutorial, website design, website design tutorial, ui figma, design system figma, design systems ui, design system spacing, spacing figma, figma spacing, how to create spacers on figma, spacing in figma, spacing system figma, spacing in ui design, 8 point grid system figma

Id: O3-apq_SzTY

Length: 9min 38sec (578 seconds)

Published: Thu Oct 28 2021