Figma is a browser-based interface design tool that lets you move from a blank canvas to a clickable, shareable prototype without leaving one file. In this topic you will get oriented to the workspace itself: the toolbar, the layers and assets panel on the left, the design and prototype panels on the right, and the canvas where frames live. Knowing where things are is the prerequisite for everything else in this module, because later work on components, auto-layout, and interactions all happens through those same panels.
Beyond the interface, this topic establishes how you will organise and share your work. Figma files contain multiple pages, which is how most teams separate exploration, wireframes, final mockups, and flow diagrams; consistent naming of pages, frames, and layers makes a file readable to teammates and graders alike. Sharing is link-based, with view, comment, and edit permissions, plus a presentation mode for running a prototype — this is how you will submit and demo your project work.
The through-line is the module workflow: wireframe or mockup first, then connect frames with prototype links and transitions, then test and share. As you watch, pay attention to when each presenter switches from the Design tab to the Prototype tab, how they select a hotspot and drag the connector to a destination frame, and which interaction and animation settings they adjust. Try to replicate each step in your own file rather than watching passively — the tool is learned through repetition.
A longer beginner tutorial on Figma prototyping from the same channel, with more room to explain each step. Expect fuller treatment of connecting screens, configuring interactions and transitions or smart animate, and previewing and sharing the finished prototype. The extra length allows more context on how a design file is structured and navigated while prototyping.
It reinforces and extends the shorter tutorial with a slower, more detailed pass, which helps when you are following along in your own file and need to see the panel settings in full.
A short, focused introduction to prototyping in Figma aimed at complete beginners. It is likely to show switching to the Prototype tab, drawing connections between frames, choosing trigger types such as on-click, and running the result in presentation mode. At roughly six minutes it works well as a first pass over the mockup-to-prototype step of the workflow.
Its brevity and recency make it an efficient orientation to the end-to-end workflow, covering exactly the transition from static frames to a shareable, clickable prototype that this topic is about.
A beginner-oriented walkthrough of building a wireframe in Figma, which is the natural starting point of the module workflow. Based on its title and framing, it should cover creating frames, placing basic shapes and text, and blocking out layout structure at low fidelity before any visual styling is applied. Expect exposure to the core toolbar, the layers panel, and the right-hand design properties as the wireframe takes shape.
It introduces the Figma interface in the context of a real first task, so panels and tools are learned by use rather than in isolation, and it sets up the low-fidelity starting point that the prototyping videos build on.
Together these videos take you through the sequence the module itself follows: wireframe a screen, refine it into a mockup, then wire frames together into an interactive prototype and share it. That directly supports MO1 by modelling the construction of a low-to-high fidelity interactive prototype, and MO3 by demonstrating Figma's prototyping features such as hotspots, triggers, transitions, and presentation mode. The wireframing video also lays groundwork for MO2, since decisions about layout, grouping, and consistent frame structure are where visual hierarchy and consistency begin; you will build on these foundations with components and auto-layout later in the module.
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.