FA-0710Software Development

Wireframing and Prototyping Essentials with Figma

Turn a small digital-product concept into a testable interactive flow

Introduction

Why this course

Learn how wireframes, mockups and interactive prototypes support discussion and early testing of digital-product ideas. In this introductory Figma workshop, develop a small app flow from rough structure to a linked prototype.

Practise presenting the design, gathering feedback and revising it. A one-day prototype is a learning artifact, not a production-ready application or a guarantee of validated usability.

Learning outcomes

Distinguish wireframes, mockups and interactive prototypes and choose an appropriate level of detail.
Create a small wireframe and linked prototype in Figma.
Apply basic user-centred design and usability considerations.
Present a design and document feedback for colleagues and developers.
Revise the prototype using observations from a short usability exercise.

Prerequisites

Basic computer skills and familiarity with digital design concepts.

No prior Figma experience is required. Participants need access to an approved Figma account and supported browser or desktop app, with permissions for the workshop file.

Training outline

5 modules

01Module 1 — Foundations and the Figma workspace1 topics

Wireframes and prototypes

Definition and importance of wireframes and prototypes in digital design.
Differences and relationships between wireframes, mockups, and prototypes.

Getting started

Overview of Figma interface and tools.
Setting up a project in Figma.
Navigating the Figma workspace and using essential tools.

02Module 2 — Build a small wireframe3 topics

The process of wireframing: from low-fidelity sketches to high-fidelity wireframes.
Best practices for creating effective wireframes.
Hands-on practice: Designing a wireframe for a simple app.

Use one short user flow; refine layout detail only after its purpose and navigation are clear.

03Module 3 — Link and test a prototype3 topics

Introduction to prototyping and its significance.
Linking wireframes to create interactive prototypes in Figma.
Adding interactions, transitions, and animations.

Usability considerations

Principles of usability and user-centered design.
Integrating UX best practices into wireframes and prototypes.
Conducting usability tests with prototypes.

Run a short task-based exercise, record observed difficulties and distinguish findings from personal preferences.

04Module 4 — Present, collaborate and hand off3 topics

Techniques for presenting wireframes and prototypes to stakeholders.
Using Figma for collaboration and feedback.
Preparing design specifications for development teams.

Share the design using appropriate file permissions; annotate key behaviour and unresolved questions rather than assuming the prototype specifies every implementation detail.

05Module 5 — Revise the practical project2 topics

Group project: Participants will design a wireframe and prototype for a proposed digital product.
Real-time feedback and revisions based on peer and instructor reviews.

The iterative nature of design: refining and validating designs.
Tips for quick iterations based on user feedback.

Summary of the day’s learnings and key takeaways.
Resources for further learning and practice in wireframing and prototyping.
Q&A and final reflections.

A programme built around your team.

Share your training goals and requirements.