Figma Tutorial: Setup a Responsive Grid Layout for UI & Web Design (IN 11 MINUTES)

starting your very first responsive project can be so overwhelming you've got mobile tablet desktop how many columns in the grid how wide are the margins how wide are the gutters there are so many questions to be answered so in this video i'm going to break down step by step how to create your very first responsive grid system for tablet mobile and desktop i'm also going to sprinkle in some good gems for you i'm going to show you how to create your very first vertical grid system and i'll also share with you some shortcuts that will help streamline the process oh and by the way if you enjoy these videos make sure to give it a like comment and subscribe and if there's anything that you want to learn in figma make sure to let me know in the comments i'll be sure to line it up let's get into it [Music] all right guys let's get right into it and by the way if you're new to figmai or you're still trying to figure out how to navigate this software i've released a video to help beginners and first timers navigate confidently through figma for the very first time so the video is up there feel free to click it and learn a little bit more for those who want to learn about responsive grids that turn heads let's get right into it so here we have our very first project what i want you to do everyone hit f on the keyboard and this will open up the desktop and mobile and tablet are starting points so let's open up desktop let's go with 1440 by 1024 this is my favorite starting point for all desktop projects now the the game plan now the game plan is going to be i'm going to help you guys set up and polish your very first responsive template for desktop first i'll also sprinkle in like i mentioned a gem which is how to set up your vertical grid and then only until then we'll start to do the tablet and mobile so desktop first all right first guys hit your frame so select it head over to layout grid hit the plus icon change your grid by selecting the layout grid settings change the grid drop down item to columns change 5 to 12 so this will change the number of columns keep the type to stretch because we want this to be responsive change the margin to 70 this will give your design a bit of breathing room for the items that don't span the full width of the design and keep the gutter to 20. so now that you've set up your very first responsive grid layout you can adjust it and you can see that it will scale accordingly now perfect now for those designers who've been wondering how do i maintain consistency in my vertical rhythm so let's say i'm creating a banner and then i'm also creating a hero section let's make this a little bit darker and then i've also got some content blocks so let's just quickly make this so you can understand a little bit better whoops let's do that how do i make sure that the heights are consistent that they're all divisible by eight and that all these items as well and all the spacing between these items are all consistent because many projects that designers work on they have very inconsistent measurements the banner might be a 102 the hero area might be 100 407 the content blocks might be 208 the spacing between these the margin between these content blocks might be 13. so one way to really help solidify and create more consistency is using a vertical grid now let's remove all these items and i'm going to show you how to do that right away so first select your frame head over to your layout grid and hit the plus icon so you'll notice that now you can overlay multiple layouts change the grid layout to a row change the count to a thousand so this will just if you have a very long um and tall uh frame make sure you increase it to two thousand three thousand keep the top i change the type to top change the height to either 4 or 8 or 16. so if you're working on a ui project i would recommend a 4 because this allows you to get more clarity and control over the little and very particular and minor measurements on your design because ui tends to be a lot more compact if you're if you're designing like a brochure website landing page something more abstract then you can go with something like 8 or 16 as well so let's say for example we're going to be designing a home page so lots of breathing room big fonts then we'll go with eight and reduce the gutter to zero and let's zoom in so now you'll notice that we've we now have a grid system for horizontal for the horizontal access and then we also have a grid system for the vertical access so now when we're designing we can make sure that our designs snap to the vertical grid as well to make sure that all our measurements are consistent and now we also know that all the heights and margins will also be divisible by 8 and this just makes the developers job much easier and if you also code this will make your life much easier as well so let's say we've got a here a hero banner notice it it snaps at 360 and then let's say we want some content blocks let's just create this really quickly um one two eight there we go there we go there we go so let's just see if that has lined up you'll notice now that everything has snapped to the grid as you can see here let's just make this a little bit darker so you can see that now everything is divisible by eight and everything is very consistent in your designs so that is one very very useful tip if you are very pedantic about all your measurements and this is a great way to really bring more consistency and structure to your designs and you will it's a good buy to all the 0.4 measurements so like you have 37.2 margins and random measurements here and there so now one quick tip is if you want to view your artboard without the grid system hit control g and that will hide all your grid systems and you can hit control g to show it again and if you notice i don't know if you did if i move my content blocks you might notice that mine snap to the grid because that's how i work with all my projects i like to have everything consistent and everything works within my control so all right if you want to achieve this as well hit command or command comma or control comma on windows and your preferences will show up hit the nudge amount and you'll see small nudge and big nudge small nudge is obviously when you hit up and down on your keyboard now if you want the big nudge which is when you hold down shift that is controlled by this input so if you if you're using the ui if you're doing ui design and you have a four point grid vertical grid then you'll want this to be four if you're using eight point grid use it to eight if you're using a larger vertical grid like 16 then you can also set that to 16. and if you notice now it will jump two lines there we go so and that's simply by holding shift and the down arrow and the up arrow so what i'm going to do is i'm going to change mine back to 8 and there we have it so hopefully you found that extremely useful because it really does make your life a lot easier and devs will love you and this grid system will be turning heads don't you worry now you're probably thinking cool i want to create my tablet and my mobile well follow me hit f on the keyboard on the right hand menu open up the tablet menu hit ipad mini and this is fairly simple click the first frame click a hover over onto your layout grid select it and then hold down shift to select the 12 column grid hit command c if you are on a mac control c if you're on a windows machine click on the new tablet canvas command v paste it and there you have it it brings the entire grid system over onto your tablet view now you're obviously thinking well at least i'm thinking this looks terrible and how the hell do i design tablet designs with such small uh columns so normally i like to head over to the layout grid change the 12 column grid to eight and that will be what i will be working with and it gives me a little bit more breathing room for the specific design now hit f on your keyboard let's create our phone i like to use the iphone 11 pro max i like to just use the latest resolutions to stay in the loop and let's adjust that and what let's do it again click on the ipad or tablet um view let's select both of the layout grids and by holding shift and hit command c or control c if you're into windows click on your new mobile art board or frame command v and paste it and what i like to do is head over to layout grid change the eight column grid to a four column grid and then i like to keep it at stretch because it's responsive and i want to change the margin to 35 because i don't need that much space on the sides all right so there we have it now you guys have created your very first uh horizontal uh grid system and also vertical grid system and i hope that you guys found this extremely useful because when you're designing now you can also stretch these frames out and they will scale accordingly so hopefully this covers most of the scenarios that developers will be asking for when you hand over designs this is definitely just a starting point they can get more advanced when you get quite intricate on specific devices but hopefully this is good enough to help you start your very first responsive project and hope you guys like this if you did make sure you like and subscribe and if you want to learn anything new make sure to leave it in the comments below and i'll be sure to line it up alright guys i will see you guys in another video very soon [Music] you

Channel: Mizko

Views: 161,408

Keywords: figma, figma tutorial, ux design, web design, ui design, figma tutorial for beginners, ux design tutorial for beginners, figma web design, ui design tutorial for beginners, user interface design, ui design tutorial, figma basics, figma design, figma ui design, yt:cc=on, figma grid layout, figma grid tutorial, responsive grid system, figma grid system, figma web design grid

Id: _w-iYiEXrl0

Length: 11min 10sec (670 seconds)

Published: Tue Dec 22 2020