Creating a Design System - Spacing and Icons

hey guys in this video i'm going to be talking about the grid system and the spacing that we're going to have for our design system and the purpose of this particular video is just to define how things are going to be spaced from each other what their height what the ideal height is going to be let's say if we keep the height fixed of certain elements like buttons or maybe icon buttons or certain things along those lines or maybe even icons right so we're going to go with that and the first thing that we need to do is we need to define what we're going to do here so we can go with one of the determined grid systems like the eight point grid or the four four point grid but there's a lot of debate and i like to keep things flexible rather than restrict ourselves to a particular design system you can go ahead and choose one of those but i would personally prefer using a design system that's going to be inheriting a lot of the values from those but i'm going to create a design system or a grid system for the spacing myself so what we're going to do here is we're basically just going to go ahead and we're going to create a component here and this component is just going to define how that grid system particularly is laid out so i'm going to create a frame here we're just going to give it a slight color so let's just go ahead and give it this one and probably create an auto layout over it and i'm going to say 2 pixels so this is imagine this is going to be 2 pixels just going to place it above and let's move it at the bottom maybe center it and let's reduce this font size to something light and probably choose the smallest variation regular have it above so we're gonna have a two pixel option and again just really important to point out is the grid system or the spacing that we're defining here isn't necessarily gonna be created into components or anything you're not gonna use them these are just for your visual reference and the reference for developers as to how things are going to be positioned and spaced or let's say given a fixed height or a fixed width off so we're going to have 2 pixels and let me just go ahead and create an auto layout container outside of it as well and it's already horizontal so let's just go ahead and remove the padding i'm going to go here i'm going to say this is going to be a component and i'm just creating a component so we can have something consistent but we probably don't even need to create a component i think so let's just go ahead and remove that and say this is going to be two pixels then we're gonna have let me just give some spacing in between them two pixels there then we're gonna have four pixels then this is going to be eight this is going to be 12 this is going to be 16 this is going to be 20 and then 24 and then 32 and then 40 and then 48 and then 64. we can go 56 if we want but i think 60 well maybe 56 is fine 56 64 80 and then yeah i think 18 is probably fine and then let's just go ahead and stick with that so this is gonna be two this is going to be four 8 and let's probably just write the values out first 8 this is 12 pixels 16 pixels 20 pixels 24 pixels 32 pixels 40 pixels 48 and then 56 pixels this is 64 pixels and this can be 80 pixels so i think that probably is fine and now let's go ahead and probably tweak some of these as well so 12 16 20 24 32 40 48 56 64 and then 80. so the purpose of defining is this just to let us know what the grid system is going to look like and what the spacing is going to be in between elements on and so forth and what we want to stick with so we're not going to give spacing that's going to be let's say 3 pixels or 5 pixels or 10 pixels or anything along those lines we're going to stick with 2 4 8 12 16 and as you can see we have the multiples of 4 here for the most part i've just given a 2 pixel because i think there are some cases in which we need a spacing of two pixels in between elements so that's an anomaly here but so we have the multiples of four here and then after 24 pixels we just go with the multiples of eight so we have 32 40 48 56 64. and then after 64 we can have if we want we can have 72 but it's not necessarily needed i don't think you're gonna really need a lot of values that are going to even scale up to that obviously when you have let's say spacing in between let's say section so on and so forth and maybe the spacing between a section is let's say 160. so i don't have to define 160 here right because 160 is just 80 multiplied by 2 so i don't necessarily need to define every single um iteration here but just to give you a reference of what this is going to look like one thing we're going to do after that is we're also going to include our icons so let's just go ahead and create an icons page i'm going to say icons basically just going to copy this thing here and then rename this to icons then we have our icons and you can add whatever text you want here i'm not necessarily going ahead and doing that and now you can go to your community so i'm gonna go to my community basically let me just again resize this i'm gonna go home and you basically need to search for hero icons and you're going to get a bunch of options you can basically choose this one and duplicate the file so once you have the file duplicated it's just going to open up and you can use this particular file as a library as well but i would recommend just going ahead and actually importing this in your design system so i'm just gonna unlock the information stuff and i'm gonna basically delete this rectangle i'm gonna go ahead put all of this in a frame copy it and then go here and then paste it and here we have our hero icons that are going to be included within the project so now as an example if i want to access the mail icon i can say shift i search for mail and as you can see we have the hero icons here we have the solid variation as well and the default variation as well and now if you go ahead and let's say if i use this anywhere i can basically see all of the outline icon i can see some of the solid icons as well and i can search for them here as well so as an example if i wanted to search for home i can see that i have the home regular or that i have the home solid and it's basically going to be very easy to access them so you can probably go ahead and start doing it like that one thing that i do note here is that the icons in the solid variation are of a different size than the icons in the uh outline variation and that's probably okay like if we actually encounter a problem what we can do is we can actually select all of these icons and uh change the size but i don't think that's going to be needed necessarily and i would personally prefer if you go with let's say the solid variation stick with the solid variation if you go with the outlined variation i would prefer you stick with the outline variation because uh there is a stark difference between these two different types of icons so i definitely don't want to use both of them and for that particular reason i'm actually just going to go ahead let me just go ahead and ungroup this thing and for that specific reason i'm actually going to remove all of these solid icons because personally i don't think i'm going to need them so i'm going to go here i'm going to select all of them i'm basically going to remove ungroup this as well and i'm going to remove the whole solid sidebar now we have all of these icons i'm gonna again put them in a frame copy them and instead of let's say this frame i'm just gonna go ahead and save paste to replace and now we have all the icons here now in order to better format the icons we can obviously go ahead and we can arrange them in a row and in order to do that like you can actually go to a con you can install a coin uh quantizer plugin and in this plugin what it actually allows you to do it actually allows you to distribute elements uh within certain columns as an example if i just do let's say 230 columns it's going to have 230 columns that's basically going to arrange every icon in a singular column and it's not going to have any rows currently it has let's say one two three four five six seven eight nine ten it has ten rows uh oh sorry it has ten columns and then it has different rows based on that so what i want to do for now is i want to say that i want to have let's say 20 columns so if i do 20 columns it's going to appear like this i can go ahead to the plugin again i want to say okay 20 columns are maybe a bit too much let's try 16 columns and as you can see i think 16 columns looks fine but i can actually run the plug-in again instead of 16 i can say 18 columns maybe or maybe i think 17 columns or 17 columns is probably going to be okay for our particular use case and then obviously you can configure let's say the sizing as well one thing i want to do here i want to just go ahead and actually change this to an auto layout i'm going to say auto in between them center the content here and basically just gonna say that it's gonna expand till the icons just so it looks good so i think this looks fine i'm gonna expand this text as well we have our icons i think these icons look good and then obviously you can start using them so that's going to be pretty much it for this video do subscribe to hit the bell icon and in the next video we'll actually get started with some of our components i think a lot of you have requested or are really curious about the button components so we'll actually get started with the button components but definitely let me know if there's any other component that you'd like to see in the next video so that's gonna be pretty much it take care bye

Channel: AM Design

Views: 269

Keywords: design system, figma, figma basics, figma design, figma design system, figma tutorial, figma tutorial for beginners, figma ui design, figma web design, ui design, ui design system, ui design tutorial, ui design tutorial for beginners, user interface design, ux design, ux design tutorial for beginners, web design, yt:cc=on, spacing, icons, asaad mahmood, asaadmahmood

Id: QVHh7jdiF9M

Length: 10min 28sec (628 seconds)

Published: Tue Nov 30 2021