How to Make a Grid in Figma: Step-by-Step Process

Misaligned buttons, inconsistent spacing, designs that fall apart on different screens. Sound familiar?

Learning how to make a grid in Figma solves these problems in minutes.

Layout grids give your designs structure. They keep elements aligned, spacing consistent, and layouts adaptable across desktop, tablet, and mobile frames.

This guide walks you through creating column grids, row grids, and reusable grid styles from scratch.

You’ll learn exact settings for 12-column layouts, proper gutter and margin configurations, and keyboard shortcuts that speed up your workflow.

By the end, you’ll set up professional grid systems that match how developers build real websites.

How to Make a Grid in Figma

Creating a layout grid in Figma is the process of adding visual alignment guides to frames for consistent element positioning across your design.

You need this when building responsive designs, organizing UI components, or maintaining spacing consistency across multiple screens.

This guide covers 8 steps requiring 3-5 minutes and basic Figma familiarity.

Prerequisites

Before you start, make sure you have:

• Figma desktop app or browser version (2024 or later)
• Free or paid Figma account
• A project file open with at least one frame
• Basic knowledge of the Properties Panel location

Time required: 3-5 minutes for a complete grid setup.

Step 1: How Do You Create a Frame for Your Grid?

Select the Frame Tool (F) from the toolbar or press F on your keyboard, then choose a preset size from the right sidebar to create your canvas.

The Frame Tool sits in the top toolbar between the Move tool and shape tools.

Click it, then look at the Design Panel on the right side of your screen.

You’ll see preset frame options: Desktop (1440×1024), MacBook Pro, iPhone, iPad, and more.

Pick one that matches your target viewport.

For web design, the 1440×1024 Desktop frame works well as a starting point.

Your empty frame appears on the canvas, ready for a grid overlay.

Why Frames Matter for Grids

Layout grids only work on frames and components.

Groups and individual shapes won’t accept grid settings.

If you’re working with existing elements, select them and press Cmd+Option+G (Mac) or Ctrl+Alt+G (Windows) to convert them into a frame first.

Step 2: Where Do You Find the Layout Grid Settings?

With your frame selected, locate the Layout Grid section in the right sidebar’s Design Panel, then click the “+” icon to add your first grid.

The Layout Grid section sits below the Fill and Stroke options.

Look for the label “Layout Grid” with a plus icon next to it.

One click on that plus icon adds a default uniform grid to your frame.

You’ll see a red overlay appear immediately across your entire frame.

This default grid uses 10px squares, which isn’t what most designers need.

But it confirms the grid system is now active on your frame.

The Grid Icon Explained

After adding a grid, you’ll notice a small nine-dot icon appear.

This is the grid settings button.

Click it to access all configuration options: grid type, count, color, gutter, and margin settings.

Step 3: How Do You Change the Grid Type to Columns?

Click the grid settings icon (nine dots), then select “Columns” from the dropdown menu to switch from uniform squares to vertical column guides.

The dropdown shows three options: Grid, Columns, and Rows.

“Grid” creates uniform squares, perfect for icon design or pixel-level alignment.

“Columns” creates vertical guides spanning the full frame height.

“Rows” creates horizontal guides spanning the full frame width.

For most user interface work, you want Columns.

Select it and watch your frame transform from a square grid to vertical stripes.

When to Use Each Grid Type

Columns work best for web layouts, app screens, and dashboard designs.

Rows help with vertical rhythm and baseline alignment for typography.

Uniform grids shine during icon creation or when you need precise pixel measurements.

Most designers combine columns and rows on a single frame for complete control.

Step 4: How Do You Configure Column Count and Gutters?

Set your column count to 12 for web projects, adjust gutter spacing between 16-32px, and define margins from the frame edges based on your target screen size.

The Count field determines how many columns appear.

Twelve columns became the industry standard because 12 divides evenly by 2, 3, 4, and 6.

This flexibility lets you create 2-column, 3-column, 4-column, or 6-column layouts from the same grid system.

For mobile frames, drop to 4 columns.

Tablets typically use 8 columns.

Gutter Settings

Gutter controls the space between each column.

Common values: 16px for mobile, 24px for tablets, 32px for desktop.

If you follow the 8-point grid system, keep all values divisible by 8.

Margin Settings

Margins define the white space between your columns and the frame edges.

Desktop margins typically range from 24px to 64px.

Mobile margins should be at least 16px to keep content away from screen edges.

Larger margins create more breathing room but reduce usable content width.

Step 5: How Do You Set the Grid Type to Stretch, Center, or Fixed?

Choose Stretch for mobile-first design that adapts to any width, Center for fixed-width content blocks, or Left/Right for edge-aligned layouts.

The Type dropdown in grid settings controls how columns behave when you resize the frame.

Stretch Type

Columns expand and contract proportionally with the frame width.

This mirrors how CSS Flexbox and Grid behave in real browsers.

Use Stretch for any responsive web design project.

Center Type

Columns maintain fixed widths and stay centered within the frame.

When you resize the frame, only the margins change.

This works well for fixed-width content areas within fluid containers.

Left and Right Types

Columns align to one edge with fixed widths.

Less common, but useful for sidebar layouts or asymmetrical designs.

Most projects stick with Stretch for realistic responsive behavior.

Step 6: How Do You Add a Row Grid for Vertical Alignment?

Click the “+” icon in Layout Grid again to add a second grid, then change its type to Rows for horizontal alignment guides that work alongside your columns.

A single column grid handles horizontal positioning.

But vertical spacing needs row guides.

Most professional designers use both simultaneously.

Configuring Row Settings

Set Type to “Top” so rows start from the frame’s top edge.

For an 8-point grid system, set Height to 8px and Gutter to 0px.

Count should be high enough to fill your frame, around 100-200 rows for most screens.

This creates a baseline grid for consistent vertical rhythm across your entire design.

Combining Columns and Rows

Your frame now displays both vertical columns and horizontal rows.

Elements snap to intersections where columns meet rows.

This dual-grid approach matches how developers implement layouts using CSS Grid and Flexbox.

Step 7: How Do You Save Your Grid as a Reusable Style?

Click the four-dot style icon next to Layout Grid, then press “+” to create a new grid style you can apply across multiple frames and share via Team Library.

Naming matters here.

Use descriptive names like “Desktop/12-Column/32px-Gutter” or “Mobile/4-Column/16px-Margin”.

Your team will thank you later.

Applying Saved Styles

Select any frame, click the four-dot icon in Layout Grid, and choose your saved style from the list.

One click applies all your configured settings instantly.

Changes to the style automatically update every frame using it.

Sharing Styles via Team Library

Publish your file to a Team Library to make grid styles available across all team projects.

Other designers can then access your exact grid configurations without manual setup.

This keeps spacing consistent when creating a design system in Figma.

Step 8: How Do You Toggle Grid Visibility On and Off?

Press Shift + G to instantly show or hide all layout grids, or click the eye icon next to individual grids in the Properties Panel for selective visibility.

The keyboard shortcut works globally.

Every grid on every frame toggles at once.

Handy when presenting designs or checking final layouts without visual clutter.

Individual Grid Control

Each grid in the Layout Grid section has its own visibility toggle.

Hide rows while keeping columns visible, or vice versa.

Useful when focusing on horizontal alignment without row distractions.

View Settings Menu

The View Settings menu in Figma’s top-right corner offers another toggle option.

Click it and look for “Layout Grids” in the dropdown.

Same result as Shift + G, just with a mouse click instead.

Verification

Confirm your grid setup works correctly before designing:

• Columns display evenly across the frame width
• Resize the frame to test stretch behavior
• Add a rectangle and check if it snaps to column edges
• Verify margins match on both left and right sides
• Toggle visibility with Shift + G to confirm grids are active

If elements don’t snap, check View > Snap to Grid is enabled.

Troubleshooting

Grid Not Visible on Frame

Issue: You added a grid but nothing appears on your frame.

Solution: Check three things: layer is a frame (not group or shape), Shift + G toggle is on, grid opacity is above 0% in settings.

Grid Appears on Wrong Layer

Issue: Grid shows on a different frame than expected.

Solution: Select the correct frame in the Layers Panel before adding grids; layout grids only apply to the currently selected frame or component.

Columns Not Stretching When Frame Resizes

Issue: Columns stay fixed width instead of adapting to frame size.

Solution: Open grid settings and change Type from Center, Left, or Right to Stretch.

Grid Style Not Updating Across Frames

Issue: Changed a grid style but some frames didn’t update.

Solution: Those frames likely have local overrides; reset them by clicking the style icon and reselecting the same style.

Alternative Methods

Method A: Manual Grid Setup

• Time: 2-3 minutes
• Control: Full customization of every setting
• Best for: Custom column configurations, unique layouts

Method B: Copy Grid from Another Frame

• Time: 30 seconds
• Steps: Select grid in Layers Panel > Cmd/Ctrl + C > Select target frame > Cmd/Ctrl + V
• Best for: Applying existing grids to new frames quickly

Method C: Team Library Grid Styles

• Time: 15 seconds
• Requirements: Published team library with grid styles
• Best for: Teams with established design systems

Choose Method A when starting fresh.

Method B works when duplicating existing layouts.

Method C scales best for team collaboration.

Related Processes

Once your grid is set, explore these related Figma techniques:

• Using auto layout in Figma for responsive component spacing
• Making frames in Figma for nested grid structures
• Wireframing in Figma with grid-based layouts
• Hiding grids in Figma during presentations
• Scaling in Figma while maintaining grid alignment

Grids form the foundation of consistent user experience design.

Master them, and every layout decision becomes easier.

FAQ on How To Make A Grid In Figma

What is a layout grid in Figma?

A layout grid is a visual overlay that helps align elements within a frame. Figma offers three types: uniform grids, column grids, and row grids. They don’t appear in exports or prototypes.

How do I add a grid to a frame in Figma?

Select your frame, find Layout Grid in the right sidebar’s Design Panel, and click the “+” icon. A default uniform grid appears instantly. Click the grid settings icon to customize it.

What’s the difference between columns, rows, and uniform grids?

Columns create vertical guides for horizontal layout control. Rows create horizontal guides for vertical spacing. Uniform grids display equal squares, ideal for icon design and pixel-level precision.

How many columns should I use for web design?

Twelve columns work best for desktop layouts since 12 divides evenly by 2, 3, 4, and 6. Use 8 columns for tablets and 4 columns for mobile screens to maintain flexibility.

What are gutters and margins in Figma grids?

Gutters define spacing between columns or rows. Margins set the distance between grid edges and the frame boundary. Common values: 16-32px gutters, 16-64px margins depending on screen size.

How do I make a grid responsive in Figma?

Set the grid Type to “Stretch” in grid settings. Columns will expand and contract proportionally when you resize the frame. This mirrors real media queries behavior in browsers.

Can I add multiple grids to one frame?

Yes. Click the “+” icon multiple times to stack grids. Most designers combine a 12-column grid with an 8px row grid for complete horizontal and vertical alignment control.

How do I save a grid as a reusable style?

Click the four-dot style icon next to Layout Grid, then press “+”. Name your style descriptively. Apply it to other frames by selecting the style from the same menu.

What’s the keyboard shortcut to hide grids in Figma?

Press Shift + G to toggle all layout grids on or off globally. You can also click the eye icon next to individual grids in the Properties Panel for selective visibility.

Why isn’t my grid showing on the frame?

Three common causes: the layer isn’t a frame (grids only work on frames), grids are toggled off via Shift + G, or the grid opacity is set to 0% in settings.

Conclusion

You now know how to make a grid in Figma from start to finish.

Column grids, row grids, gutter settings, margin configurations, reusable styles. These tools transform chaotic layouts into structured designs.

The 12-column layout remains the standard for desktop work. Four columns handle mobile screens. Eight columns fit tablets perfectly.

Save your grid configurations as styles. Share them through Team Library. Your entire team stays aligned without manual setup on every frame.

Shift + G becomes your best friend for toggling visibility during client presentations.

Grids aren’t constraints. They’re the foundation that frees you to focus on creativity instead of pixel-pushing.

Start with a frame, add your layout grid, configure the settings, and build something worth sharing.