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.