How to Hide The Grid in Figma: A Quick Tutorial

The grid you want gone is almost certainly a layout grid, the overlay you attached to a frame yourself. Select the frame, click the toggle in the design panel, and it disappears. Your column count and gutters stay exactly where you set them.

Worth knowing before you go looking for it: Figma renamed the feature to layout guide in May 2025. Same toggle, same spot in the panel, different label (Figma Help Center, 2025). Most people still say grid.

The pixel grid is a separate thing and ignores all of this.

What Is a Layout Grid in Figma

Columns, rows, or a field of evenly spaced squares, laid over one frame so you can see whether things line up. That’s the feature. It lives in the design panel on the right, belongs to the frame you selected, and hiding it leaves every value you configured intact.

The rename trips people up. Since May 2025 the interface and Help Center say “layout guide” while designers keep saying “grid” out of habit (Figma Help Center, 2025).

• Uniform grid, an even field of squares. Icons, small components, anything where being one pixel off shows.
• Column grid for vertical guides. The web layout default.
• Row grid, the same thing rotated, and it matters more than people expect on dashboards where vertical spacing carries the whole layout.

Grids attach to frames only. Not groups, not a rectangle sitting loose on the canvas. So building a frame first is a required step, not an optional one.

Count, gutter, margin, color, opacity, and offset are all editable in that same panel, and changing one grid never touches another sitting on the same frame.

Layout Grid vs Pixel Grid: What Is the Difference

One belongs to a frame. Delete the frame and the grid goes with it, since it was never anything more than a property of that frame.

The pixel grid works differently. It covers the whole canvas, appears once you zoom in far enough to make out individual pixels, and has no relationship at all to what any frame’s grid settings say. Hide every layout grid in a file and the pixel grid still turns up the second you zoom past that threshold.

Toggling one never affects the other.

Zooming in and out on the canvas is worth getting comfortable with here, since the pixel grid usually only shows once you’re close enough to see individual pixels.

Sketch has a comparable overlay grid on its artboards, so none of this is unique to Figma. Adobe XD had one too, though Adobe wound the product down after its planned acquisition of Figma fell through in 2023, and XD has sat in maintenance mode with no new feature development since. Among tools still being built, the differences come down to the shortcut and where the toggle hides.

How to Hide the Layout Grid in Figma

One click, or one keystroke. Neither deletes anything.

1. Select the frame that holds the grid, not a layer or group inside it
2. Open the design panel on the right side of the screen
3. Find the Layout guide section and locate the grid entry
4. Click the small toggle icon next to that entry to hide it
5. Reopen the panel to confirm the grid is still listed with its settings intact

Toggling a Single Grid in the Design Panel

This affects one grid on one frame. If you added a second grid to that same frame, it keeps its own visibility setting and ignores what you just did.

Useful when you want to compare a screen with and without alignment guides, without disturbing every other frame in the file.

If a grid disappeared from the list entirely rather than just going invisible, you deleted it. Rebuilding from there follows the same steps as making a grid in Figma from scratch.

Toggling Every Grid from the View Menu

Open the Zoom or view options menu in the top right corner and turn off Layout guides. Every grid across every frame in that file hides at once, in your view only.

Same action the keyboard shortcut performs, just with a mouse.

• Handy for a quick before-and-after screenshot of a full page
• Individual grid settings stay untouched, so there’s nothing to restore afterward

Keyboard Shortcuts to Toggle the Grid by Platform

Shift G, and it’s identical on Mac and Windows. Plenty of Figma shortcuts swap Cmd for Ctrl. This one never used either key to begin with.

• Shift G toggles the layout guide on whatever frame is selected
• Nothing changes between operating systems here, unlike the component or duplicate shortcuts
• Browser and desktop app behave the same way
• Figma flags it when your system keyboard doesn’t match your selected Figma keyboard layout, which can break a shortcut with no visible error at all (Figma Help Center)

For everything else Figma does with a keystroke, a full Figma keyboard shortcuts reference is worth a bookmark. This is one command out of hundreds.

Mac Shortcut

Shift and G, with the frame selected. No Command key, no Option key.

If nothing happens, check that you have the frame itself selected rather than a layer inside it. The shortcut acts on whatever is active on the canvas.

Windows Shortcut

Same keys. If you’re hunting for a Ctrl equivalent, there isn’t one.

Windows machines running background utilities sometimes swallow the keystroke at the OS level before Figma ever sees it. Quick Actions and the word “grid” gets you there instead.

What Happens to Grid Settings When You Hide Them

Nothing happens to them. Column count, gutter width, margin, color, and opacity all stay stored on the frame, invisible but fully intact.

Figma’s Plugin API documentation lists a visible property on every layout grid object, tracked separately from its pattern, gutter, and count values, and that property defaults to true until something toggles it (developers.figma.com).

• Hide a grid and reopening the panel shows the same configuration you left
• Delete it and you start back at default values

This is also why a hidden grid never shows up in an exported PNG, a PDF, or a shared prototype link. Layout guides are a design-time aid and were never meant to render in output.

Choosing a Grid Type: Columns, Rows, or Uniform

Nothing is locked in here. Pick the wrong type and you change it in the same panel a minute later, so this decision carries less weight than it feels like it should.

Column Grid

Twelve columns is what most teams reach for by default, largely because it echoes the grid system behind Bootstrap and the pile of component libraries built on top of it.

Google’s Material Design spec calls for 12 columns on desktop, 8 on tablet, and 4 on phone screens. Reasonable numbers to start from if your own layout doesn’t have an obvious column count yet.

Row Grid

Rows are columns turned 90 degrees. Count, gutter, and margin behave identically, only the orientation changes.

Dashboards and card-heavy interfaces lean on them harder than columns, since vertical spacing consistency matters more in those layouts than horizontal alignment does.

Uniform Grid

A square grid at whatever size you set. It opens at 10px per square, red, 10% opacity, before anyone touches a setting (Figma Help Center, 2025).

Teams following an 8-point grid system usually drop that to 8px, so icon spacing lands on the same increment as everything else in the interface.

• Good for icon design and symbol libraries
• Not much use for full-page layout work, where columns and rows do the job better

Saving and Reusing Grid Styles Across Frames and Teams

Set a grid up once, save it as a style, apply it to any other frame with one click. No rebuilding columns and gutters by hand every time. Figma stores the values centrally, so editing the style updates every frame using it.

Saving a Grid as a Style

Configure the grid the way you want it on one frame first. Then open the style icon in the Layout guide section and give it a name. Desktop 12col, Mobile 4col, something you’ll still recognize in a list six months from now.

Usually one of the first moves in any Figma design system tutorial, since a shared grid style keeps every screen a team ships on the same underlying structure.

Sharing Through a Team Library

Anyone on any Figma plan can create a style. Publishing it to a team library, so other files can pull it in, needs an Education, Professional, Organization, or Enterprise plan. A free Starter team cannot publish (Figma Help Center).

Once it’s published, every file with that library enabled pulls the grid style directly, and a later edit to the style pushes out to all of them at once.

A frame-specific grid is quicker to set up and depends on nothing, which is fine for a single-page project. It also drifts out of sync the moment someone tweaks one frame and forgets the other eleven. A shared library style fixes that, at the cost of a paid plan and someone willing to own the library. On a small team that second cost is the real one.

When Hiding the Grid Does Not Work

Sometimes a grid refuses to render and clicking the toggle harder does nothing. In those cases the frame type or the mode is the problem, not the grid’s settings.

Dev Mode

Complaints from 2023 described the grid vanishing entirely once a file switched to Dev Mode. That’s no longer how it behaves.

Figma’s Dev Mode guide confirms layout guides stay accessible in that view, along with rulers and layer outlines (Figma Help Center).

Switching back to Design mode is still the fastest way to tell whether a setting or the view itself is at fault, and getting out of Dev Mode in Figma is one click either way.

FigJam Boards

FigJam doesn’t carry the frame-based layout grid at all. Boards use a fixed dot grid across the whole canvas instead.

• Sections, FigJam’s answer to frames, don’t support layout guides
• That dot grid can’t be resized, recolored, or limited to one section

Designers have been asking for layout guides on Sections since at least 2024. A February 2024 forum reply from Figma’s Community Support team thanked the requester for the idea and invited the community to vote on it, which is the standard response for a feature under consideration rather than a confirmation that it’s off the roadmap. Nothing built in has shipped as of this writing.

Frame Conditions That Block Rendering

Auto Layout and rotation both quietly disable a layout grid.

• Apply Auto Layout and the Layout guide section vanishes from the panel entirely. Figma’s community support has confirmed this as expected behavior rather than a bug.
• Rotate the frame off 0 degrees and the guide stops showing. The Help Center lists this directly, and it applies whether the rotation is 90 degrees or a fraction of one.

Safer build order is grid first, then turning on Auto Layout afterward. Doing it the other way around can lock the Layout guide section out of the panel.

Troubleshooting a Grid That Won’t Hide or Keeps Reappearing

Most of these trace back to what’s selected rather than anything being broken. The fix is almost always faster than it feels in the moment.

Figma’s Help Center lists the wrong layer as a common reason a layout guide won’t toggle. Guides apply to frames only, never to a group, an instance, or a shape sitting inside one.

• A grid switched on in the design panel can still look hidden if the global Layout guides setting in the Zoom or view options menu is off
• Checking both toggles takes seconds and clears up a surprising share of “it just won’t show up” reports

Because the default layout guide is red at only 10% opacity, leaving one visible is easy to miss (Figma Help Center). Stack that across a lot of frames in a deck and it reads as an unexplained pink cast over the whole design rather than an obvious grid.

Any time a design looks tinted for no reason, switch to Design mode and check the Layout guide section in the right sidebar for a grid left visible.

If a grid disappeared the second you clicked something, undoing the last action is faster than rebuilding it. That one step also tells you whether it was deleted outright or just toggled off somewhere else.

A smaller group of designers trace a permanently invisible grid to a rendering glitch tied to the graphics card, not a setting at all. Copying the frame’s contents into a brand new file is the workaround reported most often. Figma has never documented this as an official cause.

FAQ on How To Hide Grid In Figma

What is not a layout grid in Figma?

Rulers and layer outlines are separate view aids. Rulers measure from a fixed zero point, outlines expose wireframe shapes, and neither one stores columns, gutters, or margins. Auto Layout’s own grid option is a different feature again.

How many layout grids can one frame hold?

There’s no fixed cap. A column grid and a uniform grid can sit on the same frame at once, each toggled and configured on its own. Adding more than you need clutters the canvas, not the file.

Is the 8-point grid the same thing as a Figma layout grid?

No. The 8-point grid is a spacing methodology, sizing elements in multiples of eight. A Figma layout grid is the tool you use to see it, typically a uniform grid set to 8px. Not interchangeable terms.

Can the grid be hidden for just one person in a shared file?

Depends which toggle you use. An individual grid’s visibility, set with the eye icon in a frame’s Layout guide section, is a property of the frame stored in the file, so every collaborator sees the same state. The global switch is a different animal: View > Layout guides in the Zoom or view options menu, or the Shift G shortcut, is a personal view setting in the same category as Rulers or the pixel grid. Turning that off changes your view and nobody else’s.

Can the Shift G shortcut be remapped?

Not inside Figma. You can switch between supported keyboard layouts in preferences, but custom shortcut remapping isn’t offered in the app. Karabiner on Mac or AutoHotkey on Windows handles it at the OS level if you really need Shift G to be something else.

What Does a Figma Layout Grid Cost to Maintain Across a Team?

Applying one costs nothing. A shared library style is where the ongoing upkeep starts: someone owns the style, keeps the frames that need the grid free of Auto Layout, and republishes when spacing rules change.

Teams on a free Starter plan can’t publish a shared style at all, and any Auto Layout frame in that same file blocks the grid outright, so both limits tend to surface together during a single onboarding push.

Reusing one grid style across every screen also means a single miscalibrated gutter value repeats everywhere that style is applied. That’s the trade you make for system-wide consistency.

Once hiding and showing the grid is second nature, building that style into a full design system in Figma is the natural next step.