▪ What is UI/UX Design?

▪ Understanding UI vs. UX

▪ What is Design Thinking

▪ The Role of a UI/UX Designer in a Team

▪ Design Sprint Methodology

▪ Setting Up a Figma Account

▪ Figma Free Account Limitations

▪ Overview of Figma as a UI/UX Design Tool

▪ Understanding the Role of Different Tools▪ Why We Don't Use Photoshop or Illustrator for UI Anymore

▪ UI/UX Design Ecosystem Overview

▪ How Figma Fits in the Larger Design Workflow

▪ Exploring the Figma Interface (Toolbar, Layers, Pages)

▪ Using Figma Community & Templates

▪ Setting Up Your First Project

▪ Start the Design Process

▪ How to empathize with users

▪ Recruit interview participants

▪ Determine research goal $ questions

▪ User Research Methods ( Interviews, Surveys,

Competitor Analysis )

▪ Qualitative vs Quantitative Research

▪ Creating User Personas & Empathy Maps

▪ Identify user pain points ( 4 types of pain points )

▪ Mapping User Journeys & Experience Flows

▪ Brainstorming & Affinity Mapping

▪ Synthesizing Research Findings

▪ UX Myths & Common Misconceptions

▪ Creating Empathy Maps

▪ User Flows & Site Maps

▪ Whiteboarding & Collaboration

▪ Creating Moodboards in FigJam

▪ Structuring Content & Navigation

▪ Creating Low-Fidelity Wireframes

▪ Best Practices for Layout & Spacing

▪ Elements of Design- 30 mins- 30 mins- 30 mins- 10 mins

▪ 12 Principles of Design - 80 mins

▪ IA Patterns & Navigation Model

▪ Content Strategy Fundamentals

▪ Wireframing with Shapes & Frames

▪ Using Components for Wireframing

▪ Card Sorting Exercise in FigJam

▪ Tree Testing Your Navigation

▪ 10 Heuristic Principles - Jakob Nielsens (Usability Heuristics)

▪ Psychology of Design

▪ Visual Hierarchy & Gestalt Principles

▪ How Design Affects User Behavior

▪ Color Theory & Typography in UI

▪ Iconography & Spacing Guidelines

▪ Creating UI & Styles

hands-on in figma:

▪ Creating Text Styles, Color Styles, and Effect Styles

▪ Using Constraints for Responsive Design

▪ Applying Auto Layout for Flexible UI Components

▪ Building Visual Hierarchy Exercise

▪ Creating Text Styles, Color Styles, and Effect Styles

▪ Using Constraints for Responsive Design

▪ Applying Auto Layout for Flexible UI Components

▪ Building Visual Hierarchy Exercise

▪ Deep Dive into Auto Layout

▪ Spacing & Alignment with Auto Layout

▪ Nested Auto Layout for Complex Components

▪ Understanding Constraints for Responsive Designs

▪ Creating Button Variants with Auto Layout

▪ Designing a Scalable Card Component

▪ Responsive Layouts using Constraints

▪ Mastering Grids & Layout Systems

▪ What are Variables in Figma?

▪ Using Variables for Color, Typography, and Spacing

▪ Creating Variables for Dark Mode & Theme Switching

▪ Prototype Interactions with Variables

▪ Design Tokens & Their Implementation

▪ Applying Variables for Design Tokens

▪ Implementing Dark Mode Variables

▪ Prototype with Variables (Dynamic Text & States)

▪ Creating a Theme Switcher

▪ What is a Design System?

▪ Components of a Design System

▪ Building a Scalable Design System

▪ Documentation & Style Guides

▪ Improving Collaboration with Design Systems

▪ Creating a Component Library

▪ Documenting Components with Variants

▪ Building Style Documentation Pages

▪ Setting Up Design System Structure

▪ Accessibility Fundamentals & WCAG Guidelines

▪ Designing for All Users

▪ Color Contrast & Typography for Accessibility

▪ Accessible Navigation & Interactions

▪ Creating Accessible Forms

▪ Checking Color Contrast with Stark Plugin

▪ Creating Accessible Component Variants

▪ Creating Clickable Prototypes

▪ Simple Page Transitions & Interactive Components

▪ Prototyping with Variables (Changing UI dynamically)

▪ Advanced Lottie Micro interactions & Animation with

▪ Lottiefiles / Lottielabs

▪ Basic Prototypes (Navigation, Buttons)

▪ Advanced Prototyping (Conditional Interactions with Variables)

▪ Smart Animate & Motion Effects

▪ Using Lottiefiles/ Lottielabs for Animations

▪ Handoff Best Practices for Developers

▪ Using Figma's Dev Mode & Inspect Tool

▪ Best Practices for Sharing Prototypes or Designs with Stakeholders

▪ Exporting Assets & Version Control with page structure

▪ Commonly Used Plugins

▪ Design QA Processes

▪ Preparing UI for Handoff

▪ Sharing Components with Dev Teams

▪ Creating Developer Documentation- 15 mins

▪ Using Version History Effectively

▪ Building Visual Hierarchy Exercise

▪ Conducting Usability Tests on Prototypes

▪ How to conduct a user interview

▪ A/B Testing & User Feedback

▪ Using Figma Plugins for Research (Maze, Useberry)

▪ Metrics for Measuring UI/UX Success

▪ Connecting Design Decisions to Business Goals

▪ Iterative Design Based on Data

▪ Running a Prototype Testing Session

▪ Collecting User Feedbacks

▪ Analyzing & Reporting Test Results

▪ Designing for Android & iOS Platforms

▪ Material Design Guidelines (Google)

▪ Human Interface Guidelines (HIG) (Apple)

▪ Responsive Web Design Principles

▪ Adaptive vs. Responsive Design

▪ Hands-on in Figma: - 60 mins Designing Mobile UI for Android & iOS

▪ Implementing Material & HIG Design Patterns

▪ Creating Responsive Web Components

▪ What is UX Copy? (Importance of Microcopy, Error Messages, and

CTAs)

▪ Writing for UI: Clarity, Brevity, and Tone of Voice

▪ Best Practices for Writing UX Copy (A/B Testing Copy, Iteration)

▪ Using AI for UX Copywriting (ChatGPT, Figjam AI)

▪ AI in UI/UX Design Workflow

▪ Generating UX Copies with AI

▪ Generating Images for Designs (Using MidJourney, Freepik)

▪ Conducting Secondary Research with AI (Using Perplexity)

▪ AI-powered Wireframing & Layout Suggestions

▪ AI-driven Usability Testing & Heatmaps

▪ Generating UX Copy with AI & Refining It

▪ Implementing AI-assisted Layout Adjustments

▪ Using AI tools for Usability Testing Insights

▪ Exploring AI-generated Images for UI Designs

▪ How to Present a UI/UX Case Study

▪ Structuring Case Studies in Figma Slides

▪ Creating Animated Presentations in Figma

▪ Storytelling in Design Presentations

▪ Communicating Design Decisions

▪ Handling Stakeholder Feedback

▪ Designing a UI/UX Case Study using Figma Slides

▪ Presenting a Prototype Walkthrough

▪ Creating Before/After Comparisons

▪ Documenting Design Process

▪ Building a Design Portfolio

▪ Design Glossary

▪ Showcasing Process, Not Just Final Designs

▪ Different UI/UX Career Paths

▪ Preparing for Design Interviews

▪ Design Take-Home Challenges

▪ Navigating the Job Market

▪ Portfolio Review Workshop

▪ Mock Interview Practice

▪ Creating a Design Challenge Process

▪ Personal Brand Development

▪ Familiarization to HTML(Tags, links, Images, List, HTML Forms and

Tables)

▪ Familiarization to CSS

▪ Bootstrap

▪ JavaScript(Variables, Operators, Datatypes, Functions, Event Handling)

▪ Choose a Real-world Problem

▪ Conduct Research in FigJam

▪ Create wireframes in Figma

▪ Design High-Fidelity UI in Figma with Variables and components

▪ Implement Prototyping

▪ Create a Case Study in Figma Slides explaining the design process