Design Tools: Canva and Figma Basics

⚠️ Version note. Canva and Figma change their interfaces often. The four design principles and the make-something workflow don't. Last checked: 25 July 2026.

What you'll have at the end

• The four principles that make amateur design look professional
• The difference between Canva (fast, template-driven) and Figma (precise, from-scratch), and when to use each
• One finished, exported asset you made with deliberate choices

Prerequisite

• None. From zero. You do not need to be "good at art" — good layout is rules, not talent.

Good design is four rules, not a gift

Most "bad" design isn't ugly colours — it's sloppiness: things not lined up, too many fonts, no breathing room. Fix those and ordinary content looks professional. The four rules (Robin Williams' classic CRAP):

• Contrast — make different things clearly different (big vs small, bold vs light). Don't be timid.
• Repetition — reuse the same fonts, colours and spacing so it feels like one piece.
• Alignment — line things up on invisible edges. Nothing "roughly there."
• Proximity — group related things together; separate unrelated things with space.

Every step below is really one of these four.

For most "make me a poster/post," Canva wins. For "design a screen" or full control, Figma. This lesson does one asset in either — pick based on your goal.

✅ Check: you've chosen the tool that matches what you're making.

Design to the final size, not "eyeball it later." Pick the dimensions for the medium:

• Social post (square / vertical), a slide (16:9), a story (9:16), an A4 flyer.

[Screenshot: a new document/frame created at a specific size in Canva or Figma.]

✅ Check: your canvas matches where the asset will actually be used.

If it moved: Canva offers presets by type; in Figma you create a Frame and set its size. Wrong size early means recropping everything later.

Lay out your content deliberately:

1. Proximity: group related elements; push unrelated ones apart with generous space.
2. Alignment: turn on the guides and snap everything to shared edges. Left-align text blocks.
3. Contrast: make the headline clearly biggest; use one accent colour for the one thing that matters.
4. Repetition: use two fonts at most and two or three colours, reused throughout.

[Screenshot: the asset taking shape with visible alignment guides and a clear hierarchy.]

✅ Check: everything lines up on shared edges, there's a clear biggest element, and you've used ≤2 fonts and ≤3 colours.

The final polish is subtraction. Remove anything that isn't doing a job:

• Extra words, decorative shapes, a third font, a fourth colour, drop shadows that add nothing.
• Add whitespace. Crowded looks amateur; space looks confident.

✅ Check: you removed at least two things, and the asset breathes more than it did.

The right file for the job:

• PNG — screens, social, anything with sharp text/graphics (supports transparency).
• JPG — photos where a smaller file matters.
• PDF — print or documents.

[Screenshot: the export dialog with the format and size selected.]

✅ Check: you have an exported file in the correct format, at the right size, that opens cleanly.

Common mistakes

• Too many fonts and colours. Two fonts, three colours, reused. More reads as chaos.
• Nothing aligned. "Roughly there" is what makes design look amateur. Snap to guides.
• No hierarchy. If everything is the same size, nothing stands out. Make the important thing big.
• No whitespace. Cramming everything in reads as anxious; space reads as designed.
• Wrong export. A blurry JPG of text, or a screen-res image sent to print. Match the format to the use.
• Starting from a template and changing nothing. Fine to start there — but make it yours, or it looks generic.

Exercise (30 min)

1. Choose a real asset to make (an event poster, a social post, a title slide) and pick the tool (Step 1).
2. Set the correct canvas size (Step 2).
3. Build it applying the four principles — ≤2 fonts, ≤3 colours, clear hierarchy, everything aligned (Step 3).
4. Cut at least two things and add whitespace (Step 4).
5. Export in the right format and open the file to check it (Step 5).

✅ Finish check: you have one finished, exported design asset with a clear hierarchy, tidy alignment, a restrained palette, and no clutter.

Cheatsheet

GOOD DESIGN = FOUR RULES (CRAP), not talent
  CONTRAST    → make different things clearly different (don't be timid)
  REPETITION  → reuse fonts/colours/spacing → feels like one piece
  ALIGNMENT   → snap to shared edges; nothing "roughly there"
  PROXIMITY   → group related, space out unrelated

TOOL:  Canva = fast, templates, finished quick   |   Figma = precise, from scratch, UI

WORKFLOW:  right SIZE first → build with the 4 rules (≤2 fonts, ≤3 colours) → CUT clutter + add whitespace → EXPORT (PNG screens / JPG photos / PDF print)

Next lesson: PS-02 — Six Rules for Slides (L1) Related: PS-02 Six Rules for Slides (L1) · AI-11 Image Generation (L2) · CR-03 Your Portfolio (L2)