How to work with Columns & Grids in Figma

Hi everyone, in this video we are going to create our Hi-Fi frames. We're going to add our columns, that's these red things here, to both desktop and mobile, and we'll look at the grid that goes into the app design. Now I do get a little bit into the weeds here, to help explaining why we're doing, if your brain melts, the only thing you need to remember is, 12 is good, just make 12 columns, all right, let's jump in. 

To get started with this one, we're going to do some renaming of pages, I'll fast forward this. All right, wasn't much fast forward, but I just put mobile Lo-Fi, or our wireframe, and I'm going to add two more pages, two more pages, and we're going to have mobile, I'll fast forward this as well. So I've got, these are the ones we worked on earlier, I'm going to start on a separate document for the Hi-Fi, I often do this, I don't want to bring along, any baggage of random junk in this one. 

So I'm just going to start again for mobile and desktop, we're going to shift to doing desktop for a little bit, no other reason, just to mix up this course. So I'm on my 'Desktop Hi-Fi', my high-fidelity version, I'm going to go to my 'Frame Tool', I'm going to pick a 'Desktop' size, and this is a really common desktop kind of size to design for, it's pretty in the middle of lots of things. It will change, over time, that'll probably change as well, you can Google, like, "most common desktop size in your region", if you're working with a country that doesn't have, big technological adoptions, or the opposite, you might have really big screens, in your city, or country, or industry, you design for that. 

So let's talk about our columns, so I'm going to zoom out a little bit. So to do the columns, click on the 'Frame Name', and I'm going to actually call this one, name it as I go, 'Home page', and over here there's something called the Layout Grid. We're going to hit the little '+' button, and we're going to get a grid, that's what we don't want, we want to click on this little 'Grid Layout Settings', and go from Grid to 'Columns', and we've got the count that we don't want, we want 12. So we're going to do 12 to start with, and explain why we're using 12. 

Some of you will know, some of you won't, but why are we using 12? Because everyone else does, and because you'd be really weird, if you use 11 or 13, and we want to be, I guess, following the industry standards. There's no real rule that says you can't use 13, your developer though might hunt you down, and have strong words with you, because 12, there's a lot of frameworks that they're going to use, that use 12 as a default, and why we like it is that, it's easily divisible as a designer, so we can go in this and say, all right, this is my Nav, and this is going to be my, say, Hero Box, with my big image and my big marketing message in it, and then I'm going to have some feature boxes, and I'm going to have four of them. 

The cool thing about 12 is that, everything is kind of easily divisible, there's enough detail to separate these four into it, but we also could go, actually I want to have three, kind of feature boxes, or, cards, or things, and it's still easily divisible, so we like 12. We do a similar thing for mobile, so 'Mobile', 'Frame', I'm going to go 'Phone, 'iPhone 8', I'm going to go 'Layout Grid', hit the little '+', I don't want a grid, I would like a column of 12, because Dan said so, and I'm going to change the, say, the margin, no, the gutter. 

The gutter is the space between columns, the red things in my columns, those are too small, so I'm going to make it 6. So I've got 12 here, and I can do the same thing. I could say, actually, I want a Mobile Nav along the top, I want my Hero Box, and as a designer I know that, here, I've got this extra space on desktop. So I've kind of pushed my Hero Box in from the edges, but on Mobile, I don't have that luxury, it's too small. 

So I'm going to go, my Hero Box is going all the way across here, and when I get to my 'Features', which is these three boxes here, I'm going to say, actually, 3 across is going to make them too small, so what I'm going to do is,' I'm going to either stack them up on top of each other or maybe, let's say that, over here on Desktop, I'm actually going to have four of them, and there we go, there we go, I'm going to have four of them, so that when I'm working on mobile, I can have Rectangle 2, I might just have 2 across, make two of these, selecting them all, I'm doing my kind of, holding 'Option' on a Mac, 'Alt' on PC, and you can see, I've got that exact same content, my four feature boxes, but laid out nicely on Mobile, that's maybe a bit more--

I have to test it to see how big the text is, and the images are, I can-- that's why 12 is useful, it's kind of divisible across mobile, you might be designing for tablet as well, and desktop, and we haven't covered this specifically, but I wanted to show you just something here, this website here, I just picked a random website, Hubspot is just a, if you're searching, for stuff about UX and UI, and testing, you probably end up at Hubspot eventually, it's some really good resources in here, I like it, but let's say you are the designer for this website, you've designed a website version, but watch what happens when I make it smaller. 

So this is kind of like the big, big screen, when I get down to a smaller screen, can you see what happens? So some changes happen, in this case, just the illustration, when I get down even smaller, let's say, to tablet, they get rid of the menu, and go to this kind of, more traditional Nav sandwich or Burger menu, and then when I get even smaller, things change again, and kind of layout for a mobile phone. So this is what you're doing here, you are designing a desktop version, you should be designing a tablet version as well, and a mobile version, what all these things look like across the different devices, and the developer, the person doing the coding will go, I'm making a Hero Box, and on desktop, it's going to be tucked in two rows, only on 10. 

When it gets to mobile it's actually going to be full, 12, it's called Responsive Design. There's all sorts of fun things with breakpoints in CSS, and some of you are going to have some information and knowledge about it, and when I say breakpoints in CSS you're going to be nodding sagely, and some of you are going to be, it's going to be really foreign to you. My advice is, you don't have to be a coder to be a UX designer, but it's really helpful if you understand a little bit, of what the developer or web designer is going to do afterwards, are they using a framework, what is the framework? Does he use a 12 column grid, what is the default spacing? What is a break point? What's a Media Query? All those sorts of things are quite useful, you don't have to, but I know that are-- they're really helpful, when I'm designing something, I give it to the developer, and they don't hit me with their shoe, because I've designed something terribly hard to make. 

So if you do want to go into something like that, even if you don't get into it full time, check out, you might check out anybody's course, YouTube, whatever you want to do, but if you did want to check out one of my courses, probably Responsive Web Design is a really good one, go check that out. It'll get you up to speed with a lot of this responsive design, anyway. Let's talk about some of the bits I skipped over quite quickly. So 'Desktop', 'Home Page', went to the 'Columns' here, '12'. We know why we're using that, the other parts, the margin, what does the margin do? It's the sides, so if I go 80, what's going to happen is there's 80 from the outside, the margin, I'm going to delete these guys, I'll cut them. 

So obviously, you need to put in your margins and columns first, before you start designing. So I've put in some edges here, let's say that I'm designing a website, and I want to actually design it for a really big size, hold down 'Option' on a Mac, 'Alt' on a PC, to get both sides to squidge out. So I'm designing a lot wider site, what I can do is put in nice big margins, say like 300, because what you'll notice is, on most websites, like this hubspot one's a good example, when it gets to my giant 4K LG monitor screen, what they don't want is, they don't want the logo all the way over here, and this About and Sign Up page, all the way over here, like it just gets too wide, those big wrap around surround screens, it would just get ridiculous. So what we do is we put in margins from the outside, so that we-- you can see the actual website is actually just in this chunk, in the middle here, this stuff here is just placeholder stuff. 

So that's what you can do here, you can put it in margin, and it could just be background color, but you start your logo here, keep the website within this, and these bits stretch depending on how big the screen is. So I'm going to undo that, because that's not what I want, so I'm going to stay with 14. When I say 14 I mean the 1440 width, there it is there. 

Let's talk about the Gutter, the Gutter is the space between columns, how big should those be? There's no official police requirement rule, but it's really common to use 24. 24 is a common thing in development as well, it's easily divisible by 8. 8 is a really good kind of baseline grid number, we'll look at that when we kind of mock up an app in a sec, or at least do the grid, but you could pick 30, you could pick 13. Again, 13 is not an easily divisible number, and that becomes quite important later on, when we're kind of coding the website, so 24 is a nice spacing. Anything else I want to share with you before we do the grid? 

One last thing is, even though I said 12 is great, both mobile and desktop, it's a bit weird here, there's just too many columns, and the spacing is not big enough, it'd be really common, even though the underlying technology, or code will be using kind of 12 columns, potentially, it's often, just click on the actual frame, and say, actually, 12 columns is too much, I'm going to use 6, it's divisible by 8, and it just gives me a bit more spacing. 

In terms of the Gutter, I'm probably going to use, something like 16 to space it out, which is one em if you're a web designer, it's a common one to use on mobile devices, and I'm going to use this for my layout. Even though I said, use 12, when I'm designing, it's just easier to use 6 and assume 12 is going to happen later on, but it's easy, 6 goes into 12 twice. Now the other thing I want to show you before your brain melts, it's probably already melted, I'm going to add like an app version, we're not designing an app, we're designing a mobile website, but let's say you are designing an app, it'd be very common to not use columns anymore, so I'm going to use iPhone 8. 

It'd be very common to say, I want a Layout Grid, oh, click on the '+' there it is, not of 10, it's really common to use 8. That is a framework that somebody like Android and iOS use for spacing, again, it's easy, and divisible, and it spaces things out nicely, that would be very common, talk to the developer, who's making it first, they might say otherwise, but 8's a really good grid size, and you don't use columns in this case, because it's not going to respond, it's always going to be on a phone. 

Okay, we don't need the app right now, goodbye. I'm going to go back to my 'Desktop-Hi-Fi', and I guess I just want-- if you get nothing else out of this video, just know that it's good to have 12 columns to design for, I guess I throw this in there, because there's going to be a few of you out there, that have a lot of knowledge, and some with a little bit of knowledge of, the other part of this process, is the web development process, and some of those numbers will ring a bell. Last thing before we go, shortcut, it'll be in your shortcut sheet, because it's a weird one, on Mac, to turn this on and off, because like, when I preview this, look, it doesn't actually appear, it's just there in working mode to help me, but it doesn't actually get produced at the end. 

So you end up toggling it on and off quite a bit, so 'Ctrl G' on a Mac, now, not 'Command G', it's 'Ctrl G', which is a weird shortcut, right? It gets even weirder for PC, it's 'Ctrl-Shift-4', completely different, those will be in your shortcut sheet anyway. Oh, did that feel like the end? It was the end, I've come back to re-record something, let's, I want you to actually create four pages, and I want to show you a little trick or tip, I'm throwing them with columns. So if I've got, let's say that I've got a couple of different frames, I'm going to add another desktop version, and how do I-- I've spent some time getting all the columns right on this. 

There's a weird thing you can do in Figma, so let's click on this, a lot of these things can be selected by clicking, the gray kind of area next to them, look, just kind of there, not there, because that opens that, but this kind of area, no man's land, there's some, there's some places where you can click, same with this one, oh, can I get that one? Maybe the Fill, not all of them are clickable, but this one here, click on that little gap there. I've kind of got it selected, so I can copy it, go to there, and just, I'm using my 'Command C', 'Command V' on a Mac, that's 'Ctrl C', 'Ctrl V' on a PC, so just click on that, and going paste, and you can paste a lot of that stuff. So that's one way of doing it, or you can just go through and start duplicating it, like this, 'Command D', 'Ctrl D' on a PC, I've got three of them, I'm going to fast forward, name these. 

So I want you to do that same thing, have four of them, do the same thing for mobile, and I will see you in the next video, we don't need this. All right, do fast forward mode, so you know what I'm doing. All right, so that-- who remembers how to get it all in the screen in one go? You remember, 'Shift 1', there you go, that's what I want you to build, both for mobile and desktop, and I will see you in the next video.