Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:13Length:1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Working With Grids in Figma

In this lesson you’ll learn how to use Figma to create grids. Grids are very useful for interface design but can also be invaluable for creating icons. Let’s begin.

2.5 Working With Grids in Figma

Welcome back to the course. In this lesson, you'll learn how to work with grids in Figma. Now, grids are very useful for interface design, but you can also use them for creating icons. So let's begin. Now, in Figma, a grid can only be applied to a frame. So I'm gonna go ahead and create a frame, let's say I wanna create one for a desktop size. And now with the frame selected, I can go ahead and click on Layout Grid. I can either click directly here or click on the plus sign. It does exactly the same thing. Now, there are three types of grids in Figma. There is your default grid, which will give you horizontal and vertical lines. And you can determine the size of each cell. Let's say I wanna make 16 pixels, it's gonna create a 16 pixel cell over and over again. You can change the color, And the opacity of the lines. This is very useful for icon design. Now, the second type of grid is columns, and this is what you'll probably be using most often. Basically you define how many columns you want. Let's say 12, because this is a typical number in the most popular grid systems. And then you define the type. So stretch will basically set the width of each column automatically based on the width of your frame. The only thing you can change here is the gutter, which is the distance between each column. So let's say 40. And now you'll see that I have a much bigger gap between each column. And I can also change the margin. And that will add the number you type here to the right and to the left of the grid. So that's type stretch. You can also set it to left, and that's gonna align the grid to the left of the frame, or right, which is gonna align it to the right, or center. Now, in any of these types, the width of each column is set manually. So you can set it to, like, for example, 72 and then you can define the gutter. So that's the main difference. Stretch will automatically calculate the column width for you. Any of these other types needs your manual input for a column width. And finally, rows is exactly the same as columns. It has the exact same properties, except it's horizontal instead of vertical. And obviously, the types here are a little bit different. Instead of having center, left, and right, you now have center, top, and bottom. And of course, you can also add stretch here, and the height of each column will be automatically calculated for you. Now, once you add your grid of choice, you can use it to align elements to it. And as you can see, the grid is visible, it stays on top of everything else. So it's really easy to move elements, to resize elements to that specific grid. Now, if you want to toggle the gird on or off, here's how you do it. You select the frame and you click this little sign here, and that's toggled off. To bring it back on, you just click this button again. There's also a shortcut, and you can find that by either searching for the Layout Grids option and the get the keyboard shortcut here. In my case, it's Ctrl+Shift+4, and I'm on a Windows system. On a Mac, you will get a different keyboard shortcut. Or you can go down here under Help & Resources > Keyboard Shortcuts. And you would go to View, and under Layout Grids, you'll find your keyboard shortcut, so Ctrl+Shift+4. if I press it here, regardless of what I have selected, it's gonna hide or show the layout grids. And it's gonna do that on all the frames. So for example, if I have another frame here, which has, let's say, one of the default grids, if I press Cmd, or sorry, Ctrl+Shift+4, it's gonna show or hide the grids on all of the elements. All right, and that's how you can create grids in Figma. Now, in the final lesson of this chapter, I wanna show you how you can add extra functionality to Figma by using plugins. So I'll see you in the next lesson.

Back to the top