Create a Responsive Grid System for Web & UI Design | Figma Tutorial

in this video I'm gonna show you how to quickly and easily create a responsive grid system for your UI designs in figma and if you watch this video all the way through I'll share some tips with you on how to use the Grid in your projects properly so let's dive in alright here in figma first we need to create a frame so I'm going to hit a on my keyboard and from these pre-built frames I'm gonna select desktop because when it comes to creating a grid system basically we need to have three different frames one for desktop one for tablet and one for mobile right all right now let's create the other frames we need I'm gonna hit a on my keyboard now we need one tablet as well for the tablet I'm gonna go with iPad Mini this one just like this and we need one for mobile as well so I'm gonna go to phone and I'm gonna pick iPhone 14 just like that so we have our three different frames now we need to start creating our grid well basically we need to have two types of grids we need to have a horizontal grid and also a vertical grid but why because we want to keep our spacing consistent both horizontally and vertically I'm going to start with the desktop version I'm going to select this Frame and if I head over to the layout grid section in the design inspector and hit this plus Button as you can see a grid has been added to this Frame I'm going to change the type of discrete to column all right I'm going to click on this layout grid settings and from this drop down menu I can change it to columns because for web design we always use a column grid for our horizontal alignment alright for the desktop we need to set the count to 12 always use 12 columns for the desktop frame and here we can specify the type some designers prefer to set it to Center for the desktop version and set the time to stretch for iPad and mobile however to make discrete responsive we need to set it to straight Edge so I'm going to set the type to stretch and when you set it to stretch you can only adjust the margin and gutter alright if you don't know what these are the gutter amount is basically the space between your columns and the margin is the space around these columns so right now by default it's set to zero but if I increase it to let's say 50 you can see that we have some empty space on the sides of this Frame alright for the desktop grid I usually set the gutter to 32 because we have more space to work with all right but what about the margin how do I know which amount is suitable for this margin property well when it comes to margin it all depends on your container size but what's a container well basically a container is an area that holds your content organized and neatly towards the center of your frame okay so if you take a look at this design for instance if I select any of these sections for example this search card you can see that inside we have a container and the width of this container is 11 20 points all right here as well if I open up this Services section you can see we have another container the same width and the same thing applies to the testimonials section and all other sections below so that's how we can make sure that we have consistency across our project but you may ask how should I specify the container size well that's a good question because there is no standard but there are some recommendations some designers prefer to use 1140 points for the desktop container some designers like me prefer 11 20 points some designers prefer 1100 points that's totally fine it all depends on the type of project you work on and how narrow you want your content to be so if you want to have more margins on the sides of your content you need to go with a smaller container I personally use 11 20 points as my container size for desktop up and for tablets I use 680 points and for mobile 358 some designers prefer a 360 points that's fine alright so let's get back to our grid system here now that you know what a container is and what's the point of using a container I'm gonna go ahead and set the margin here to 160. why because I want my container's width to be 11 20 points okay so if I go ahead and create a rectangle here just like this you will see that I'll get 11 20. so that's basically our horizontal grid but what about our vertical grid to create a vertical grid you can simply select this Frame again head over to the layout grid section hit this plus button once again and this time I'm going to change the type of discrete from grid to rows so as you can see now we have vertical rows this time I'm going to set the type to top because I want this grid to start from from the top of my screen and then I want to set the calendar to something huge like 1000 the reason I set it to 1000 is because when you go ahead and increase the height of this Frame you will still get this vertical grid but what about these values for the offset just set it to zero because we don't want to have any offset from the top and bottom sides for the height I prefer to use eight especially if you want to use an 8 point or four point grid system and for the gutter I can set it to 8 as well alright so now when you go ahead and create an element let me show you what happens let's suppose you create this rectangle and when you try to move it just like this as you can see it snaps to the nearest row or column and when you modify its Dimension it again snaps to the nearest row or column so that's how you can make sure that your numbers are always going to be divisible by eight alright but what about the tablet version for 10 tablet we usually use eight columns why because we don't have so much space to work with all right as the size of our frame decreases the number of columns should decrease as well so what I'm going to do is this I'm going to select this desktop frame and I can either go ahead and create a layout grid style all right or I can just select these grids just hover over this area click once to select this particular layout grid hold down the shift key click once again here to select this layout grid and copy them hit Ctrl C or command C select this iPad frame hit Ctrl V or command V and there we go we have our vertical and horizontal grids but we need to make some adjustments as for the vertical grid we don't need to change it for any of these frames because our vertical grid should always have the same properties and preferences regardless of our screen size but what about our horizontal green I'm going to click on this icon here and I'm going to set the camera amount to eight and also since we don't have that much space on a tablet screen I'm gonna decrease this margin and this gutter here I'm going to decrease this margin to 32 just like this and the gutter to 16. so using this grid we can use the whole available width of this screen since we don't have so much margin here that's why I set the margin to a lower value than what we had here for desktop on desktop we had so much room however that's not the case with iPad but what about iPhone I'm gonna select these two once again copy them and paste them here for mobile we are going to decrease the column count to four and also I'm gonna set the margin to 16 and gutter should be 16 as well but why 16 here because it's recommended not to go below 16 points some designers go to 24 or 32 that's fine but I highly recommend not to go below 16 points to just have some safe area around your content I'm not sure if you've noticed or not but all the values I used for all these grids are divisible by eight all right here I have 32 16. here I have 16 16 and here for desktop I have 160 and 32 because I know that I'm gonna use an 8 point or a four point grid system and the good thing about these grids is that they are responsive since we set the type to stretch if you set it to center it's not going to be responsive okay but here since we set it to stretch they are responsive just like this and that's exactly what we needed alright now let me give you some tips on how to use these grids properly in your projects so as I mentioned before when you just create any shape here it could be a rectangle or anything it could be a text layer it automatically snaps to these rows and columns all right but when you use the arrow keys on your keyboard to move your elements around you can move it down by either one pixel just like this or if you hold down the shift key you can move it down by 10 pixels just like that or move it up and that would be problematic when you use an eight point grid system to fix this issue you can simply head over to the figma preferences here and from this quick actions you can look for nudge amount all right if you just look for nudge amount and open it up here this window allows you to specify your small nudge amount and your big nudge amount if you just decrease it to 8 from 10 and you go ahead and try to move your elements down or up using the arrow keys and shift key as you can see now it's moving by 8 pixels there is one more thing I'd like to point out here and I think that's a question of many Junior designers well when you start designing and when you start learning about grid systems you think that everything should be aligned with your layout grid okay and that's wrong let me prove that to you I'm gonna just unhide my layout grid right at the top we have this navigation bar right and inside this navigation bar we have a container but look what we have inside none of these links are aligned with our columns and they shouldn't be why because when it comes to using agreed we just want to make sure that our container is aligned with these columns and if I zoom in you can see that my container is perfectly aligned with this First Column and also here my buttons are perfectly aligned with this last column the same thing applies to all all other sections for example here we have this search card and as you can see this container this whole container is aligned with my layout grid but whatever is placed inside is not aligned with these columns because it's impossible to align everything with these columns so when you want to align elements inside other elements you need to make sure to have consistent padding that's all so here if you take a look at the padding inside we have a 40 Point vertical padding and an 80 Point horizontal padding right the same thing applies to these cards as you can see each card is aligned with the layout grid here but the elements inside are not aligned with the layout grid however we have consistent padding inside if I select this element you can see that the left padding is set to 32. if I select this Frame you can see that the bottom and right padding are set to 30 points as well and also keep in mind that a layout grid is nothing but a guide alright sometimes we need to break the rule for example here as you can see this picture this image here is not aligned with my layout grid perfectly as you can see it's outside my grid and that's fine because I intentionally put it like that if you want to learn how to make your UI design responsive make sure to watch this video on the screen and as usual if you found this video helpful please hit the like button and subscribe to my channel to not miss the upcoming tutorials have a beautiful day and see you next time

Channel: DesignWithArash

Views: 85,809

Keywords: ui/ux design, ux design, user experience design, ui/ux design india, how to become a ui/ux designer, become a ui/ux designer, web design, figma, figma tutorial, figma design, figma tutorial for beginners, ux, ui, design, ui design, uxui design, uxui, learn ux, ux course, design course, designcourse, beginner ux, junior ux, junior designer, junior ux designer, entry level ux, how to learn ux, learning ux, user experience, user interface, responsive grid figma

Id: gHdcAH1nhiU

Length: 12min 17sec (737 seconds)

Published: Tue Jan 03 2023