Web Design » Figma » How Do You Add a Grid in Figma?

How Do You Add a Grid in Figma?

Last updated on September 28, 2022 @ 8:11 pm

Figma is a vector graphics editor and prototyping tool – and one of its key features is the ability to add grids to your designs.

There are two ways to add a grid in Figma: by using the “Columns” option in the Layout section of the toolbar, or by adding a grid overlay to your project.


The “Columns” option in the Layout section lets you quickly add a grid to your design by specifying the number of columns and gutters. To use this option:

1. Select the “Columns” option from the Layout section of the toolbar. 2.

Enter the number of columns and gutters you want in your grid. 3. Click “Apply” to add the grid to your design.

PRO TIP: When adding a grid in Figma, be sure to select the correct frame size and units. Incorrectly sized grids can lead to design problems later on.

Grid Overlay

Adding a grid overlay is a bit more involved, but it gives you more control over the appearance of your grid. To add a grid overlay:

1. Select the “Layer” menu from the toolbar and choose “New Layer.” 2. In the Layer Properties panel, name your layer and select “Grid” from the Type drop-down menu.

3. In the Grid Settings panel, adjust the settings for your grid overlay. You can specify the number of columns, gutters, and margins, as well as the line color and thickness. 4. When you’re happy with your settings, click “Apply” to add the grid overlay to your design.

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.