A complete breakdown — what it is, how it works, why it matters for your course, and exactly how to learn it in 3 weeks before you start teaching.
Before a single line of code is written, a designer uses Figma to decide exactly how everything will look. Think of it as Microsoft Word — but for designing screens instead of writing documents.
An architect draws a house blueprint before builders start laying bricks. Figma is your blueprint tool. You design the full website visually — every page, every button, every colour — and get the client's approval before touching WordPress. It saves enormous rework time.
No installation. Open Chrome or Edge, go to figma.com, sign up free, and you're designing. Works on any computer — even a low-spec one.
figma.com → Sign up freeYou drag, drop, resize, and style things visually. No code knowledge required. If you can use Canva, you can learn Figma — it's just more powerful.
You and a client can open the same design at the same time. They see your work live. You can share a link and they can leave comments directly on the design.
You design the desktop version, tablet version, and mobile version all in one file. Each is called a "frame." The client sees exactly how it'll look on any device.
Right now you go straight to WordPress — which means your design decisions and build decisions happen at the same time. For students, this is overwhelming. Figma separates those two stages. Students design first (no pressure, no code), get confident with how things look, then build. Their learning curve becomes manageable — and their work quality improves dramatically.
Figma has three main panels around a central canvas. Once you know what each panel is for, the whole thing makes sense immediately.
Every element on your design is listed here like a tree. Frame → Section → Elements inside. Click any layer to select it on the canvas. This is how you manage complex designs.
This is your infinite drawing board. Your frames (pages) sit on it. Zoom in and out with Ctrl+Scroll. Pan by holding Space and dragging. Everything you design lives here.
When you click anything on the canvas, its properties appear here. Width, height, colour, font, border radius, spacing — all editable from this panel.
Select tool (V), Frame tool (F), Rectangle (R), Text (T), Pen (P). You'll use V, F, R, and T for 90% of web design work. That's all you need to know to start.
These are the concepts you will teach students in Weeks 3–4 of your course. Understand these deeply and you can teach Figma with confidence.
V — Select · F — Frame · R — Rectangle · T — Text · Ctrl+G — Group · Ctrl+D — Duplicate · Ctrl+Z — Undo · Ctrl+Alt+K — Create component · Ctrl+\ — Hide panels (full canvas view)
The biggest misconception beginners have: "If I'm building in WordPress, why do I need Figma?" Here's the answer — and this is exactly what you'll tell your students on Day 1 of Week 3.
| Situation | Without Figma | With Figma |
|---|---|---|
| Client says "I don't like the layout" | You rebuild the WordPress page — hours of work lost | You update the Figma design in minutes and get re-approval — nothing is built yet |
| Client needs to approve before you start | You build it, show it, then change it — painful loop | You share a prototype link, they click through it, they sign off |
| Teaching a beginner | They learn design AND technology at the same time — overwhelmed | They learn design first, gain confidence, then tackle WordPress — logical progression |
| Pricing conversations | Harder to justify cost without showing a deliverable | Figma mockup = a tangible deliverable clients understand and value |
| Your professional positioning | "I build WordPress sites" | "I design and build websites" — a more premium positioning |
Once you know Figma, your own client workflow changes: you design first → get paid a design fee → build in WordPress → get paid a build fee. That's two income stages instead of one. Many Nigerian designers charge ₦30,000–₦50,000 just for the Figma mockup stage before any WordPress work begins.
This is the end-to-end workflow you'll teach students — and the one you'll start using yourself. Every step has a clear deliverable the client can see and approve.
One of the most painful experiences in freelancing is rebuilding a WordPress site because the client didn't like the design. Figma prevents this entirely. The rule is simple: nothing gets built in WordPress until the Figma design is approved in writing. This protects both the designer and the client.
You don't need to master everything. You need to be one level ahead of your beginner students — and confident enough to answer their questions. Here's exactly what to focus on and in what order.
Your goal is to be fluent enough to teach Weeks 3–4 of your course. That means: creating frames, using basic shapes and text, building components, setting up styles, making a prototype, and sharing a link. Everything else can come with time.
Sign up at figma.com free. Watch Figma's own "Figma for Beginners" YouTube series (4 videos, ~45 min total — official and excellent). Then open a blank file and spend 1 hour just creating rectangles, text, and colours. Don't try to make anything look good yet.
Create a 1440px desktop frame. Design a basic homepage for a fictional business — navbar, hero section, 3 service cards, footer. Don't worry about perfection. Focus on: how do I place elements, resize them, add text, change colours. This is your practical foundation.
These three features are what separate a real Figma designer from someone just placing boxes. Watch dedicated tutorials on each. Then rebuild your Week 1 homepage using components and styles. You'll immediately see how much faster and more consistent your work becomes.
Take your Week 1 homepage and create a 375px mobile frame. Redesign the layout for mobile — single column, stacked elements, adjusted font sizes. This teaches you responsive thinking and gives you something impressive to show students.
Connect your frames with prototype arrows. Add a second page (e.g. Services). Make the navbar link to it. Then share the prototype link with someone and watch them click through it. This moment — when someone else interacts with your design — is when Figma "clicks" for most people.
Build a complete 4-page Figma design for Jidson Tech (or any real business). This becomes your teaching demonstration file — the one you open in class on Day 1 of Week 3. Students see what a finished Figma project looks like before they start theirs. This is your instructor proof of concept.
Figma's official YouTube channel ("Figma for Beginners" playlist). DesignCourse on YouTube. Figma Community — free, downloadable design files to study how professionals structure their work.
youtube.com/@FigmaGo to figma.com/community and search "website UI kit." Duplicate free professional design files. Study how components are structured. This accelerates learning faster than any tutorial.
figma.com/communityCreate a professional website mockup from scratch · Build a basic design system with colours and components · Make a clickable prototype to share with a client · Confidently teach Weeks 3 and 4 of your course · Charge a separate Figma design fee before WordPress work begins — which increases your overall project income.
Once you've spent your first week on Figma, come back and we'll start developing: (1) the full detailed course outline with session-by-session lesson plans, (2) your presentation slides for each phase, (3) student handout templates, and (4) the assessment/project briefs for each week. We'll build everything you need to walk into that Jidson Tech classroom fully prepared.