Figma is a browser-based design and prototyping tool that teams use to sketch ideas, build user interface screens, link those screens into clickable prototypes, and hand specifications off to developers. In this course it is the primary tool you will use for your project: you will create an education team workspace (free for students through Figma's education plan), use FigJam boards for brainstorming and affinity mapping, build UI mockups and prototypes in Figma design files, and use Dev Mode to inspect spacing, colors, and generated code snippets when you move from design to implementation.
What makes Figma especially useful here is collaboration. Multiple teammates can work in the same file at the same time, leave comments directly on a screen, and share a single link instead of emailing files back and forth. That matters for the course project, where you will be assigning team roles and iterating on designs based on feedback rather than producing one final artifact alone.
The videos below are hands-on tutorials. As you watch, focus less on memorizing menu locations (Figma's interface changes over time) and more on the workflow: how a rough wireframe becomes a styled screen, how frames are connected into a prototype that someone can actually click through, and how reusable components keep a design consistent. Try following along in your own file rather than just watching, and pause to recreate each step.
A beginner-oriented walkthrough of building wireframes in Figma, aimed at people who have not used the tool before. Based on the title and channel, expect coverage of the basic canvas, frames, shapes and text, and how to lay out low-fidelity screens that represent structure before visual polish. It is framed from a UX practitioner's perspective rather than a pure graphics-tool perspective.
Wireframing is the natural first step after ideation, so this video supports the "Designing UI with Figma" subtopic by showing how to get from a blank file to a usable screen layout. The beginner framing matches students who are opening Figma for the first time in this course.
A follow-up tutorial in the same beginner series that moves from static screens to interactive prototypes. It is likely to cover connecting frames with prototype links, choosing triggers and transitions, and previewing or sharing the resulting clickable flow. This is the step that turns a set of mockups into something a user can test.
Prototyping is central to the course project because it is what you will share for feedback and usability evaluation, and this video pairs directly with the wireframing tutorial to complete the design-to-prototype workflow.
An official Figma tutorial on interactive components, a feature that lets you define states such as default, hover, and pressed inside a single reusable component. The description indicates it explains how to set up those states so interactions carry through everywhere the component is used, instead of being wired up screen by screen.
It comes straight from Figma, so the terminology and workflow are authoritative, and it introduces the component thinking behind design systems that makes Dev Mode handoff and team collaboration far more consistent.
These tutorials are the practical counterpart to the module's conceptual material. While MO1 and MO2 are addressed through readings on HCI history and the distinctions among usability, user experience, and accessibility, Figma is where those ideas become visible artifacts: wireframes and prototypes you can actually put in front of a user to evaluate. The videos most directly support MO3, since planning scope, platform, and team roles is only meaningful if your team shares a workspace and a common toolset. Setting up the education team workspace, agreeing on who ideates in FigJam, who builds components, and who prepares the Dev Mode handoff gives your project plan concrete substance for the rest of the course.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.