Module 04FoundationWeeks 1–2

Working with Layout & Grids

Learning outcomes

Structure compositions using grids

Core concepts

Grid systemsMarginsColumnsWhitespace

Lessons

Weeks 1–2 · Level 1: Foundation

Module goal

Understand how grid systems create consistency and structure, and close Level 1 by combining every Foundation principle into the capstone.

Lesson 1Why grids exist

Alignment, proximity and hierarchy all become far easier to apply consistently with an underlying structure, rather than placing every element by eye. A grid is that structure: an invisible framework of columns, rows and margins that elements align to, ensuring consistency within one design and across related designs.

Not a new principle

A grid is a tool for reliably achieving the alignment and consistency from Module 1, rather than eyeballing it freehand every time — practical and supportive, not another abstract rule.

Lesson 2Margins

Margins are the space between the edge of a design and its content — the buffer that keeps elements from feeling cramped against the boundary of the page, frame or screen.

The furniture analogy

A printed page with text running edge to edge feels claustrophobic, the same way a room with furniture pushed flush against every wall feels cramped. Margins aren't wasted space — they're functional space.

Lesson 3Columns

Columns divide a design horizontally into vertical sections that content aligns to. A 12-column grid is widely used across print and digital because 12 divides evenly into halves, thirds, quarters and sixths — enormous flexibility for arranging content.

No manual maths needed

Figma generates column grids automatically. The concept to lock in is that columns give every element a small number of valid horizontal positions and widths, rather than infinite arbitrary options — which is precisely what makes grid layouts look intentional.

Lesson 4Whitespace as an active design element

Whitespace (negative space) is the empty space between and around elements. Beginners instinctively try to fill every available space; professionally, whitespace is treated as an active, deliberate element in its own right.

Why premium products use so much of it

Expensive products are marketed with lots of empty space around a small central image or headline — a deliberate signal of confidence and restraint that itself communicates quality. Cramming a page reads as cheap or amateur even when the content is good. It ties back to hierarchy: the most important element stands out because nothing is competing with it.

Lesson 5Applying a grid in Figma

Select a frame
In the right-hand panel, find “Layout Grid” and add one
Choose “Columns”, set a count (e.g. 12) and a gutter (the space between columns)
Align elements to the generated column lines while placing and resizing them

The grid never exports

It's a guide, visible only while designing, and disappears from the final exported file — nothing needs hiding or deleting manually before export.

Guided labs

Design it yourself

Lab — grid-based social media post

1.In Figma, create a frame sized for a social media post (Instagram Post preset)
2.Apply a column layout grid (6 or 12 columns)
3.Design a simple promotional post — a headline, a short line of supporting text, and one shape or colour block — aligning every element to the column lines rather than placing them freely
4.Include deliberate whitespace; resist the instinct to fill every area
5.Toggle grid visibility off and on, comparing the aligned result against how it would look freehand, and note the difference

Foundation Capstone — single-page promotional flyer

1.Design a single-page flyer for a fictional local business (café, repair shop, gym or similar)
2.Use a deliberate colour palette — complementary, analogous or triadic (Module 2) — justified in writing
3.Pair two typefaces using the contrast-pairing logic (Module 3), with clear size/weight hierarchy
4.Build it on a column grid in Figma (Module 4), with every element aligned to it
5.Demonstrate at least three of the six principles from Module 1 explicitly — e.g. hierarchy, intentional proximity grouping, one instance of repetition
6.Include genuine, deliberate whitespace — not a fully packed layout

Teaching point

This is the first project requiring several interconnected decisions at once rather than one principle in isolation. Write a short rationale alongside the flyer — direct preparation for Module 10 (Working with Client Briefs), where defending design choices becomes an explicit, graded skill.

Success criteria

Every element aligns cleanly to the grid, the composition includes genuine empty space, and you can point to specific elements in the capstone flyer and correctly name which principle, colour logic or typographic decision each demonstrates.

Knowledge Check

Multiple choice • instant feedback

Question 1 of 6

What is a grid system, in plain terms?

What you read

Study material

Why grids create consistency
How whitespace is an active design element, not empty space

What you understand

Key takeaways

— Professional layouts are structured, not arranged by eye alone

Hands-on lab

Try it yourself

Lab tasks

1.Design a simple social media post using a grid system in Figma

Knowledge check

Identify grid misalignment in sample layouts

Write your answers in your own notes before moving on — explaining a concept in your own words is the fastest way to find the gaps.

Foundation capstone

Single-Page Promotional Flyer

Design a single-page promotional flyer for a fictional local business, applying design principles, a deliberate color palette, paired typography and a grid-based layout — combining all four Foundation modules.