Pre-CoursePre-CourseBefore Week 1

Requirements & Setup

Learning outcomes

Have design software installed and working
Understand what tools are needed and why
Be comfortable navigating a design workspace/canvas

Core concepts

Design software setup (Figma — free, browser-based, industry-standard)Workspace navigationFile types and export basics

Lessons

2–3 days before Week 1 begins

Module goal

Get every learner from “I have no design software or vocabulary” to “I have a working Figma setup and understand the basic concepts everything else builds on.”

Lesson 1Why Figma, and what it actually is

Figma is a browser-based design tool — it runs inside a web browser rather than being installed as separate software, and files are stored in the cloud automatically rather than saved manually as local files. It has become the industry-standard tool for digital design work, used for everything from logos and social media graphics to full app and website interfaces.

Why this tool specifically

It is free for individual use, needs no installation or powerful hardware, and — critically — is the tool most design jobs and freelance briefs actually reference. Learning it is directly transferable to real client and employer expectations.

Go to figma.com and create a free account (email or Google sign-in)
Once logged in, click “New design file” to open a blank canvas
Get familiar with the main interface regions, covered in Lesson 2

Lesson 2The Figma interface — a guided tour

Rather than listing every button, focus on the handful of areas you will use constantly from Module 1 onward.

Region	What it is
The Canvas	The large central area where design work actually happens
The Toolbar (top)	Tools for creating shapes, text and frames
Layers Panel (left)	Every element on the canvas as a list, nested to reflect grouping
Design/Properties Panel (right)	Shows and controls size, colour, position and font of whatever is selected
Frames	A defined “page” or artboard that content lives inside — most projects start by creating a frame at a set size (Instagram post, business card)

Don't memorise it

The goal is orientation, not fluency. Fluency comes from repeated use across the course. Module 5 (Figma Essentials) returns to the tool in much greater depth, once there's actual design context to apply it to.

Lesson 3Vector vs. raster graphics

This is one of the most foundational technical concepts in graphic design, worth understanding clearly before any design work begins.

Raster graphics are made of a fixed grid of pixels — like a digital photograph. Zoom in far enough and the image becomes visibly blocky, because there's a finite amount of pixel information. Common formats: JPG, PNG.
Vector graphics are made of mathematical paths — points, lines and curves defined by formulas rather than fixed pixels. They scale to any size with no loss of quality, because the shape is recalculated at whatever size it's displayed. Figma works primarily in vectors.

App icon to storefront sign

A logo must work on a tiny app icon and on a large storefront sign. Built as a raster image sized for the icon, blowing it up would look blurry and blocky. Built as a vector, it scales perfectly — which is exactly why professional logos are vectors, and why this distinction matters from day one.

Lesson 4Common file formats and when to use each

Format	Type	Best used for
PNG	Raster	Images needing transparency (a logo over a coloured background)
JPG	Raster	Photographs — smaller file size, but no transparency support
SVG	Vector	Logos, icons — anything that must scale without quality loss
PDF	Either	Print-ready documents, multi-page files, client-facing deliverables

A quick decision habit

Does this need to scale or stay editable? → SVG. Is it a photo, or does it need small file size for the web? → JPG. Does it need a transparent background? → PNG.

Guided labs

Design it yourself

Lab — your first Figma file

1.Create a new Figma file
2.Create a Frame sized for an Instagram post (select the “Instagram Post” preset from the frame size options)
3.Draw a basic shape inside the frame (rectangle or circle) using the toolbar
4.Change its fill colour using the right-hand properties panel
5.Select the shape and export it twice — once as PNG, once as SVG — then compare the two resulting files
6.Rename the layer in the Layers Panel from its default name to something descriptive, like “Background Circle”

Teaching point

Comparing the two exports directly is the point — the format lesson lands far harder by seeing the difference than by reading about it.

Success criteria

You have a saved Figma file containing one named, coloured shape, exported successfully in two different formats.

Knowledge Check

Multiple choice • instant feedback

Question 1 of 6

What's the key structural difference between a vector graphic and a raster graphic?

What you read

Study material

Setting up a free Figma account
Overview of the Figma interface (canvas, layers, toolbar)
Why designers use vector tools vs. raster tools
Basic file formats: PNG, JPG, SVG, PDF — when to use each

What you understand

Key takeaways

— Design is a tool-driven craft, but the tool serves the idea, not the other way round
— A structured workspace (layers, frames) keeps projects manageable
— Choosing the right export format matters for how the work will be used

Hands-on lab

Try it yourself

Lab tasks

1.Set up a Figma account
2.Create a new file and draw a basic shape
3.Export the shape as a PNG

Knowledge check

What's the difference between vector and raster graphics?
When would you export as SVG vs. PNG?

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.