The Secret Ingredient Every Designer Ignores (Until It’s Too Late)
How Figma Grids transformed my designs from amateur to professional overnight
There’s a moment every designer remembers — the one where everything clicks.
For me, it didn’t come from a new plugin, a viral design trend, or spending hours perfecting shadows and gradients. It came from something far more unglamorous: grids.
When I first started using Figma, I skipped grids completely. I thought they were one of those optional, time-consuming extras that senior designers used to feel important. My layouts looked… fine. Balanced-ish. But no matter how much I tweaked my typography or polished my color palette, something always felt off. My designs had that unmistakable quality that every beginner dreads — they looked amateur.
Then I started my UX/UI Design internship, and on day one, my supervisor asked me to apply a proper grid to a design I’d submitted. I did it reluctantly. And then I just stared at the screen.
It was like someone had tuned an out-of-key instrument. The layout didn’t just look better — it looked professional. Like something you’d see in a real product. The transformation was instant and it was magical, and I’ve never skipped grids since.
If you’re where I was, this article is for you.
What Even Is a Grid (and Why Should You Care)?
A layout grid is an invisible structural system that sits beneath your design. It divides your canvas into columns, gutters, and margins — giving every element a reason to be where it is.
Think of it like architecture. A beautiful building isn’t just aesthetically pleasing — it’s structurally sound. Grids are the structural soundness of a UI. Without them, you’re essentially decorating a house built on sand.
More practically: grids make your designs responsive. When you design for the real world, your layouts need to adapt across screen sizes — desktop monitors, tablets, phones. A grid system gives you a shared language to do that consistently, whether you’re handing off to a developer or moving between artboards yourself.
The Three Screens You’re Always Designing For
Before we dive into Figma, here’s the foundational concept: every modern UI design system is built around three viewport categories.
Desktop — Wide screens, typically 1440px or wider. You have room to breathe, so columns and margins are more generous.
Tablet — Mid-range screens, roughly 768px–1024px. Less horizontal real estate, so the grid contracts.
Mobile — Small screens, typically under 600px wide. You strip back to the essentials.
The grid settings you choose for each are not arbitrary — they’re a considered response to the space available. Let me walk you through exactly what that looks like.
Setting Up Grids in Figma: A Practical Walkthrough
Open a frame in Figma. On the right panel, look for Layout Grid and click the + icon. This is where the magic happens.
Desktop Grids
Desktop gives you the most flexibility. Here are the three most common configurations:
Option 1 — Comfortable and Spacious
- Type: Stretch | Columns: 12 | Margin: 100px | Gutter: 24px
This is your go-to for a premium, airy feel. The 100px margin on each side frames your content generously, and 24px gutters keep columns clearly separated without wasting space. Think editorial sites, portfolio layouts, marketing pages.
Option 2 — Tight and Content-Rich
- Type: Stretch | Columns: 12 | Margin: 32px | Gutter: 32px
Equal margins and gutters create a balanced, efficient layout. This suits dashboards, SaaS apps, or any interface where you need to maximize horizontal content space while keeping structure intact.
Option 3 — Centered with Fixed Column Width
- Type: Center | Columns: 12 | Width: 88px | Gutter: 16px
The “Center” type is different — instead of stretching columns to fill the frame, it anchors your grid to the center of the screen with fixed-width columns. This is excellent for very wide monitors where you want content to stop expanding at a certain point, preserving readability.
Pro tip: 12 columns is the gold standard for desktop because it divides evenly into halves, thirds, quarters, and sixths — giving you enormous flexibility for any layout combination.
Tablet Grids
Moving to tablet, we drop from 12 columns to 8. Why? Because you have less space, and cramming 12 columns into a medium-width screen makes each column so narrow it becomes unusable.
Get Heythem’s stories in your inbox
Join Medium for free to get updates from this writer.
Option 1 — Spacious Tablet
- Type: Stretch | Columns: 8 | Margin: 88px | Gutter: 24px
The large margin keeps content from hugging the edges of the screen — important on tablets that are often held in portrait mode.
Option 2 — Balanced Tablet
- Type: Stretch | Columns: 8 | Margin: 64px | Gutter: 32px
Slightly tighter margins with wider gutters. This creates a clean, breathable layout that works well for content-heavy pages like news apps or e-commerce grids.
Option 3 — Compact Tablet
- Type: Stretch | Columns: 8 | Margin: 32px | Gutter: 20px
This configuration maximizes usable width — ideal when you’re designing productivity tools or data-heavy interfaces where every pixel counts.
The principle: As screen size shrinks, you generally reduce columns and tighten margins proportionally. Your content adapts, but the rhythm of the grid remains consistent.
Mobile Grids
Mobile is where grids matter most and where beginners make the most mistakes. At this screen size, there’s no room for ambiguity. Every element must align.
For all three mobile configurations in our cheat sheet, the settings are consistent:
- Type: Stretch | Columns: 4 | Margin: 24px | Gutter: 16px
Four columns is the standard for mobile. It gives you enough structure to support complex layouts (two-column card grids, split content blocks) while keeping the design tight and legible. The 24px margin gives your content breathing room from the screen edge, and the 16px gutter cleanly separates columns.
The reason these values stay constant across mobile variants is intentional — consistency is the point. On small screens, you want your grid to be a reliable, rigid scaffold. Your creativity lives in how you arrange content within that scaffold, not in reinventing the grid itself.
The One Rule That Ties It All Together
Here’s the thing most design tutorials don’t tell you: the specific numbers matter less than the habit of using grids at all.
Whether you use 24px gutters or 32px gutters isn’t what separates amateur from professional work. What separates them is whether every element in your design has a reason to be where it is — whether there’s an invisible system underneath that creates the sense of intention and order that viewers feel even when they can’t name it.
Grids are that system.
When you align a button to a column edge, snap a card to span exactly three columns, or ensure that every piece of text starts at the same left margin — you’re not being pedantic. You’re building trust with the person who’ll use your product. You’re telling them, subliminally, that someone thought carefully about this.
Start Here
If you’ve never used grids before, here’s the simplest possible starting point:
- Create a Mobile frame (375px wide) in Figma
- Add a Layout Grid: 4 columns, 24px margin, 16px gutter
- Design one screen and make sure every element snaps to the grid
- Duplicate the frame, switch to Desktop (1440px), and update your grid to 12 columns, 32px margin, 32px gutter
- Adapt the same layout for the larger screen
That exercise alone — doing it just once — will change how you see design forever.
Final Thought
I spent months wondering why my designs felt off, tweaking things that didn’t need tweaking, looking for a magic shortcut. The shortcut was always there. It was just hidden behind something I was too impatient to try.
Grids won’t make you a great designer overnight. But they’ll make everything you design look better immediately — and more importantly, they’ll train you to think in systems, which is the real foundation of great UI work.
Apply the grid. Trust the structure. Then do something beautiful inside it.
Found this helpful? Follow for more practical UX/UI tips from someone who learned the hard way.
