🏫 Programming & Software Development

UI/UX Design with Figma

Wireframing, Prototyping, Design Systems & User-Centered Design — Enhanced with AI Design Tools

Duration

12 Weeks

Weekly Hours

4 Hours

Course Incharge

Muzammil Bilwani

📋 Prerequisites

✓ None. Open to school, college, and university students with an interest in design; no prior design or coding experience required.

📖 Course Description

A comprehensive, hands-on course in user interface and user experience design using Figma. Students learn the full design process — research, wireframing, visual design, design systems, prototyping, accessibility, and usability testing — while incorporating AI-powered design tools to accelerate ideation and asset creation. The course finishes with a complete, AI-assisted, end-to-end product design case study.

What You Will Learn

Understand UI/UX principles and the design thinking process

Conduct user research, personas, and journey mapping

Wireframe and structure information effectively

Apply visual design fundamentals — color, typography, layout

Build and use design systems and component libraries

Design accessible, inclusive interfaces

Build interactive, high-fidelity prototypes

Use AI design tools to generate layout ideas, imagery, and content

Conduct usability testing and iterate based on feedback

Design and present a complete AI-assisted, end-to-end product case study

Course Outline

Introduction to UI/UX Design

→What is UI vs. UX? Overview of the design industry
→The design thinking process — empathize, define, ideate, prototype, test
→Overview of tools and the designer's workflow
→Hands-on: Analyze and critique the UX of a familiar app

User Research Fundamentals

→Qualitative vs. quantitative research methods
→Conducting user interviews and surveys
→Synthesizing research into insights
→Hands-on: Conduct a mini user research exercise for a sample app idea

Personas and User Journeys

→Building user personas from research
→Mapping user journeys and identifying pain points
→Empathy mapping techniques
→Hands-on: Create a persona and journey map for a sample product

Information Architecture

→Organizing content and features logically
→Sitemaps and user flows
→Card sorting and navigation design
→Hands-on: Build a sitemap and user flow for an app concept

Figma Fundamentals

→Figma interface, frames, and artboards
→Basic shapes, tools, and layers
→Organizing files and using pages effectively
→Hands-on: Recreate a simple screen design in Figma

Low-Fidelity Wireframing

→Wireframing principles and purpose
→Building low-fidelity wireframes for key screens
→Getting early feedback on wireframes
→Hands-on: Wireframe a complete app flow (5-6 screens)

Visual Design Fundamentals — Color and Typography

→Color theory and building a color palette
→Typography principles and font pairing
→Creating visual hierarchy
→Hands-on: Define a visual style guide for your project

Visual Design Fundamentals — Layout and Iconography

→Grid systems and spacing consistency
→Iconography and imagery selection
→Applying visual design to wireframes
→Hands-on: Turn wireframes into styled high-fidelity screens

Components and Design Systems

→Reusable components, variants, and auto-layout in Figma
→Building a mini design system (buttons, inputs, cards)
→Why design systems matter for consistency and scale
→Hands-on: Build a component library for your project

High-Fidelity Screen Design

→Applying the design system across all screens
→Designing for different states (empty, loading, error)
→Consistency checks and design QA
→Hands-on: Complete high-fidelity designs for the full app flow

Interactive Prototyping

→Linking screens and creating clickable flows in Figma
→Transitions, animations, and micro-interactions
→Simulating realistic user flows
→Hands-on: Build a fully clickable prototype of your app

Accessibility and Inclusive Design

→Accessibility principles (color contrast, text size, navigation)
→Designing for diverse users and abilities
→Accessibility checklists and tools
→Hands-on: Audit and improve your project's accessibility

AI-Assisted Design Workflows

→Using AI image generation tools for mockup imagery and icons
→AI-assisted content generation (placeholder text, UX copy)
→AI layout and design suggestion tools
→Hands-on: Enhance your prototype using AI-generated assets and content

Mobile vs. Web Design Considerations

→Platform-specific design guidelines (iOS Human Interface, Material Design)
→Responsive and adaptive design principles
→Designing for different screen sizes
→Hands-on: Adapt your design for an additional platform/screen size

Usability Testing

→Planning and conducting usability tests
→Moderated vs. unmoderated testing
→Collecting and prioritizing feedback
→Hands-on: Run a usability test on your prototype with real users

Iterating on Feedback and Design Handoff

→Iterating designs based on usability findings
→Preparing designs for developer handoff
→Writing design specs and documentation
→Hands-on: Revise your prototype and prepare a handoff document

Capstone Project — Build

→Planning a complete end-to-end product design case study
→Building research, wireframes, and high-fidelity designs
→Using AI tools throughout the process
→Hands-on: Build the majority of the capstone case study

Capstone Project — Prototype and Presentation

→Final prototype polish and testing
→Building a case study presentation
→Capstone: Present a complete AI-assisted UI/UX case study — research, design, prototype, and testing insights
→Course wrap-up and next steps

📊 Grading Criteria

Component	Percentage
Quizzes	20%
Class Participation / Attendance	15%
Projects	25%
Final Projects	40%
Total	100%

Ready to Register in This Course?

Join thousands of students who have transformed their careers. Start your journey today!