FA-0705Software Development

UI and UX Design with Figma

A guided interface and interactive-prototype workshop

Introduction

Why this course

This one-day workshop uses Figma to turn a supplied user scenario into a small multi-screen interface and clickable prototype. It connects user flows and wireframes with visual layout, reusable components and peer review.

Exercises use a prepared Figma environment and bounded screens rather than a complete product or research programme. Optional AI demonstrations depend on feature access, administrator settings and available credits; a manual route remains available.

Learning outcomes

Explain UI/UX roles and identify user goals for a supplied scenario.
Create a simple flow and wireframe in Figma.
Apply frames, layout grids and basic Auto Layout to a small interface.
Create selected reusable components, variants and styles.
Link screens into a clickable prototype and share it appropriately.
Perform a basic usability/accessibility review and refine the design.
Evaluate optional AI-assisted ideas without treating them as user evidence.

Prerequisites

Basic computer skills
Familiarity with websites or mobile applications
No prior UI/UX experience required

A Figma account with access to a prepared design file in a supported browser or desktop application; no paid feature is assumed for core exercises.

Training outline

4 modules

01Foundations, Figma workspace and user planning3 topics

UI versus UX
User-centered design
Modern product design workflow

Workspace and layout tools

Interface overview
Pages, frames and layers
Layout grids
Auto Layout essentials
Assets and libraries

User goals and flows

Defining users and goals
User journeys
User flows
Information architecture

02Guided wireframe and visual interface4 topics

Sketching screen layouts
Low-fidelity wireframes
Screen hierarchy
Navigation design

Visual layout

Typography
Color and spacing
Icons and imagery
Buttons, forms and navigation
Responsive layouts

03Reusable components and prototype4 topics

Components
Variants
Styles and introductory variables where supported by the selected environment
Reusable design patterns

Interaction and sharing

Linking screens
Interactions and transitions
Prototype presentation
Sharing designs

04Review, optional AI and final exercise4 topics

Heuristic review
Accessibility fundamentals
Design improvements
Iterative refinement

Optional AI-assisted ideation

Compare optional generated concepts with manually developed ideas
Content assistance with human accuracy and tone review
Iterate and compare alternatives without assuming productivity gains
Responsible use of AI in design

Use only approved, available features; protect sensitive material and review generated suggestions.

Bounded multi-screen prototype

Design a small multi-screen web or mobile flow using the supplied scenario
Build reusable components
Create an interactive prototype
Peer review and instructor feedback

Review and next practice

UI/UX best practices
Common design mistakes
Industry workflows
Questions and discussion

A programme built around your team.

Share your training goals and requirements.