Question 1

Course Overview

Accepted Answer

This course provides job-ready UI/UX skills using Figma, from wireframing to prototyping and design systems. Graduates will be prepared for freelance work, internships, or junior UI/UX roles.

Prerequisites: Basic computer skills (no prior design experience required), but it if you have some prior experience with graphics design will be highly recommended.

Duration: 2 Month

Professional Level: Intermediate

Physical Classroom		
			Physical Classroom

Virtual Classroom (Live)		
			Virtual Classroom (Live)

Question 2

Objectives

Accepted Answer

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

Understand UI/UX principles and design thinking.
Master Figma for wireframing, prototyping, and design systems.
Conduct user research and apply usability best practices.
Create interactive prototypes for web and mobile apps.
Build a professional UI/UX portfolio with real-world projects.

Question 3

Module 1: Introduction to UI/UX Design

Accepted Answer

What is UI vs. UX? (Key Differences & Importance)

Design Thinking Process (Empathize, Define, Ideate, Prototype, Test)

UX Laws & Principles (Hick’s Law, Fitts’s Law, Jakob’s Law)

UI Design Fundamentals (Visual Hierarchy, Contrast, Consistency)

Hands-on Activity:

Analyze and critique a popular app’s UI/UX.

Question 4

Module 2: Figma Basics & Interface

Accepted Answer

Figma Interface Overview (Toolbar, Layers, Assets, Properties)

Frames & Artboards (Setting Up for Web & Mobile)

Shapes, Text, and Vector Tools (Pen Tool, Boolean Operations)

Components & Styles (Creating Reusable Elements)

Hands-on Activity:

Design a simple landing page using basic shapes and text.

Question 5

Module 3: Wireframing & Low-Fidelity Design

Accepted Answer

What is Wireframing? (Low-Fidelity vs. High-Fidelity)

Information Architecture (IA) (Sitemaps, User Flows)

Common UI Patterns (Cards, Navigation, Forms)

Designing for Mobile & Desktop (Responsive Grids)

Hands-on Activity:

Wireframe a mobile app dashboard (3 key screens).

Question 6

Module 4: High-Fidelity UI Design

Accepted Answer

Color Theory & Accessibility (Contrast Ratios, WCAG Guidelines)

Typography in UI (Font Pairing, Readability, Scaling)

Iconography & Imagery (SVGs, Stock Photos, Custom Illustrations)

Micro-Interactions (Hover States, Button Effects)

Hands-on Activity:

Convert a wireframe into a high-fidelity UI screen.

Question 7

Module 5: Prototyping & Interactions

Accepted Answer

Creating Clickable Prototypes (Links, Transitions, Overlays)

Advanced Animations (Smart Animate, Micro-Interactions)

User Testing Basics (Feedback Collection, Iteration)

Design Handoff (Export Assets, Developer Notes)

Hands-on Activity:

Prototype a 3-screen user flow (e.g., e-commerce checkout).

Question 8

Module 6: Design Systems & UI Kits

Accepted Answer

What is a Design System? (Tokens, Components, Documentation)

Building a UI Kit (Buttons, Inputs, Dropdowns, Modals)

Auto-Layout & Constraints (Responsive Components)

Using Plugins (Icon Libraries, Color Accessibility)

Hands-on Activity:

Create a custom UI kit for a fintech app.

Question 9

Module 7: UX Research & Usability Testing

Accepted Answer

User Research Methods (Surveys, Interviews, Personas)

Usability Testing (Task Flows, Heatmaps, A/B Testing)

Analyzing Data (Identifying Pain Points)

Iterating Designs (Improving Based on Feedback)

Hands-on Activity:

Conduct a mini usability test on a prototype.

Question 10

Module 8: Real-World Projects & Portfolio

Accepted Answer

Freelance & Client Work (Briefs, Pricing, Revisions)

Case Study Format (Problem, Solution, Results)

Portfolio Presentation (Behance, Dribbble, Personal Site)

Question 11

Module 8: Final Project (Choose One)

Accepted Answer

Project Options:1️⃣ Branding Project (Logo + Style Guide + Marketing Materials)2️⃣ UI/UX App Design (Figma Prototype + User Flow)3️⃣ Social Media Campaign (Canva + Photoshop Graphics)
Final Submission:

Present work in a PDF portfolio or Behance/Dribbble.

Question 12

Modules Outline

Accepted Answer

Module 1: Introduction to UI/UX Design

What is UI vs. UX? (Key Differences & Importance)

Design Thinking Process (Empathize, Define, Ideate, Prototype, Test)

UX Laws & Principles (Hick’s Law, Fitts’s Law, Jakob’s Law)

UI Design Fundamentals (Visual Hierarchy, Contrast, Consistency)

Hands-on Activity:

Analyze and critique a popular app’s UI/UX.

Module 2: Figma Basics & Interface

Figma Interface Overview (Toolbar, Layers, Assets, Properties)

Frames & Artboards (Setting Up for Web & Mobile)

Shapes, Text, and Vector Tools (Pen Tool, Boolean Operations)

Components & Styles (Creating Reusable Elements)

Hands-on Activity:

Design a simple landing page using basic shapes and text.

Module 3: Wireframing & Low-Fidelity Design

What is Wireframing? (Low-Fidelity vs. High-Fidelity)

Information Architecture (IA) (Sitemaps, User Flows)

Common UI Patterns (Cards, Navigation, Forms)

Designing for Mobile & Desktop (Responsive Grids)

Hands-on Activity:

Wireframe a mobile app dashboard (3 key screens).

Module 4: High-Fidelity UI Design

Color Theory & Accessibility (Contrast Ratios, WCAG Guidelines)

Typography in UI (Font Pairing, Readability, Scaling)

Iconography & Imagery (SVGs, Stock Photos, Custom Illustrations)

Micro-Interactions (Hover States, Button Effects)

Hands-on Activity:

Convert a wireframe into a high-fidelity UI screen.

Module 5: Prototyping & Interactions

Creating Clickable Prototypes (Links, Transitions, Overlays)

Advanced Animations (Smart Animate, Micro-Interactions)

User Testing Basics (Feedback Collection, Iteration)

Design Handoff (Export Assets, Developer Notes)

Hands-on Activity:

Prototype a 3-screen user flow (e.g., e-commerce checkout).

Module 6: Design Systems & UI Kits

What is a Design System? (Tokens, Components, Documentation)

Building a UI Kit (Buttons, Inputs, Dropdowns, Modals)

Auto-Layout & Constraints (Responsive Components)

Using Plugins (Icon Libraries, Color Accessibility)

Hands-on Activity:

Create a custom UI kit for a fintech app.

Module 7: UX Research & Usability Testing

User Research Methods (Surveys, Interviews, Personas)

Usability Testing (Task Flows, Heatmaps, A/B Testing)

Analyzing Data (Identifying Pain Points)

Iterating Designs (Improving Based on Feedback)

Hands-on Activity:

Conduct a mini usability test on a prototype.

Module 8: Real-World Projects & Portfolio

Freelance & Client Work (Briefs, Pricing, Revisions)

Case Study Format (Problem, Solution, Results)

Portfolio Presentation (Behance, Dribbble, Personal Site)

Module 8: Final Project (Choose One)							
							
								Project Options:1️⃣ Branding Project (Logo + Style Guide + Marketing Materials)2️⃣ UI/UX App Design (Figma Prototype + User Flow)3️⃣ Social Media Campaign (Canva + Photoshop Graphics)
Final Submission:

Present work in a PDF portfolio or Behance/Dribbble.

Question 13

FAQs

Accepted Answer

FAQs for UI/UX Design with Figma will be updated soonest, just stay in touch or contact us for more details&#8230;

Sp Systems & Net Solutions Sp Systems & Net Solutions

UI / UX Design with Figma UI / UX Design with Figma

Physical Classroom Physical Classroom

Virtual Classroom (Live) Virtual Classroom (Live)

Interested in Learning more about UI/UX Design with Figma? Interested in Learning more about UI/UX Design with Figma?

Check out More Courses Check out More Courses

Introduction to Graphic Design Introduction to Graphic Design

₦50,000.00

Find Courses Find Courses

Quick Links Quick Links

Address Address

Socials Socials