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.
Every screen you design in Figma lives inside a frame. A frame is a container with its own boundaries, background, and layout rules, and it is what Figma treats as a "screen" when you move into prototyping. Learning to create, size, and nest frames well is the first practical step toward a prototype that behaves predictably rather than one that falls apart the moment you resize something.
On top of frames sit two tools that give your layouts structure: layout grids (columns, rows, and uniform grids that keep spacing and alignment consistent across screens) and constraints (rules that tell child objects how to anchor and stretch when their parent frame changes size). Device presets and safe areas connect these ideas to real hardware, so your mobile screen is actually the size of a phone and your important content is not hidden behind a notch or a home indicator. Finally, arranging frames on the canvas in a readable order turns a pile of screens into a flow that a reviewer or teammate can follow.
As you watch, pay attention to three things: where the presenter clicks to create or select a frame versus a group, how constraints are set in the right-hand panel and what changes when the frame is resized, and how grids are used to justify spacing decisions instead of eyeballing them. Try pausing and reproducing each step in your own file — these skills are muscle memory, and they are much faster to learn by doing than by watching.
A short official tutorial on resizing frames in Figma Design, focused on what happens to the contents of a frame when its dimensions change. It demonstrates how constraints control the anchoring and stretching of child elements, and how to temporarily ignore constraints when you want contents to stay put. Expect a quick, demonstration-driven walkthrough rather than a conceptual lecture.
It targets the Constraints and Responsive Anchoring subtopic directly and comes from Figma itself, so the interface steps and terminology match the tool you are using.
A longer, follow-along session from Figma's education channel covering frames as the basic building block of a design file. Over roughly thirteen minutes it is likely to walk through creating frames, using device presets, nesting frames inside one another, and organising them on the canvas, with a community template provided so you can work alongside the presenter.
Its pace and beginner orientation make it the best fit for the What Is a Frame?, device presets, and screen-organisation subtopics, and the accompanying template lets you practise rather than just watch.
A compact tutorial on building flexible "bento box" grid layouts — the modular, tiled arrangements common in modern dashboards and landing pages. It shows how to construct the grid and then apply constraints so the tiles respond sensibly when the containing frame is resized.
It connects grids and constraints in a single concrete example, showing why layout structure and responsive anchoring are two halves of the same skill rather than separate features.
These three videos build the structural foundation that the rest of the module depends on. Reliable frames, grids, and constraints are what make a Figma file resize cleanly and stay consistent as you add screens, supporting MO1's goal of a working low-to-high fidelity prototype. Grids and consistent spacing are the practical mechanism behind visual hierarchy and consistency in MO2, giving you a defensible reason for every alignment decision. And because frames are the units that prototyping links connect, organising them into a readable flow prepares you for the components, auto-layout, and interactive flows required in MO3.
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.
A component library is a collection of reusable interface elements — buttons, input fields, cards, navigation bars, icons — that you define once and then reuse throughout a prototype. In Figma, you create a main component and then place instances of it wherever it is needed; editing the main component updates every instance at once. This is the practical mechanism behind the design principle of consistency: instead of manually keeping twelve buttons looking alike, you maintain one definition and let the tool propagate changes.
For this course, components matter because your interface project will likely involve many screens that share the same controls. Building a small library early saves time, reduces visual inconsistencies that confuse users, and makes late-stage changes feasible rather than painful. Variants extend this idea by grouping related states of the same element — default, hover, pressed, disabled — under one component, so you can swap states from a tidy set of properties rather than hunting through a sprawling layer list.
As you watch the three videos below, pay attention to four things: how an existing selection is converted into a main component and what visually distinguishes a main from an instance; how variants are organized and named so the property controls read sensibly; how component properties let you expose text, booleans, and nested instances for swapping; and where components live once created — the Assets panel and, for shared work, a published team library. Try each step in your own file as you watch; components are easier to understand by building than by reading about.
A short official tip video that defines what a component is, explains the reasoning for using them, and demonstrates the process of creating them in Figma. It should cover the relationship between a main component and its instances, which is the core concept behind every reusable library. Expect the practical workflow of selecting existing elements on the canvas and turning them into a component.
Produced by Figma itself, so the interface and terminology match the current tool, and it directly addresses the first two subtopics — what a component is and how to create one from existing elements.
This tip explains what variants are and how to combine related components into a single variant set, including guidance on naming variants so the resulting properties are readable. At roughly ten minutes it is the longest of the three, allowing time for the naming conventions that trip up most beginners. Expect to see how multiple states of one element are managed under a single component rather than as separate items.
It is the dedicated treatment of the component variants subtopic, from the official Figma channel, and its focus on naming addresses the most common source of messy, unusable variant sets.
This video introduces component properties and walks through creating them. Properties are the mechanism for exposing configurable parts of a component — such as text content, the visibility of an element, or which nested instance appears in a slot — directly in the right-hand panel. It should clarify how a single flexible component can replace many near-duplicate ones.
It covers the slots, nesting, and composition subtopic, showing how components can be parameterized and combined rather than duplicated, and it comes from the same official source for consistent terminology.
Together these videos give you the component workflow needed for the module outcomes. Creating components and instances is a prototyping feature named explicitly in MO3, and reusing them across screens is what makes a multi-screen interactive prototype (MO1) practical to build and revise. Variants and component properties support MO2 by making consistency and clear affordances (distinct default, hover, and disabled states) easy to maintain across your whole file. Supplement the videos by exploring the Assets panel and team library publishing in your own project file, since those are touched on only briefly here.
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.
Auto-layout is Figma's system for building frames that arrange their children automatically along a horizontal or vertical axis. Instead of nudging rectangles and text into position by hand, you declare how a frame should behave: how much space sits between items, how much padding surrounds them, how children align, and whether the frame hugs its contents, fills available space, or stays a fixed size. The result is a button that grows when its label gets longer, a card that stretches to fit a longer description, and a list that reflows when you add or remove a row.
This matters in CEN3722 because your prototype should survive contact with real content. Interfaces that only look right with placeholder text tend to break when a user name, product title, or error message is longer than you planned. Auto-layout also pairs naturally with components: a well-built auto-layout component can be reused across screens, swapped, and resized without redrawing anything, which keeps your interface consistent and your file manageable.
As you watch, pay attention to four things: where auto-layout is applied (parent frame versus nested child frames), which sizing mode each element uses and why, how spacing and padding values are set, and how the presenter tests the layout by changing content or dragging the frame's edges. Try to rebuild each example yourself rather than only watching — auto-layout is much easier to understand through your own clicks than through description. Note also that Figma's auto-layout has gained features over time, so menu names and panel positions in older videos may differ slightly from the current interface.
A beginner-oriented walkthrough of what auto-layout is and how to start using it, from applying it to a frame through adjusting direction, spacing, and padding. Based on its framing as a getting-started tutorial, expect demonstrations of simple responsive elements such as buttons and stacked lists that resize as content changes. It is a good first stop if you have never used the feature before.
Jesse Showalter is a well-known design educator, and this video directly addresses the "What Is Auto-Layout?" and "Spacing, Padding, and Alignment" subtopics at an introductory pace suited to students new to Figma.
An official Figma tutorial covering auto-layout updates announced at Config 2022, which is when more advanced sizing and spacing controls were highlighted. Expect coverage of resizing behaviors such as hug and fill, absolute positioning of elements inside auto-layout frames, and spacing options like distributing items with space between. The focus is on what each control does and when you would reach for it.
It comes straight from Figma, so the terminology and interface match the tool you are using, and it is the most direct coverage of the "Sizing Modes: Hug, Fill, and Fixed" subtopic.
A project-based Figma tutorial that builds a card component using auto-layout from the ground up. It should show how nested auto-layout frames combine image, text, and action areas into a single dynamic card, and how that card is turned into a reusable component. Watch for how the card responds when text length or frame width changes.
This video ties together the "Building Reusable List and Card Patterns" and "Auto-Layout and Component Interaction" subtopics in one concrete example, produced by Figma itself so the workflow is authoritative.
Together these videos move from concept to control to finished pattern, which supports the module outcomes directly. The introductory and official tutorials give you the vocabulary and the sizing, spacing, and alignment controls you need to assemble interface elements in Figma (MO1), while the emphasis on consistent padding, aligned content, and predictable resizing reinforces visual hierarchy and consistency in your own screens (MO2). The card-building tutorial connects auto-layout to components and reuse, which is exactly the combination MO3 asks you to demonstrate when you build prototype screens that behave realistically as content and interaction states change.
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.
A static set of screens can show what an interface looks like, but it cannot show how it behaves. Figma's Prototype tab is where you turn frames and components into something a person can actually click through: you select a layer, drag a connection to a destination, and then specify the trigger (what the user does), the action (what the prototype does in response), and the animation that carries the change on screen. Once those connections exist, you can run the file in Presentation mode and share a link so reviewers and usability-test participants can explore the flow on their own.
In this course, prototyping is how your design becomes testable. Evaluation methods you study later — heuristic walkthroughs, think-aloud sessions, task-based testing — all depend on a prototype that responds realistically enough that users forget they are looking at a mockup. Details matter here: a modal that appears over its parent screen, a list that scrolls while the navigation bar stays fixed, a button that visibly changes on hover. These are the affordances and feedback cues users rely on, and in Figma you have to wire them deliberately.
The three videos below come from Figma's own channel and move from building reusable interactive components, to timing-based transitions that run without user input, to overlay behavior for things like modals and expanding thumbnails. As you watch, pay attention to which trigger each presenter chooses and why, how the animation type (instant, dissolve, smart animate, move in) changes the perceived meaning of a transition, and how a small amount of setup in a component can remove dozens of repetitive connections from your file. Try to rebuild at least one example yourself rather than only watching.
An official Figma tutorial on interactive components, the feature that lets you define interactions between variants of a single component — for example, a default and hover state of a button, or a checked and unchecked toggle. Based on the title and description, it walks through setting up variants and wiring triggers such as hover, click, or while-pressed so the behavior travels with every instance you place. The result is that micro-interactions are defined once rather than reconnected on every screen.
It is produced by Figma itself, so the workflow shown matches the actual Prototype panel, and it directly supports the Triggers and Actions subtopic while showing the component-level approach that keeps a large prototype maintainable.
A short Figma tip focused on the "after delay" and "trigger after delay" interactions, which fire automatically once a frame has been visible for a set amount of time instead of waiting for user input. It demonstrates how to use these timed interactions to build automatic transitions — the kind of thing you need for splash screens, loading states, toast notifications, or looping demos.
It fills a gap that click-based tutorials usually skip, giving you a concrete tool for simulating system-initiated feedback, and its brevity makes it easy to apply immediately to the Transitions and Animation subtopic.
This intermediate-level Figma tip covers prototyping overlay transitions, using expanding thumbnails as the worked example and combining overlays with interactive components. Expect coverage of how an overlay is positioned relative to its trigger, how it animates in and out, and how to close it — the same mechanics behind modals, dialogs, dropdowns, and lightboxes.
It maps closely onto the Overlays and Modal Patterns subtopic and shows overlays as a layered behavior rather than a separate screen, which is the distinction students most often get wrong in their own files.
Together these videos take you from wiring individual connections to designing reusable interactive behavior, which is what MO3 asks for: demonstrated use of components and interactive flows to simulate realistic interaction. The interactive components tutorial and the overlay transitions tip give you the mechanics needed to build a clickable, navigable prototype of your own interface project (MO1), at whatever fidelity your current screens support. The timing and animation choices discussed across all three — how feedback appears, how consistently states respond, how an overlay signals that it sits above the page — are practical applications of visual hierarchy, consistency, and affordance in a working prototype (MO2). Watch them in order, then rebuild the patterns in your project file before sharing a preview link for feedback.
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.
High-fidelity design is the stage where a grey-box wireframe becomes something that looks and feels like a real product. The structural work is already done — boxes, spacing, and flow — and now you decide what the interface actually looks like: colour palettes, type scales, photography and fills, icons, and subtle effects such as shadows, blurs, and overlays that communicate elevation and focus.
This matters in CEN3722 because visual properties are not decoration; they carry meaning. Type size and weight tell users what to read first, colour signals state and status, consistent icons make actions recognisable, and a shadow suggests that something is clickable or floating above the page. Figma supports this through styles (and variables) — reusable definitions for colour, text, and effects — so that a change made once propagates everywhere, which is the practical foundation of a design system.
The three videos below focus on the styles side of high-fidelity work, with the deepest coverage on typography and text hierarchy. While watching, pay attention to how each presenter decides what to turn into a reusable style versus what stays a one-off local setting, how styles are named and organised, and how font size, weight, and spacing are used to build a readable hierarchy. Treat the techniques as transferable: the same create-once-reuse-everywhere logic applies to colour styles, effect styles, and the image fills and icon assets you add to your own project.
Part of Figma's official series on using Figma as a product person, this lesson covers styles and variables — the reusable definitions that hold colour, text, and effect values in a file. Expect a walkthrough of creating styles from selected objects, applying them across a lightweight prototype, and an introduction to how variables extend this idea for values that change across contexts such as themes or modes.
It comes straight from Figma, so the terminology and interface match the current tool, and it directly addresses the defining-and-applying-styles foundation that underpins colour, typography, and effects alike.
A Figma-produced tutorial on typography fundamentals: adding text, formatting it, and adjusting properties such as font family, size, and weight. The description indicates it works from headline formatting toward building visual hierarchy, so you should see how differences in type settings establish an order of reading on a screen.
It pairs the mechanics of text editing in Figma with the design principle of hierarchy, which is exactly the combination the typography subtopic requires, and it is pitched at an introductory level suitable for students new to the tool.
A short, practical demonstration of an efficient workflow for creating text styles in Figma, framed around the needs of a UI/UX designer building a design system. In under four minutes it should show how to turn a set of text layers into named, reusable styles rather than defining each one by hand.
It complements the broader typography video with a speed-focused, system-minded technique, reinforcing the consistency and reusability habits you will need when applying a type scale across many frames in your project.
Together these videos move your prototype from structure to finished appearance, supporting MO1 by supplying the visual-polish skills that distinguish a high-fidelity mockup from a wireframe. The typography videos address MO2 directly: establishing hierarchy through type and maintaining consistency through shared, named styles are core applications of the design principles the module asks you to demonstrate. The styles and variables lesson supports MO3 by showing the reusable-asset mindset that also governs components and systematic design work, so that colour, text, and effect decisions stay coherent across every screen of an interactive flow.
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.
This topic is where everything you have practiced in Figma comes together as a team deliverable. Rather than learning a new tool feature in isolation, you will plan the scope of your group project, agree on a screen inventory, split the build across team members, and then move through a structured cycle of self-review, peer evaluation, and iteration before submitting a shareable prototype link.
The practical challenge in group prototyping is consistency. When four people build screens in the same file, buttons drift in size, colors multiply, and flows stop connecting. Shared libraries, reusable components, and a clear naming and page structure are what keep a multi-person file coherent, and they also make design QA much faster because you can check one component instead of twenty copies of it. Equally important is the collaborative side: mapping flows together before anyone starts pushing pixels, and giving and receiving feedback in a form your teammates can actually act on.
As you watch, look for three things. First, how shared components and libraries let a team work in parallel without the design falling apart. Second, how to safely test and update a component after feedback arrives, so iteration does not break screens other people built. Third, how a collaborative whiteboard can be used up front to agree on scope, user flows, and task assignments, and later to collect peer evaluation notes in one visible place.
Part of Figma's official learning series on prototyping as a product person, this lesson focuses on libraries: collections of shared styles and components that can be published and reused across a file or team. Expect coverage of why you would build a library, how publishing and consuming shared assets works, and how this supports consistency in a lightweight prototype.
Produced by Figma itself, so the workflow shown matches the current product, and libraries are the single most useful mechanism for letting several group members build different screens that still look like one product.
A short official Figma video on updating and testing design system components, using branching as a space to explore changes before they are applied to the main file. It walks through the idea of trying a component update in isolation, reviewing it, and then merging it back.
This maps directly onto the iterate-based-on-feedback subtopic: it shows a safe, reviewable way to act on peer evaluation comments without breaking screens your teammates are still working on.
A beginner tutorial from CharliMarieTV introducing FigJam, Figma's collaborative whiteboard, and the tools it offers for brainstorming and building user flows. It covers the basic toolset and how to assemble a flow diagram with a team.
It fits the planning and feedback ends of this topic, giving your group a shared space to define project scope, lay out the screen inventory and flows, divide work, and later gather peer evaluation notes where everyone can see them.
Together these videos support the module outcomes by addressing the parts of prototyping that only show up in team work. The FigJam tutorial helps your group agree on flows and screens before building, which feeds directly into constructing an interactive prototype (MO1) with coherent interactive flows (MO3). The libraries lesson supports consistency and visual hierarchy across screens built by different people (MO2) and reinforces component-based construction (MO3). The component update and branching video closes the loop, showing how to apply peer feedback to shared components without destabilizing the prototype, so your final submission remains a working, realistic simulation of user interaction (MO1, MO3).
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.