UI/UX Design with Figma
Wireframing, Prototyping, Design Systems & User-Centered Design — Enhanced with AI Design Tools
5 Months
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
Ready to Register in This Course?
Join thousands of students who have transformed their careers. Start your journey today!