Start a conversation ↗

Description

Figma: Mapping User Journeys, Designing Interfaces and Prototyping

Two days to design testable Figma mock-ups that hand over cleanly to developers

  • 2 days — 14 h
  • In-person or virtual
  • Intermediate
  • Up to 6 participants

Interface ideas circulate as screenshots and text documents. Nobody sees the full journey before development starts and feedback arrives once the code is already written. The back-and-forth is expensive and the real user experience never enters the discussion.

These 14 hours move from actual usage through to a working prototype. Participants map a user journey, build their screens in Figma with reusable components, link those screens into a clickable prototype, have it tested and then prepare the handover to developers.

Learning objectives

  • Map a user journey and identify its friction points
  • Build an interface mock-up in Figma from a layout grid
  • Create reusable components and variants
  • Link screens into a clickable prototype that a user can test
  • Organise a Figma file for sharing and developer handover

What makes this programme different

A clickable prototype produced in session on the participant's own project
A peer user test run between participants with a debrief of the observations
A Figma file structured to meet development team expectations

Programme

1From User Need to Journey

Designing before drawing

  • Gathering usage patterns and pain points
  • User profiles and usage scenarios
  • Site structure and target journey
  • Rapid zoning of key screens

2Getting to Grips with Figma

The workspace and its rules

  • Pages, frames and layers
  • Grids, constraints and responsive layout
  • Colour and typography styles
  • Component library and variants
  • Working with others on the same file

3Designing the Screens

Clear and consistent interfaces

  • Visual hierarchy and screen readability
  • Field and button states
  • Error messages and edge cases
  • Contrast and sizing in support of accessibility
  • Adapting for mobile and large screens

4Prototype, Test, Hand Over

Testing the mock-up against real use

  • Links, transitions and clickable prototype
  • Protocol for a short user test
  • Collecting and sorting observations
  • Preparing the file for development
  • Version and feedback tracking

Who is it for

Web project managers, communication officers, graphic designers and product owners who design interfaces.

Prerequisites

Confident use of a graphic design or wireframing tool and previous involvement in a web or application project.

Dates & locations

36 scheduled dates between November 2026 and December 2027. Seats are confirmed in the order enquiries are received.

November 2026

December 2026

January 2027

February 2027

March 2027

April 2027

May 2027

June 2027

September 2027

October 2027

November 2027

December 2027

None of these dates suit you? We open additional sessions on request, and any programme can be run privately for your team.

Practical details

Before the programme
Online positioning questionnaire. Your development objectives are shared with the trainer, who tailors the practical case studies to your context.
Teaching methods
Theoretical input, workshops and practical case studies. Digital course materials and method sheets provided.
Assessment
Multiple-choice tests and role-play exercises. Assessment of learning at the start and end of the programme, with immediate and 60-day follow-up evaluations.
After the programme
One year of access to the e-learning platform. Self-assessment of the skills acquired and a 30-day follow-up session with your trainer.
How to register
Registration online or on the basis of a quotation.
Lead time
11 working days after confirmation of registration.
Accessibility
Accessible to people of determination. Contact our accessibility coordinator to design a suitable solution: contact@mpf-academy.ae
Start dates
Rolling intake: in addition to the scheduled sessions, this programme can start on request.