✏️Course Curriculum

UI/UX Design & Prototyping with Figma

Creative Technology· Intermediate· Ages 14–17· 32 Hours

Course At a Glance

Program Outcomes

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

1
Apply user-centered design principles to create intuitive digital experiences.
2
Design professional mobile and web interfaces using Figma's component and design system features.
3
Build interactive prototypes that simulate real-world application behaviour.
4
Develop a complete UI/UX project demonstrating research, wireframing, visual design, and prototyping skills.

Module 1

Introduction to UI & UX Principles

Students learn the fundamental distinction between UI and UX, the Design Thinking process, user research methods, user journey mapping, information architecture, lo-fi wireframing, and accessibility principles.

Approx. 8 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Tools / Concepts
1.1	UI vs UX: Understanding the Difference	Define UI as the visual layer a user interacts with. Define UX as the entire journey a user has with a product. Understand that great UX requires great UI, but great UI alone does not guarantee great UX. Analyse real apps to identify UI and UX strengths/weaknesses.	App Teardown: Choose an app and rate the UI and UX independently. Share findings — where do scores agree and disagree? Discuss: can an app have beautiful UI but poor UX?	`UI (visual layer), UX (end-to-end experience), usability, accessibility, user journey`
1.2	Design Thinking Process	Understand Design Thinking as the problem-solving framework: Empathise → Define → Ideate → Prototype → Test. Understand why Design Thinking is iterative. Position the course project within this framework.	Design Thinking Workshop: Teams work through all five stages for a fictional problem in 30 minutes: Empathise, Define, Ideate, Prototype, and Test.	`Design Thinking: Empathise, Define, Ideate, Prototype, Test, iteration`
1.3	User Research Methods	Understand why designing without user research produces solutions based on assumptions. Learn key UX research methods: interviews, surveys, and competitive analysis. Create a User Persona.	User Research Sprint: Conduct a 3-minute user interview using a prepared script. Synthesise findings into one User Persona: name, age, goals, frustrations, tech habits.	`User interview, survey, competitive analysis, User Persona, affinity mapping`
1.4	User Journey Mapping	Map the complete experience a user has with a product. A User Journey Map shows: stages, actions, emotional state, touchpoints, and pain points. Identify opportunities for design improvement.	Journey Mapping: Map the user journey across 5 stages. List user actions, draw the emotional curve, and identify pain points and opportunity areas.	`User Journey Map, stages, emotional curve, touchpoints, pain points, opportunity areas`
1.5	Information Architecture & User Flows	Understand Information Architecture (IA) as the structural design of a digital product. Learn sitemap creation. Understand User Flows: a flowchart showing the path a user takes to complete a specific task.	IA Design: Design the Information Architecture for a simple app. Draw a sitemap. Create a User Flow using flowchart symbols including decision branches.	`Sitemap, User Flow, IA, hierarchy, decision diamond, screen rectangle`
1.6	Low-Fidelity Wireframing	Understand wireframes as rough layout blueprints. Learn fidelity levels: Lo-fi, Mid-fi, and Hi-fi. Use placeholder boxes for images and wavy lines for text. Draw lo-fi wireframes on paper to think fast.	Paper Wireframing Sprint: Sketch lo-fi wireframes for 4 screens in 15 minutes. Peer review: can a partner understand the layout from the wireframe alone?	`Lo-fi wireframe, mid-fi, hi-fi, content blocks, placeholder, fidelity levels`
1.7	Accessibility & Inclusive Design	Understand accessibility as designing for users with disabilities. Learn WCAG basics: colour contrast ratio, minimum touch target size, and alternative text. Use Figma's contrast checker plugin.	Accessibility Audit: Test an app against 5 accessibility criteria. Report findings — pass or fail with evidence.	`WCAG, contrast ratio 4.5:1, 44×44px touch target, alt text, colour-blind, inclusive design`
1.8	Module 1 Project: UX Research & Wireframes	Apply all Module 1 skills to conduct mini UX research for a chosen app concept and produce a full lo-fi wireframe set demonstrating design thinking.	Project: 'UX Foundation Document' — produce a User Persona, User Journey Map, Sitemap, User Flow, and lo-fi wireframes for 5 screens.	`Full Module 1 — persona, journey map, sitemap, user flow, lo-fi wireframes`

Module 2

Figma Fundamentals

Students master professional Figma workflows: typography systems, colour styles and design tokens, master components with variants, Auto Layout for responsive design, and building a complete mini design system.

Approx. 8 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Tools / Concepts
2.1	Figma Deep Dive: Workspace & Frames	Understand Pages, Frames, and naming conventions. Learn all selection and transformation tools including boolean operations. Understand Figma hierarchy and use keyboard shortcuts for efficiency.	Figma Efficiency Lab: Complete 20 tasks in a Figma file including resizing, boolean operations, and alignments within 10 minutes.	`Figma pages, frames, groups, boolean ops (union/subtract/intersect), keyboard shortcuts`
2.2	Typography Systems in Figma	Build a professional typography system: create Text Styles for each level. Understand how typography systems prevent inconsistency and allow cascading updates.	Build: 'Typography System' — set up 8 named Text Styles and create a specimen page. Apply these styles to 3 screens and test cascading updates.	`Figma Text Styles, Display/H1-H3/Body/Caption styles, cascading style updates`
2.3	Colour Systems & Design Tokens	Create a Figma Colour Library: define Colour Styles using semantic naming. Introduce Design Tokens. Update a colour style and observe the cascade.	Build: 'Colour System' — create 12 named Colour Styles (primary, neutral, semantic). Apply them to 3 screens and test updates.	`Figma Colour Styles, semantic naming, design tokens, primary/neutral/semantic scale`
2.4	Components & Instances	Understand Figma Components as reusable code functions. Create Master Components and place instances. Learn Variants: multiple states of one component in a single container.	Build: 'UI Component Library' — create master components for a Button (variants/sizes), Input Field (states), and Navigation Tab Bar. Test updates via the master component.	`Master Component, Instance, Variants, .Component naming, edit master → update all`
2.5	Auto Layout	Understand Auto Layout as Figma's responsive spacing engine. Compare fixed vs hug vs fill sizing. Use Auto Layout for button padding, card lists, and navigation bars.	Auto Layout Challenge: Build 4 components using Auto Layout only (no manual positioning). Test by editing text content to see if the layout adapts.	`Auto Layout, padding, gap, hug contents, fill container, wrap, fixed vs fill sizing`
2.6	Design Systems: Building a UI Kit	Understand a Design System as a comprehensive library of components and guidelines. Build a simplified UI Kit following Atomic Design principles.	Build: 'Mini Design System' — assemble a Figma file with Foundations, Components, and Examples pages. Every element must be a component instance or style.	`Design System, Atomic Design (atoms/molecules/organisms), Material Design, UI Kit`
2.7	Responsive Design & Grids	Set up layout grids in Figma for consistent spacing. Apply the 8-point grid system. Design one screen at two breakpoints (mobile and tablet).	Responsive Redesign: Take a screen and design it at mobile (4 columns) and tablet (8 columns) breakpoints. Ensure layout reflows correctly.	`Layout grid, 4/8/12 columns, gutter, margin, 8-point grid, breakpoints 360/768/1440`
2.8	Module 2 Project: Hi-Fi App Screens	Apply all Module 2 Figma skills to design a complete set of 8 high-fidelity screens using only design system components and styles.	Project: '8 Hi-Fi Screens' — design 8 polished screens covering Splash, Home, Browse, Detail View, Search, Profile, Settings. All elements must come from the Mini Design System.	`Full Module 2 — hi-fi screens, design system, Auto Layout, components, styles`

Module 3

Prototyping & Interaction Design

Students build fully interactive prototypes: screen connections and transitions, overlay/modal/drawer patterns, micro-interactions, usability testing, and design handoff preparation.

Approx. 8 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Tools / Concepts
3.1	Introduction to Prototyping in Figma	Learn the Figma Prototype tab: connect frames with interactions (On Click, After Delay) and actions (Navigate To, Open Overlay). Run the prototype in Presentation mode.	First Prototype: Connect the 8 hi-fi screens with click interactions. Run in Presentation mode and share the link.	`Prototype tab, interaction arrows, On Click / After Delay, Navigate To, Presentation mode`
3.2	Screen Transitions & Animations	Apply transition animations: Dissolve, Move In/Out, Push, Smart Animate. Control timing and easing. Understand how animation communicates spatial models.	Transition Design Lab: Apply different transition types to screen connections. Adjust duration and easing. Ensure the navigation model is clear.	`Dissolve, Move In/Out, Push, Smart Animate, duration (ms), Ease In/Out/Linear`
3.3	Overlays, Modals & Drawers	Build overlay interactions: modal dialogs, bottom sheets, side drawers. Configure background and close-on-click-outside options.	Build: Add 3 overlay interactions to the prototype (confirmation modal, bottom sheet, toast notification).	`Open Overlay, Centred/Bottom Centre, overlay scrim, After Delay, close on click outside`
3.4	Micro-Interactions & State Changes	Understand micro-interactions as small interactions providing feedback. Use Interactive Components to make components self-contained interaction units using Smart Animate.	Build: Design 4 micro-interactions using Interactive Components (Like button, Checkbox, Toggle switch, Button press state).	`Interactive Components, Variant interactions, Smart Animate state change, micro-interaction`
3.5	User Flow Prototyping & Testing Prep	Build a prototype covering 2 complete user flows. Map each flow and add error/empty states. Create a Usability Test Script.	Flow Completion: Add a second complete user flow and an error state to the prototype. Write a Usability Test Script with tasks and post-task questions.	`Complete user flow, error states, empty states, Usability Test Script, task wording`
3.6	Usability Testing & Iteration	Conduct a structured usability test with a think-aloud protocol. Record observations, analyse findings, and prioritise fixes.	Usability Testing Round: Conduct a 10-minute test. Take notes, summarise 3 usability problems by severity, and apply at least 2 fixes to the prototype.	`Think-aloud protocol, observation notes, severity rating, design iteration from findings`
3.7	Design Handoff & Developer Collaboration	Prepare a design for handoff using Figma's Dev Mode. Use correct naming, mark exportable assets, and annotate interactions.	Handoff Preparation: Rename layers, mark exportable assets, and create a Spec Page. Enable Dev Mode to inspect elements and verify CSS.	`Figma Dev Mode, CSS inspect, layer naming, exportable assets, annotation, spec page`
3.8	Module 3 Project: Interactive Prototype	Complete the fully interactive prototype for the app concept with transitions, micro-interactions, and error states. Pass a peer usability test.	Project: 'Fully Interactive Prototype' — polish the prototype and conduct a final peer usability test. Fix failures before submitting.	`Full Module 3 — prototype, transitions, overlays, micro-interactions, usability test`

Module 4

UI/UX Project

Students apply the full UX/UI design process to a chosen product: brief writing, competitive research, wireframing, design system creation, hi-fi screen design, prototyping, usability testing, and a professional case study.

Approx. 8 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Tools / Concepts
4.1	Project Briefing & Concept Selection	Write a Project Brief: target user group, use cases, core screens, platform, brand personality, and competitors. Teacher sign-off required.	Project Brief: Choose a track and write a detailed brief with user personas and competitive audit parameters.	`Project brief, user personas, platform selection, core screens, competitive audit`
4.2	User Research & Competitive Analysis	Conduct a targeted competitive analysis and user interviews. Synthesise research into a Research Insights Summary.	Research Sprint: Complete Competitive Analysis. Conduct user interviews and write an Insights Summary with actionable findings.	`Competitive analysis framework, user interview synthesis, research insights, opportunity areas`
4.3	IA, User Flows & Lo-Fi Wireframes	Translate research into product structure: Sitemap, User Flows, and lo-fi wireframes. Validate with a quick paper prototype test.	Design Sprint: Produce Sitemap, 2 User Flows, and lo-fi wireframes. Conduct a paper prototype test and iterate.	`Sitemap, user flows, lo-fi paper wireframes, paper prototype test, iteration`
4.4	Design System Setup	Set up the complete Design System: Foundations (colours, text, spacing) and Components. Ensure Auto Layout and semantic naming.	Design System Sprint: Build the Figma design system. Teacher checkpoint required before screen design begins.	`Figma design system: Foundations + Components pages, semantic naming, Auto Layout, variants`
4.5	Hi-Fi Screen Design	Design all 8+ high-fidelity screens using only design system components and styles. Apply an 8-point grid and visual hierarchy.	Production Sprint: Design all hi-fi screens. Review against a quality checklist ensuring components and 8-point grid usage.	`8 hi-fi screens, 8-point grid, design system enforcement, visual hierarchy checklist`
4.6	Prototyping & Interaction Design	Build the full interactive prototype: connect screens, apply transitions, micro-interactions, overlays, error states, and empty states.	Prototype Sprint: Wire all screens. Implement micro-interactions and error states. Run personal tests and fix issues.	`Full prototype: transitions, micro-interactions, overlays, error states, both user flows`
4.7	Usability Testing & Final Refinement	Conduct a final round of usability testing, prioritise findings, and apply fixes. Prepare a professional presentation case study layout.	Testing & Polish Sprint: Conduct usability tests and fix issues. Prepare case study layout showing process from research to prototype.	`Final usability test, severity-ranked fixes, case study layout, design process narrative`
4.8	Final Presentation Day	Present the completed UI/UX project as a design case study walking through the problem, research, design decisions, and live prototype demo.	Final Presentation: 6-minute live case study presentation + 3-minute Q&A. Provide structured critique.	`Full course — Design Thinking, UX research, Figma, design system, prototype, case study`

Teaching Notes & Tips

Pacing Guidance

Each module contains 8 lessons of approximately 55–65 minutes each. Lesson 2.4 (Components & Instances) and 2.5 (Auto Layout) are the two most technically challenging Figma lessons — allow extra time and provide worked examples students can reference.

Differentiation

Advanced students can explore: Figma Variables, advanced prototyping with conditions, motion design with spring physics, or studying UX writing. Students needing support should focus on Module 1 fundamentals and Module 2 core skills, working from provided starter files.

Assessment Criteria

Capstone assessed on: (1) UX Process — research actionable. (2) Design System Rigour — component usage. (3) Visual Design Quality. (4) Prototype Completeness — flows completable. (5) Usability Evidence. (6) Case Study Presentation.

Tools & Resources

Primary: Figma (figma.com — free Education account). Supporting tools: Figjam, Maze, Smartmockups, Unsplash. Reference design systems: Material Design 3, Apple HIG, Google Fonts.

Capstone Project Tracks

Mobile Fitness App, E-Learning Platform, E-Commerce App, Smart Home Dashboard, Food Delivery App. Each requires: browse, view, detail, core task, and profile.

Prior Knowledge Expected

Students should be comfortable with: basic Figma navigation, fundamental design principles (colour theory, typography, hierarchy, layout), and exporting files. Graphic & Digital Design (Beginner) is an ideal prerequisite.

Enroll Your Child Now