Skip to content
Chapter 01 of 05 · 3 lessons · ~26 min

UX Foundations

Get started in Figma, understand what UI and UX really mean, and turn ideas into wireframes.

YOUR PROGRESS0%
/ Lessons in this chapter
01
Figma Tutorial for Beginners How to create a Figma file, use frames, shapes, text and images, and find your way around the interface. Coming soon
02
UI vs UX: What’s the Difference? What UI and UX mean, how they work together and the simple process designers use. Coming soon
03
How to Make a Wireframe How to plan a page with a wireframe, from quick sketches to a clean grayscale layout in Figma. Coming soon

Chapter practice task

Task: Wireframe a landing page for a simple product or service

  1. Write a one-paragraph brief: who the users are, what they need and what the page should achieve.
  2. List the questions a visitor would have, in order.
  3. Sketch three quick layout ideas on paper.
  4. Build the best one as a grayscale wireframe in Figma.

By the end of this chapter

  • You can create files, frames and basic shapes in Figma
  • You can explain UI and UX to a client in plain words
  • You can plan a page with a wireframe before thinking about colors and fonts

Quick answers for this chapter

Should I start with UI or UX?

UX first. Decide what the page must do and in what order, then make it look good.

Do I need to sketch on paper?

It’s optional but fast. Paper sketches help you explore ideas without getting stuck on details.

How detailed should a wireframe be?

Enough to show structure, content and priority. No colors, no final images.