Within the past year, I transitioned from using Adobe XD to Figma. As a total beginner, I had to learn everything from scratch. Today, I’m here to teach you one of the basics: setting up a layout grid in Figma. I highly recommend using layout grids because they make the transition from design to development much smoother and more seamless.
Step 1: Set Up Your Figma Canvas
Start by setting up your blank Figma canvas. The easiest way to insert a frame is by pressing F on your keyboard, which automatically brings up all the frame options on the right-hand side. I usually select the Wireframe option, which is 1440 pixels wide by 1024 pixels tall. This width works perfectly with the 1200-pixel container that I use for my designs.
Step 2: Add a Layout Grid
Once your frame is selected, navigate to the top left corner and click the frame’s name to pull up the options on the right-hand side. Click on Layout Grid to add a default grid. By default, Figma uses a small box grid, but this isn’t what I typically use.
To customize the grid, click the icon next to the grid’s 10-pixel setting. In the dropdown menu, select Columns. A column layout is most commonly used in web design, and it’s what I prefer. For my 1200-pixel container, I use a 12-column layout. Change the Count from 5 to 12 and press Tab. You’ll see your frame update with 12 columns.
Step 3: Adjust Margins
You don’t want the 12 columns to span the entire width of your frame (1440 pixels). Instead, you want them constrained within the 1200-pixel container. To do this, calculate the margins:
- Subtract 1200 from 1440 to get 240 pixels.
- Divide by 2 to get 120 pixels.
Set the Left and Right Margins to 120 pixels to constrain the column grid to the middle 1200 pixels.
Step 4: Set the Gutter and Opacity
The default gutter size is 20 pixels, which works well for most designs. However, feel free to adjust it based on your needs—whether you prefer a 12-pixel gutter or a 24-pixel one, you can update this accordingly.
For the grid color, I leave it at the default red with some opacity. I usually lower the opacity to around 4% to keep the grid from obstructing my design while still being visible.
Step 5: Hide and Show the Grid
As you work with your grid, you might want to hide it occasionally to get a clear view of your design. A quick tip: press Shift + G on your keyboard to toggle the grid on and off. This allows you to view your design without the grid and then bring it back when needed.
And that’s it! Setting up grids in Figma is simple and straightforward. Utilizing grids helps eliminate guesswork in laying out your designs and ensures that everything is pixel-perfect every time.
