Grids, margins and a spacing system

0:00 Grids, margins and spacing

Here's a secret professional designers don't always admit. A lot of what looks like talent is actually structure. They decide where things can go before they decide what goes there. That structure is a grid, plus a spacing system. Without them, every post is a hundred tiny decisions: how far from the edge, how big a gap, where the logo sits. With them, most of those decisions are already made. In this lecture, you'll learn the anatomy of a grid, how to choose one for social formats, how to build a spacing scale, how to respect platform safe zones, and how to set up a reusable grid template in Figma. By the end, your posts will look consistent and take less time.

0:53 Why grids

Why does this matter? Two reasons. First, consistency. When every post uses the same margins and positions, your feed looks like one brand instead of many. Second, speed. A grid removes decisions, so you focus on content. Think of lined paper. You could write on a blank page, but lines keep your handwriting straight without you thinking about it. A grid is lined paper for layouts. And here's the thing that surprises people. Grids don't make designs boring. They make intentional rule-breaking possible. You can only break a line on purpose if there's a line to break.

1:35 Grid anatomy

Let's name the parts. Margins are the space between content and the canvas edge. They keep content away from the edges and from platform interface elements. Columns are vertical divisions inside the margins, giving you consistent widths. Gutters are the gaps between columns. Rows, or a baseline, give vertical rhythm. And the live area is everything inside the margins, where important content should sit. For a ten eighty pixel wide canvas, a margin somewhere around sixty to a hundred pixels with four or six columns works well. Here's the key idea. The exact numbers matter less than using the same numbers every single time.

2:20 A spacing scale

Now the spacing system. Random gaps, like thirteen pixels here and twenty-two there, make designs feel slightly messy even when nobody can say why. A spacing scale fixes this by limiting you to a few values. Many digital teams use multiples of four or eight: eight, sixteen, twenty-four, forty, sixty-four, ninety-six. Use small values inside groups, larger values between groups, and the largest for canvas margins. This directly supports proximity, from the previous module. And in tools like Figma, you can save these values as variables, so everyone on the team uses the same spacing without memorizing numbers.

3:03 Safe zones

Let's talk about safe zones, because platforms put their own interface on top of your design. Profile names, captions, buttons, progress bars, and on vertical video, the like, comment and share icons down one side. Anything important in those areas can be hidden. So keep headlines, faces, logos and calls to action inside a central safe area, away from the top and bottom of nine by sixteen designs and away from the side where the action buttons sit. Overlays change as apps are redesigned, so check the platform's current guidance or ad safe-zone templates before a campaign. And preview on a real phone.

3:48 Worked example 1: a tips carousel

Worked example one, simple. A three-tip carousel slide. Without a grid, the title sits wherever it fits, the tips wander, and the handle moves between slides. With the grid: margins of eighty pixels, six columns. The title always spans columns one to five in the top rows. Each tip sits in columns one to six with a sixteen pixel gap inside, and forty pixels between tips. The handle sits bottom left, the slide number bottom right, always inside the margin. Swipe through the carousel and nothing jumps. That stability is what makes a carousel feel professional, and it lets the viewer focus on the content instead of hunting for it.

4:36 Worked example 2: property carousels

Worked example two, a business scenario with illustrative details. Zainab manages social media for a real estate agency in Lahore. Each property gets an eight-slide carousel. Before, margins ranged from twenty to fifty pixels, text jumped around, and she counted eleven different spacing values in one carousel. Every slide was designed from scratch. She builds one template: eighty pixel margins, six columns, a spacing scale of four values, a fixed zone for the headline, a full-bleed image zone, and fixed spots for the logo and slide number. Now she duplicates the template, drops in photos and details, and checks the critique list. Her carousels look like one brand, and production is much faster.

5:25 Watch me do it: a Figma grid template

Watch me do it in Figma. I press F for the frame tool and set ten eighty by thirteen fifty. I name it feed four by five template. In the right panel, I add a layout grid, set it to columns, six of them, stretch, with an eighty pixel margin and a twenty-four pixel gutter. Next, I open variables and create my spacing scale: space extra small eight, small sixteen, medium twenty-four, large forty, extra large sixty-four. Now I type a headline and body text, select both, and press shift A to wrap them in auto layout. I set the gap to the small spacing variable. Then I add a locked safe-zone layer and turn the frame into a component. Every future post starts here.

6:19 Breaking the grid on purpose

One more idea: breaking the grid on purpose. Once you have structure, you can create energy by breaking it deliberately. An image that bleeds off the edge. A big number that crosses two columns into the margin. A product that overlaps a background panel. These work because everything else is aligned. The break looks intentional, not accidental. The rule is simple. Break the grid with one element, for a reason, like emphasis or movement, and keep everything else on the grid. If you break it with three elements, you don't have a grid anymore. You have a mess.

7:02 Common mistakes

Common mistakes. Using different margins on every post. Letting text touch or almost touch the edge. Random spacing values. Ignoring safe zones, so the call to action hides behind a like button. Building a grid and then not using it. And overcomplicating: a twelve-column grid on a single quote post. Match the grid to the content. Single column for quotes and announcements. Two columns for comparisons. Three or four for product grids. And a modular grid with rows for dense carousels. Keep it as simple as the content allows.

7:41 Recap and try this now

Let's recap. A grid is margins, columns, gutters and rows, and a spacing scale limits your gaps to a few values. Use the same numbers every time, keep important content inside safe zones, and break the grid only on purpose, with one element. Build your grid once as a template, in Figma with layout grids, spacing variables and auto layout, or with guides in your tool of choice. Try this now. Build a reusable four by five template with margins, a column grid and a written spacing scale. Recreate one of your existing posts inside it, and put the old and new versions side by side. Notice how much calmer the new one feels.