웹디자이너 필수! Figma로 배우는 그리드 레이아웃 완전 정복

In the next few minutes, you will learn how to design responsive grid-based layouts in Figma, arranging your elements precisely using the new grid tool.

 Feel free to skip to that practical second chapter if you only want to learn the software, but I recommend that you hang out with me for a few minutes to understand the underpinning principles cuz this is what will actually help you produce top tier designs.

 Grids might just be the most useful tool for the designer wishing to produce an effective layout.

 And we see this in architecture.

 It isn't only graphical design, but the use of the grid informs both the design of modern buildings and then even the city blocks that they sit on.

 We see it in other disciplines too.

 Things like industrial design of physical products, especially when it comes to interfaces, something like a calculator.

 The arrangement brings order to it.

 Or it might be a synthesizer, a product that's unusual, that's new, that's different.

 But having the grid there helps the user make sense of the interface and begin to learn it and understand what's where.

 And that alignment makes them feel like it's it's something that they can trust and they can use and they can make sense of instead of it feeling very alien and foreign.

 In graphic design, there's a few different types of grid to be aware of.

 Let me just run through a few of them.

 We have manuscript grids which are effectively a one column grid and that's the kind you see for something like a paperback book informing not only the line length so the width of the column that determines the number of characters in each line but also things like where the page numbers sit or the title of the book or the chapter.

 Then we have column grids and something like a two column grid has been used for many years to set things like religious text.

 In the newspaper, we would have a multicolumn grid that would work with elements spanning over a different number of columns on each of the pages.

 Then we have modular grids and this means that not only the columns but also rows are part of this grid.

 So effectively creating these rectangles which could be kind of all joined together or they could have a space in between each of the rows or the columns and this space in between is named the gutter.

 If you just pick up a coffee table book or a magazine, you will see this kind of modular grid on display.

 Let me just grab a magazine or something from the bookshelf in the studio.

 And just by leafing through, even just by kind of flicking the pages, you can sort of see the grid on display as you go from page to page to page in the way it moves around.

 Flicking through a well-designed magazine like this is a joy in itself because a skilled designer uses all the principles of layout of things like scale, contrast, hierarchy, the good use of imagery, the balance of the visual weight across each page and each spread.

 And the grid can be an aesthetic in itself when it's in the hands of a skilled designer.

 So let's look at a web design example.

 I have created this design for demonstration purposes and this is a very gritty kind of layout that editorial style design and I can show you the grid that I've used.

 If I just press the shortcut shiftG to turn on the guides you can see the rows and columns here that this main section below the nav bar at the top we has everything lined up to.

 Now, if I just show and hide some of these elements.

 I'm just going to hide my 12 column grid.

 And you can see the rows that go across there.

 There's five horizontal rows with this gap of 24 uh pixels in the gutter.

 And that determines kind of where everything sits vertically.

 And then if I turn on my columns, you can see that these determine where things sit horizontally.

 So, if I click on something like, for example, this text here, I've lined that up to my grid.

 And I've done all this in a free form layout, I've just uh used the guidelines, which have been around in Figma for a long time, in order to give everything a place to sit.

 Now, let me show you the new grid auto layout tool, which actually allows you to create um and lay out these kind of grid layouts in a responsive way when we want this kind of look.

 So, I'm just going to go over to playground here and feel free to follow along with this to get a feel of how this works.

 So, just with a blank page in Figma, you want to press F and we'll just do a desktop frame.

 So this is 1440 by 1024, but these numbers aren't really crucial.

 And let's just fill that in with a color we can see.

 So maybe let's do red here.

 Fantastic.

 That's our main frame.

 Then I'm going to press F again.

 I'm going to click within this frame.

 And you see it's made me a frame number one.

 I'm going to give this a fill over on the right.

 I'm not going to label these points because we're showing off the grid feature really.

 Not every little thing in Figma, but you can follow along.

 And we'll close that.

 Put it on half speed if it's going too quick or 2x if it's not quick enough.

 Back to desktop one here on the left.

 I'm going to turn this to an auto layout frame.

 So I'm just going to use the shortcut shift A.

 And by the way, my key presses are in the bottom left there if you're not sure.

 And I'm going to go over to my auto layout panel on the far right.

 I'm going to align this to the center and the center horizontally and vertically.

 I'm going to change the gap between objects to zero because there's only going to be one within this.

 And then I'm going to change my horizontal and vertical padding to 48 and 48 pixels.

 Fantastic.

 Then I'm going to click on frame one and I'm going to change the width of this to fill container.

 You can see it goes straight across just leaving our 48 padding on either side and the heights are also filled.

 So, we've now just got 48 padding all the way around this black frame.

 Fantastic.

 So, let's get some grids in there.

 We have got this frame one.

 If we go over to the right, we can see that the layout option selected is free form.

 We're going to go all the way over to the right and select grid and Figma has created us a 2x two grid.

 We can see that on the right in the layout panel and we can also see that on our canvas we have these light stroked rectangles for each module each cell within this grid layout.

 So we want to use grids when we have both rows and columns.

 If we only have rows or columns we can use the horizontal and vertical auto layout options.

 But if we got rows and columns now we have grid in play.

 So let's maybe change this to a 6x3 grid so we can have something more interesting to work with.

 And you can see that on the canvas here.

 So there's different ways you can get something into a grid.

 Let's say we just want to put a frame in there.

 I can press F and I can click say into this first cell.

 Now it shows you with these blue circles that have a white stroke around them which cell I'm selecting with the row and column highlighted outside of the grid.

 So, for example, if I move along to the third column and first row, that blue dot is now above there.

 So, let's just click in the first one, and it's created a frame here, and it's already set the width and height to fill and fill.

 Okay, I'm going to go over to fill color fill row.

 Click plus.

 And I'm going to make that not white because we've got, you know, kind of an off-white background.

 I'm going to make this a blue here so we can see it.

 Fantastic.

 So, that frames in there.

 If I wanted to duplicate this frame uh using the usual shortcut I've got it selected on the layers panel of command D, it's actually going to duplicate that into the next cell.

 And I can keep doing that and it kind of thinks it thinks this kind of thing through.

 So you can do that all the way.

 But there's other ways to get things into here.

 For example, if we had a frame outside the this frame.

 So, let's just click somewhere on a blank space in our canvas here and make a frame.

 That's huge.

 So, let's just change this to 100 by 100.

 And this one will make another different color.

 So, let's make it this sort of yellowy green.

 And now what I can do is drag this into my grid.

 And whichever cell I'm selecting, it will highlight that so I know I'm going into that particular one.

 So I can just let go here and it will drop it in there and it's automatically made the the it's changed now the width and height to fill and fill.

 Now I can change that back to 100 and 100 and that's now sitting in the top left within my cell.

 But I can lay it out wherever I want within the cell and it understands that straight away.

 You don't have to align it to something else.

 So I could just use the position tools, the icons up on the top here.

 Okay.

 So, I want to align it to the right.

 I click on that.

 But I can also use my shortcuts.

 So, I can use option S and I will align it to the bottom there.

 Or you can do option H, align it horizontally, option V vertically.

 And so you you have all these different kind of options here to align your your frame or any kind of object like an image, text, anything within this cell as well, but still applying to the grid.

 You can also go beyond the bounds of these cells.

 So for example, if I click on this last blue cell and let's change it to another color so we can talk about it.

 So maybe we'll make this one green.

 What I can do now, it's within this cell, but I can actually just drag this out.

 So, it's going over four cells kind of, but it is aligned to the top left in this cell.

 So, that I can even drag it so it overlaps this yellow frame here.

 And I can move it to the front or back using the usual keys.

 I'll use the square bracket, the right hand one, and that will bring it all the way to the front or left square bracket.

 It will send it to the back.

 So you have some options uh where you're able to use the grid but also kind of break across it.

 And it what this allows you to do is avoid nesting too much and it keeps a much neater system.

 You see here if we were trying to do something like this in auto layout, we'd have lots of nested frames.

 Uh and we'd have some things that I would have to, you know, ignore the auto layout because the way they spill over.

 We don't have that now.

 we just have this one frame one which we can just rename that to grid and all the other frames just line up within that.

 So it keeps our files uh much neater which is really nice.

 So that's basically a demo of sort of how grid works.

 Let's see in action on this actual design.

 So I'm going to go back over to the design here that I've made for lemon and I'm going to just make a copy of this.

 So, I'm going to click on the frame, and you won't be able to follow along with this part, but I'm just going to drag a copy over to the side, and you can just see how easy this is.

 So, just expanding my layers panel here.

 I'll just turn these guides off for a minute.

 I have here, so let's rename this desktop free form to desktop grid because we're using grid for the layout.

 I'm going to expand the layers here.

 And we have the top nav here, which is created using a horizontal auto layout.

 And then we have what we've named grid, which at the moment is just a free form frame.

 Okay.

 So, I'm going to go over here on my layout panel on the far right and change that setting from free form to grid and watch it break.

 It did break, but that's okay.

 We need to make sure these settings are correct.

 So, it's guess you want a 3x5 grid with a gap of 616 between the columns.

 That's not what I want.

 So I'm going to change this to 24 between the columns, 24 between the rows.

 So that's the first thing to get right.

 Now if I go over, I can just look at what I've done on my free form to get all this right.

 So I've got this grid frame selected on my free form and I can click on the rows and just see here that we have a gutter of 24.

 And it's actually the same case with the columns.

 The gutter is 24.

 Okay, fantastic.

 So looking at my design, if I just turn the grid back on, I can see that I've got 12 columns and I've got five rows.

 So that's what I need.

 So I click back onto the frame named grid, which we have made a grid auto layer now.

 And I need to change this to 12 columns and five rows.

 Hit enter.

 Okay.

 And so now this is the correct grid that I want.

 And you can kind of see now that these blue lines line up with the you might not be able to see them because they perfectly line up with the guides we've already got on there.

 Um I can just turn these guides off and click on grid.

 You can see all those cells there.

 So that's what I want.

 So all we need to do now is match these things up.

 Simple.

 So it might be helpful to just show and hide some of them.

 So, I'm just going to go down hiding things here on the layers panel and then kind of start at the top left and bring these on.

 So, my metal frames that's already in the correct place.

 Then I've got this first part of this tagline once you try lemon.

 So, I'm going to click on this and I'm just going to drag it up until it's in the cell that I want.

 And you can see this just turning to a slightly different blue.

 And that's in the correct place now.

 But within the cell, I want it at the bottom.

 I'm sure I'll use my shortcut option S.

 And there it goes.

 So I'm just going to follow this same process now.

 Now I have this signature image.

 So I'm just going to or card.

 I'm just going to drag that until I can see this.

 It might be easier if I turn this uh guides off so you can kind of see me drag it in a little bit easier.

 Then I'm going to go for the acetate for acetate frames card.

 Click back onto this desktop.

 Now unhide that and select it.

 I'm just going to click and drag it over.

 And sometimes it doesn't quite go where you want it to.

 So you can kind of just drag it out the way and then move it a second time.

 Now I can see the correct fl frame selected with a little bit of a light blue overlay.

 And that's in the correct place now.

 Okay.

 I'm going to get my line and I'll zoom through this a little bit now.

 I do have two buttons here.

 So, I'm just going to select both of these for men and women.

 And then I'm going to press shift A to make an auto layout frame.

 And then I just need a smaller gap in between these.

 So, I'm just going to select that to one for a minute while I go over here and check what the gap is between the two of these.

 And it was eight.

 I'm going to rename this frame.

 And you can always zoom in like this.

 So, this makes it easy now to see which cell I'm going into.

 So, go to the bottom left.

 I want to align that to the bottom.

 And we just have this line that's in the wrong place.

 That needs to go over a frame, a cell, sorry.

 And that looks absolutely identical.

 But the difference is now that this option is using a the grid uh layout tool which is fantastic.

 So that would help us think about things like development how it might be coded.

 Also if we were going to move it over to Figma sites now because we're using a type of auto layout it would be ready for that whereas our free form layout wouldn't be.

 And it gives you some more options when you start moving things around uh within your layout and also uh for responsiveness.

 So let's have a quick look at how this might work responsively.

 Now there's lots of different options.

 The first thing I would say is on mobile we will probably just make this into one column with all these cards uh on top of each other.

 Let me do a quick and dirty version of that so you could see what that would look like just so you know it's considered within the design.

 Okay.

 So this isn't strictly within the maybe or you know the way I would build something but I just wanted you to see how this could look on a phone and just to think about the fact that this is considered and we can still get a lovely kind of gritty look even though it's a one column and the way these cards work and the effect of this would still be really striking on a phone for someone to go to this site and it's still got this look of almost like a one uh like a fzine kind of print, you know, on this yellow paper, this kind of look to it.

 And it's still got this striking fashion style photography as well.

 So, they would get that vibe straight away uh from this kind of site.

 So, I'm happy with that.

 But that's just an example.

 Let me show you how to make this grid desktop design responsive.

 So, I'm going to drag this over a copy of it.

 And I'll just rename this So if we preview this, you can see everything's just over to the left, which obviously we can fix that quickly, but making this smaller just sort of reduces this margin and then kind of hides the rest of the page.

 So what can we do better? So first of all, let's make sure with this design, we can make this an auto layout.

 So I'm going to change this grid responsive one, shift A, to an auto layout.

 It goes vertical.

 And I'm going to make sure this emanates from the top center straight away.

 Now it's already identified the correct sort of gaps and padding.

 That's fantastic.

 So this now is stretching right across this full width and our grid.

 What's actually happening with that is that the cells are are getting wider.

 So it's leading to this longer space between them.

 So we've decided in this instance to keep the cards the same size.

 Then we move closer they get closer together.

 Now we probably when these are about to crash into each other we'd want to think about a break point.

 So in our web development environment we would just introduce a breakpoint here.

 Maybe be like a tablet breakpoint and then obviously we had our phone one column version but this gives us something that's actually responsive.

 Grids are simply a tool.

 So like anything in design it's not simply if you use them but how you use them that determines whether your composition is successful.

 So, if you want to become a master of grids, then take the layout principles we've reflected on and combine your knowledge with exposure to more great design and lots of practice as well as expert feedback on your work.

 Best of luck and until next time, happy designing.