Interface Prototyping with Figma — Topics & Learning Outcomes

Module Topics

Introduction to Figma and the Prototyping Workflow

• The Figma Interface at a Glance — Figma's browser-based environment is divided into a toolbar, layers panel, canvas, and properties panel, all of which work together in real time.
• Pages and File Organisation — Organising work across named pages and clearly labelled frames keeps large projects navigable and supports smooth handoff to developers or evaluators.
• Collaboration and Sharing Basics — Figma is built around real-time multiplayer collaboration, allowing team members and evaluators to view, comment on, or edit a file simultaneously.
• From Mockup to Prototype: The Module Workflow — This module follows a structured sequence: framing screens, building a component library, applying auto-layout, and finally wiring interactions into a navigable prototype.

Frames, Grids, and Screen Layout

• What Is a Frame? — In Figma, a frame is the primary artboard-like container that defines the boundaries of a screen, dialog, or component, and it carries layout and clipping properties not available to basic groups.
• Applying Layout Grids — Layout grids overlay the frame canvas with columns, rows, or a uniform grid, giving designers a visual alignment scaffold that can be hidden before handoff or presentation.
• Constraints and Responsive Anchoring — Constraints determine how child elements reposition or resize when their parent frame is resized, laying the groundwork for designs that adapt across screen sizes.
• Working with Device Presets and Safe Areas — Figma's frame presets provide accurate pixel dimensions for common devices, and designers must account for system UI areas such as status bars and home indicators.
• Organising Screens with Flows — Grouping related frames into named flows helps both the design team and evaluators understand which screens belong to which user journey before prototype wiring begins.

Building a Component Library

• What Is a Component? — A component is a reusable design element defined once as a master and instantiated across screens, so that changes to the master propagate automatically to all instances.
• Creating Components from Existing Elements — Any frame, group, or selection of elements can be converted into a component via the right-click menu or keyboard shortcut, after which it is accessible in the assets panel for reuse.
• Component Variants — Variants allow a single component to encapsulate multiple states — such as default, hover, disabled, and active — organised in a variant container that designers can switch between at the instance level.
• Slots, Nesting, and Component Composition — Complex UI elements are best built by nesting simpler components inside a parent component, a pattern called component composition, which maximises reuse and reduces maintenance overhead.
• Using the Assets Panel and Team Library — The assets panel centralises access to all components, styles, and plugins, and team libraries extend this to share design tokens across an entire organisation or project team.

Auto-Layout for Responsive Elements

• What Is Auto-Layout? — Auto-layout converts a frame into a container that automatically arranges its children in a horizontal or vertical stack, adjusting size based on content, padding, and spacing rules.
• Sizing Modes: Hug, Fill, and Fixed — Each dimension of an auto-layout frame or its children can independently use hug, fill, or fixed sizing, giving fine-grained control over how space is distributed within a layout.
• Spacing, Padding, and Alignment — Auto-layout exposes independent padding controls for top, right, bottom, and left, as well as gap settings and alignment options that determine how children are positioned within the container.
• Building Reusable List and Card Patterns — List items and card components are the most common applications of auto-layout, and building them correctly enables entire list sections to reflow automatically when items are added or removed.
• Auto-Layout and Component Interaction — When auto-layout frames are used as or within components, size changes triggered by variant switching or text overrides propagate automatically, eliminating manual resizing during prototyping.

Interactive Prototyping and Connections

• The Prototype Panel Overview — The prototype panel replaces the design panel when prototyping mode is active, exposing controls for adding interactions, choosing triggers, selecting actions, and configuring transitions between frames.
• Triggers and Actions — An interaction consists of a trigger — the user event that starts it — and an action — what happens as a result, such as navigating to a frame, opening an overlay, or scrolling to a position.
• Transitions and Animation — Figma provides built-in transition types — Instant, Dissolve, Smart Animate, Move In, Move Out, Push, and Slide In — that control how the screen changes during navigation, adding polish to the prototype.
• Scrollable Frames and Fixed Elements — Figma frames can be configured to scroll vertically or horizontally, and individual elements can be pinned to remain fixed during scroll, enabling realistic navigation bars and sticky headers.
• Overlays and Modal Patterns — Overlays allow a second frame to appear on top of the current screen without navigating away, enabling modals, drawers, tooltips, and dropdown menus within a single prototype flow.
• Previewing and Sharing the Prototype — The Figma prototype preview launches a full-screen interactive session directly from the browser, and the share link exposes the same experience to peer evaluators without requiring a Figma account.

High-Fidelity Design and Visual Polish

• Defining and Applying Colour Styles — Colour styles store named fill or stroke values that can be applied across the design and updated globally, functioning as the visual equivalent of CSS custom properties.
• Typography Styles and Text Hierarchy — Text styles standardise combinations of font family, size, weight, line height, and letter spacing, ensuring typographic consistency across all screens without manual reapplication.
• Working with Images and Fills — Figma supports image fills on any shape or frame, enabling realistic photo placement for profile pictures, banners, and product imagery within the mockup.
• Icons and Vector Assets — Icons reinforce meaning in UI design, and Figma supports SVG import, the built-in icon resources, and community icon libraries to provide scalable, stylable icon assets.
• Effects: Shadows, Blurs, and Overlays — Figma's effects panel provides drop shadows, inner shadows, layer blurs, and background blurs that add depth and realism to interface elements such as cards, modals, and frosted-glass navigation bars.

Building and Submitting the Group Project Prototype

• Project Scope and Screen Inventory — Before building, each group should define the exact set of screens required for their prototype, mapped to identified user tasks, to prevent scope creep and ensure complete coverage for evaluation.
• Dividing Work Across Team Members — Effective team collaboration in Figma requires clear ownership of files, pages, or components, combined with a shared component library to ensure visual consistency regardless of who designs each screen.
• Self-Review and Design QA — Before sharing with peers, each group should conduct a structured self-review against a design quality checklist covering layout consistency, component usage, interaction completeness, and content accuracy.
• Setting Up for Peer Evaluation — Preparing the prototype for peer evaluation involves setting the correct starting frame, configuring share permissions, and providing a brief written description of the flows evaluators should test.
• Conducting and Receiving Peer Evaluation — Peer evaluators interact with the shared prototype as a simulated end user, documenting usability observations, navigation breakdowns, and visual inconsistencies using Figma's comment tool.
• Iterating Based on Feedback — After receiving peer evaluation, groups prioritise and address identified issues within the remaining session time, applying fixes directly in Figma and updating the shared prototype link.

Student Learning Outcomes

By the end of this module, students will be able to:

Course Outcomes (reference)