A slide deck walking learners step by step through building interactive prototypes in Figma, from setting up a free account and understanding fidelity levels to progressing from low- to high-fidelity designs, intended for use as a lecture presentation or self-study reference.
Topics
This module covers 7 topics. Open a topic to see its subtopics.
Module Content
32 items.
-
-
The full combined module reading that walks through every Figma topic in sequence, opening with Figma as a cloud-based, collaborative design tool, and serving as the single continuous text students read or scroll through for the whole unit.
-
A lesson introducing Figma's browser-based, cloud-hosted environment, its main panels and tools, file organisation conventions, and the end-to-end path from blank canvas to shareable prototype, used as the module's orientation reading.
-
A lesson on frames as the foundation of every screen — setting width and height, clipping behaviour, layout grids and columns, and the frame's role in a prototype — used to teach students how to set up screen canvases before adding content.
-
A lesson on building a component library: creating one authoritative master component, placing instances, and propagating changes such as colour or corner radius across many screens, used to teach consistency and maintainability in design files.
-
A lesson on auto-layout, explaining how frames can measure and reflow their contents, how padding, spacing and resizing rules make buttons and lists grow with their text, and how to build responsive elements rather than manually repositioning objects.
-
A lesson on Figma's prototyping layer — adding interaction connections between frames, choosing triggers, actions and transitions, and testing modals and navigation — used to turn static screens into a clickable flow for usability testing.
-
A lesson on high-fidelity visual design, covering colour palettes, type scales, real content, imagery and effects that transform grey-box wireframes into convincing, shippable-looking screens, used when refining a finished layout.
-
A lesson on producing and submitting the group project prototype, treating it as both a design and coordination problem and showing how frames, components, auto-layout, styles and interactions combine into a single assessed deliverable.
-
A standalone (duplicate) version of the Figma introduction lesson covering the cloud-based workflow, interface panels and prototyping process, suitable for delivery as an individual page within the module sequence.
-
A standalone (duplicate) version of the frames, grids and screen layout lesson, explaining frame dimensions, clipping, layout grids and their prototype role as a single-page reading.
-
A standalone (duplicate) version of the component library lesson on master components, instances and global updates, delivered as its own page in the module.
-
A standalone (duplicate) version of the auto-layout lesson on responsive containers, spacing, padding and resizing behaviour, delivered as its own page in the module.
-
A standalone (duplicate) version of the interactive prototyping lesson on connections, triggers, transitions and testing flows, delivered as its own page in the module.
-
A standalone (duplicate) version of the high-fidelity design lesson on colour, typography, real content and visual polish, delivered as its own page in the module.
-
A standalone (duplicate) version of the group project lesson on assembling, coordinating and submitting the team prototype, delivered as the module's closing page.
-
A reading that orients learners to the Figma workspace — toolbar, layers and assets panel, design and prototype panels, and canvas — and explains how a design moves from blank file to clickable, shareable prototype, serving as the module's starting point.
-
A reading on frames as the fundamental screen container in Figma, covering how to create, size, nest, and apply layout grids to frames so that prototypes behave predictably when screens are linked together.
-
A reading explaining how to build a reusable component library of buttons, fields, cards, navigation bars, and icons using main components and instances, so that a single edit propagates consistently across an entire prototype.
-
A reading on Figma's auto-layout system, covering horizontal and vertical stacking, spacing, padding, alignment, and hug/fill resizing so learners can build elements that respond to content changes instead of being positioned by hand.
-
A reading on the Prototype tab that walks through connecting layers to destination frames and configuring triggers, actions, animations, and transitions to turn static screens into an interface a user can click through.
-
A reading on high-fidelity design, covering colour palettes, type scales, imagery and fills, iconography, and effects such as shadows and blur used to transform a grey-box wireframe into a polished, realistic interface.
-
A capstone reading guiding teams through scoping the group project, agreeing on a screen inventory, dividing the build among members, and following a structured self-review and submission cycle for the final Figma prototype.
-
A combined single-page compilation of all topic readings in the module, useful for reviewing the full Figma prototyping sequence from workspace orientation through to the group project deliverable in one continuous document.
-
Introduces Figma's browser-based environment, core concepts, and overall prototyping workflow, giving learners foundational context before they begin working with the tool's specific features.
-
Explains how to use Figma frames as structural containers for digital interfaces and covers how grids and layout guides help designers create consistent, well-organized screen layouts.
-
Covers how to create, organize, and reuse components in Figma — including master components and instances — so learners can build a scalable design system that stays consistent across an entire project.
-
Explains Figma's auto-layout feature, showing learners how to build frames and components that automatically resize and reflow their contents when text changes or elements are added or removed.
-
Guides learners through wiring static frames into a clickable prototype using Figma's Prototype tab, including setting up connections, triggers, actions, transitions, and scrolling behaviors.
-
Covers the techniques used to elevate wireframes into polished, high-fidelity mockups, focusing on visual properties such as typography, color, imagery, and other design details that reflect a realistic final product.
-
Provides guidance on planning, collaborating, reviewing, and correctly submitting a group Figma prototype, helping student teams coordinate their work and meet submission requirements.
-
Provides guidance on planning, collaborating, reviewing, and correctly submitting a group Figma prototype, helping student teams coordinate their work and meet submission requirements.