UX Design With Figma: Design Apps People Love
Research, sketch, prototype and test a real booking app using Figma's free plan
One payment of $39. Instant online access to the full written course. No subscription. Refund policy.
You research, sketch, prototype and test a real app design. You finish with a clickable prototype, the research and test notes behind it, and a written spec a developer could build from.
Who it is for. Complete beginners who want to design a phone app or website the right way: small business owners planning an app, people changing careers who need a first project, and anyone curious about how good apps are made. No design or coding experience needed.
You finish with. A tested app prototype: Tidy Paws (or your own booking or ordering app). Assemble everything you built into one package: research notes, a problem statement, a user flow, wireframes, a styled and componentized design, a clickable Figma prototype, a five-person usability test report with fixes, and a written spec a developer could build from. Use the Tidy Paws project from the lessons or your own simple booking or ordering idea with one main task and five to eight screens.
Certificate. Finish every lesson, resolve every quiz question with at least 50% right on the first try, and tick the capstone checklist — Apex Flow Academy issues a verifiable Certificate of Completion with a unique ID and a public verification page. It is a certificate of completion, not a degree, licence, accreditation or exam result.
01 · Start here: the UX loop, your brief and your Figma workspace4 lessons
Learn what UX design is, follow the five-step loop, write a one-page brief for the running project, and set up Figma's free plan with your first frames.
- 1.1What UX design is and the loop you will followFREE
- 1.2Write a one-page design brief
- 1.3Set up Figma's free plan and find your way around
- 1.4Frames, shapes and text: draw your first screen
02 · Research: learn who you are designing for4 lessons
Plan research, interview real people, turn notes into insights, and define the problem and the smallest useful app.
- 2.1Plan your research: goal, questions and five people
- 2.2Run a user interview: ask about the past and stay quiet
- 2.3Turn notes into insights with an affinity map
- 2.4Define the problem and the smallest useful app
03 · Flows and wireframes: plan the screens before you style them4 lessons
Map the user flow, sketch on paper, build gray-box wireframes on a layout guide, and design the states and the real words.
- 3.1Map the user flow for one task
- 3.2Sketch on paper: many ideas fast, then choose
- 3.3Wireframes in Figma: gray boxes, real words and a layout guide
- 3.4Design the states and write the real words
04 · Visual design: hierarchy, space, type and color4 lessons
Guide the eye with hierarchy, size things with a spacing scale and tap targets, set a small type scale, and pick colors you can prove are readable.
- 4.1Visual hierarchy: guide the eye to one main thing
- 4.2Size and space: a spacing scale and tap targets
- 4.3Typography: a small type scale you can defend
- 4.4Color and contrast you can prove
05 · Build it right: styles, auto layout, components and prototype4 lessons
Save styles once, use auto layout so boxes grow with content, build components with variants, and link the screens into a clickable prototype.
- 5.1Save your colors and text as styles
- 5.2Auto layout: boxes that grow with their content
- 5.3Components and variants: build once, reuse everywhere
- 5.4Prototype: connect the screens and make it clickable
06 · Test, improve and hand off4 lessons
Plan and run a usability test with five people, rank what went wrong, fix what matters, and hand the design to a builder. Finish with your capstone.
- 6.1Plan a usability test with five people
- 6.2Run the test: watch, listen and do not help
- 6.3Analyze the results and fix what matters most
- 6.4Hand off your design so someone can build it
What UX design is and the loop you will follow
You will be able to
- Tell UX and UI apart in plain words.
- Name the five steps of the design loop.
- Describe the project you will build.
Why this matters
Many beginners open a design tool and start drawing screens. Weeks later they learn the screens solve nothing. A simple loop of learning, planning, building and testing stops that waste. You will follow one loop from start to finish, and every module adds a piece to one project.
Learn it
UX stands for user experience. It is how a person feels, and what they can get done, when they use something. UI stands for user interface. It is the part they see and touch: buttons, words, colors and pictures. UI is one part of UX. A beautiful screen still gives a bad experience if the person cannot finish what they came to do.
Think of a restaurant. The look of the menu is UI. Getting a table quickly, understanding the menu, getting the right meal and paying without fuss is UX.
A user is the person you design for. A task is one thing that person wants to get done, such as “book a haircut”. Good UX makes the task quick, clear and hard to get wrong.
Designers work in a loop. This course uses five steps:
- Understand. Talk to real people and learn what they do today (Module 2).
- Define and plan. Name the problem, map the steps and sketch (Modules 2 and 3).
- Design. Give the plan a clear look (Module 4).
- Prototype. Build a clickable model in Figma (Module 5).
- Test and improve. Watch five people use it, fix what breaks and hand it over (Module 6).
A prototype is a model of an app that you can click through. It has no real code behind it. It lets you test an idea before anyone pays to build it. The loop repeats. A test often sends you back to an earlier step. That is normal, and it is cheap.
Figma is a design tool that runs in your browser. Its free plan is enough for everything in this course. Lesson 3 sets it up.
Your running project is Tidy Paws. It is a made-up mobile dog groomer that drives to customers. Owners need to book a groom from their phone. You will design six screens: home, choose a service, pick a day and time, tell us about your dog, check your booking, and booked. Every module ends with a piece of a written spec for these screens. The capstone is then assembly, not a surprise.
You may swap in your own idea. It needs one main task and five to eight screens. Ordering coffee, booking a class or booking a haircut all work.
See it in action
Example (illustrative): Priya owns a dog and works until 5 pm. The groomer only answers the phone from 9 to 5. Her task is to book a groom. Her experience is bad because she must call during work. No button color can fix that. The fix is a UX change: let her book at 9 pm from her phone.
Now sort five design choices into UX or UI. Ask one question each time: what does this change for the person?
| Choice | UX or UI? | Why |
|---|---|---|
| The button is green | UI | It changes how it looks |
| Booking takes six taps, not twelve | UX | It changes the effort of the task |
| The headings use a rounded font | UI | It changes how it looks |
| The price shows before she books | UX | She can decide with what she needs |
| The icons use thin lines | UI | It changes how it looks |
Two of the five are UX. UX choices change what a person can do. UI choices change how it looks. Some choices are both, and that is fine.
The Tidy Paws idea in one line: busy dog owners book a grooming visit on their phone without phoning during work hours. Right now this is a guess. Module 2 checks it with real people.
Common mistakes
- Treating UX and “making it pretty” as the same job. Beginners judge a design by its looks. Fix: judge it by whether the person finishes the task.
- Starting with screens. It feels productive. Fix: write the user and the task first.
- Picking a project that is too big, such as a whole online shop. Fix: one main task and five to eight screens.
You are done when
You can explain UX and UI in one sentence each. You can list the five steps in order. You have written down your project with its user and its one main task.
You finished the free lesson
That is one lesson from the course. The full course gives you every remaining lesson, a quick check and a hands-on task in each one, and the workbook of templates and checklists.
Full course$39
- A free Figma account on the Starter (free) plan. Check Figma's current plan page for limits. Everything in this course fits inside the free limits.
- A computer with a modern web browser. The Figma desktop app also works. Free.
- Paper, a pen and a phone camera for sketching. Free.
- A phone to open your finished prototype (optional but recommended). The prototype opens in the phone's browser; the Figma mobile app is free but needs a Figma account.
- A free contrast checker such as the WebAIM Contrast Checker in your browser. Free.
- Five willing people for interviews and testing. They can be friends of friends.
- A notes tool for your written spec: any free document or notes app.
- Nothing to buy. Figma's Dev Mode and shared team libraries are paid features, and the course shows a free path for both.
- No design or coding experience
- Comfortable using a web browser, a mouse or trackpad, and copy and paste
- Able to talk with five people about a small everyday problem (friends of friends are fine)
A tested app prototype: Tidy Paws (or your own booking or ordering app)
Assemble everything you built into one package: research notes, a problem statement, a user flow, wireframes, a styled and componentized design, a clickable Figma prototype, a five-person usability test report with fixes, and a written spec a developer could build from. Use the Tidy Paws project from the lessons or your own simple booking or ordering idea with one main task and five to eight screens.
- A one-page design brief and a research summary from at least three real interviews (five is the target), with an affinity map and insight statements
- A problem statement, a must / should / not-now requirements list, and a user flow for the main task
- Wireframes for every screen plus the empty, error and selected states, with a written copy sheet
- A styled design with saved color and text styles, a spacing scale, a type scale and a contrast check table
- Components with variants (at least a button and one selectable item) built with auto layout and used as instances
- A clickable Figma prototype with a working link and no dead ends on the main task
- A usability test report: tasks, script, results for five people, a ranked issue list and the fixes you made
- A written spec for every screen and a short handoff page: tokens, components, exported assets, behavior notes and open questions
- UX (user experience)
- How a person feels and what they can get done when they use a product. It covers the whole trip, not just how it looks.
- UI (user interface)
- The parts a person sees and touches: buttons, text, colors, images and icons. UI is one part of UX.
- User research
- Learning about real people, what they do, and what gets in their way, before and while you design.
- Insight
- A pattern you found in your research that explains why people act as they do, backed by evidence from your notes.
- Affinity map
- A wall of sticky notes grouped by similarity so patterns become easy to see.
- User flow
- A drawing of the steps a person takes to finish one task, including choices and mistakes.
- Wireframe
- A plain, gray-box drawing of a screen that shows layout and words but no color or style.
- Frame (Figma)
- A container on the Figma canvas. You draw one frame for each screen, and everything inside it moves with it.
- Layout guide
- Figma's overlay of columns, rows or a square grid on a frame that helps you line things up. Figma used to call it a layout grid.
- Visual hierarchy
- The order in which the eye reads a screen, set by size, weight, color, space and position.
- Spacing scale
- A short list of allowed gap sizes, such as 4, 8, 12, 16, 24, 32 and 48, so spacing stays consistent.
- Touch target (tap area)
- The area of the screen that reacts when a finger taps. It can be bigger than the icon you see.
Browse the full Academy encyclopedia
20 checks were run and recorded while writing this course (code, formulas, commands and facts), and it lists 48 official sources it was checked against. Prices, features and policies of outside tools can change, so check each tool's own website.
Created by Apex Flow Academy with AI assistance. For education only; not legal, tax, financial or medical advice. Results depend on your effort and circumstances.
HTML and CSS: Build and Launch Your First Website
You hand-build a clean, mobile-friendly site and put it online.
JavaScript From Zero: Make Web Pages Come Alive
You start with an HTML page that cannot react. You finish with a working task list app that you built, tested and reviewed yourself: it adds, marks, deletes and filters tasks, saves them in the browser, loads sample data from the internet and proves itself with automatic checks every time it opens. You will understand each part well enough to start a second app on your own.
React and Next.js: Build Modern Web Apps
You start with basic JavaScript. You finish with a multi-page Next.js app that you built, tested and put on a public web address: a catalog with search and filters, a saved list that remembers, a page for every book, a small JSON API, a form that checks its input on the server, page titles, an optimized image and automatic tests. You will understand each part well enough to start a second app on your own.