UI/UX Design Course with Figma & AITurn Ideas IntoIntuitive Experiences.

Introduce students to UI/UX design from absolute beginner level. Explain UI and UX, how digital products are designed, the role of a UI/UX designer, design thinking and how AI can support the design process.

• UI design
• UX design
• UI vs UX
• product design
• user needs
• usability
• accessibility
• design thinking
• UX process
• UI/UX designer roles
• AI in UI/UX
• AI-assisted design workflow

Hands-on lab: Analyze an existing website or mobile application, identify key UX problems and create a UX Problem Statement and Design Opportunity document using AI-assisted analysis.

Teach students how professional designers understand users before designing interfaces. Students learn research planning, user interviews, competitor analysis and research synthesis.

• Design thinking
• empathize
• define
• ideate
• prototype
• test
• user research
• qualitative research
• quantitative research
• user interviews
• research questions
• pain points
• user goals
• competitor research
• AI-assisted research

Hands-on lab: Create a User Research Plan containing research objectives, interview questions, competitor observations and initial user pain points for the selected product.

Teach students how to convert user research into practical UX artifacts. Students learn to represent users, understand motivations and map the complete experience with a product.

• User personas
• persona goals
• behaviours
• pain points
• empathy maps
• user goals
• frustrations
• motivations
• user journey maps
• touchpoints
• emotions
• opportunities
• AI-assisted persona creation

Hands-on lab: Create one detailed user persona, empathy map and user journey map for the selected product.

Teach students how to structure digital products before designing screens. Students learn to organize content, create navigation structures and define the steps users take to complete important tasks.

• Information architecture
• content hierarchy
• sitemap
• navigation
• categories
• labels
• user flows
• task flows
• decision points
• screen mapping
• navigation patterns
• AI-assisted flow generation

Hands-on lab: Create the Information Architecture, Sitemap and Primary User Flow for the selected product.

Introduce wireframing as the bridge between UX thinking and UI design. Students learn to translate user flows into practical screen structures before applying visual styling.

• Wireframes
• low-fidelity design
• screen structure
• layout hierarchy
• content hierarchy
• navigation
• forms
• cards
• buttons
• mobile wireframes
• desktop wireframes
• usability
• AI-assisted wireframing

Hands-on lab: Create 5–7 low-fidelity wireframes covering the primary user journey of the selected digital product.

Introduce Figma as the primary UI/UX design tool. Students learn the Figma workspace and build structured interfaces using frames, layers, shapes, text, images, grids and alignment.

• Figma interface
• files
• pages
• frames
• layers
• shapes
• text
• images
• grids
• alignment
• spacing
• constraints
• components introduction
• Figma workflow
• design organization
• AI-assisted Figma workflow

Hands-on lab: Convert the selected wireframes into structured Figma screens using proper frames, layers, spacing and alignment.

Teach students the fundamental principles behind visually strong interfaces. Students learn how typography, colour, spacing, grids and visual hierarchy work together to create clear and consistent UI.

• Typography
• font selection
• type scale
• colour theory
• colour palettes
• contrast
• spacing
• grids
• alignment
• visual hierarchy
• composition
• UI patterns
• accessibility
• AI-assisted visual exploration

Hands-on lab: Create a Visual Design Direction for the selected product including typography, colour palette, spacing system, grid and visual hierarchy.

Teach students how professional product designers create reusable design systems instead of designing every screen independently. Students build a practical component library in Figma.

• Design systems
• design tokens
• colour styles
• typography styles
• spacing
• components
• variants
• component properties
• buttons
• inputs
• cards
• navigation
• form components
• states
• reusable patterns
• AI-assisted component ideation

Hands-on lab: Build a Mini UI Design System containing typography, colours, buttons, inputs, cards, navigation components and interaction states.

Teach students how professional interfaces adapt across different devices and screen sizes. Students learn responsive layouts using Figma Auto Layout, constraints and responsive design principles.

• Responsive design
• mobile-first design
• desktop design
• tablet design
• breakpoints
• Auto Layout
• constraints
• resizing
• grids
• responsive navigation
• responsive cards
• responsive forms
• accessibility
• AI-assisted responsive design review

Hands-on lab: Create responsive mobile and desktop versions of the selected product using Auto Layout, constraints and reusable components.

Move from wireframes into polished high-fidelity UI. Students learn to apply visual systems to real screens while using AI for ideation, UX writing, alternative design directions and design critique.

• High-fidelity UI
• visual polish
• UI patterns
• imagery
• iconography
• content hierarchy
• UX writing
• microcopy
• AI design prompts
• AI-generated content
• design alternatives
• design critique
• usability review
• responsible AI usage

Hands-on lab: Design 5–7 polished high-fidelity screens covering the primary user journey and use AI to explore alternative UI directions and critique the design.

Teach students how to transform static UI screens into realistic interactive prototypes. Students learn navigation, overlays, transitions and micro-interactions that communicate product behaviour.

• Figma prototyping
• interactions
• triggers
• actions
• Smart Animate
• transitions
• overlays
• modals
• navigation
• hover states
• button states
• loading states
• micro-interactions
• prototype testing
• AI-assisted interaction ideas

Hands-on lab: Create a fully clickable high-fidelity prototype covering the primary user journey with realistic transitions and interaction states.

Teach students how to evaluate whether their designs actually work for users. Students conduct usability reviews, identify problems and iterate their designs based on evidence and feedback.

• Usability testing
• test objectives
• user tasks
• test scenarios
• observations
• usability issues
• heuristic evaluation
• UX audit
• accessibility checks
• design feedback
• prioritization
• iteration
• AI-assisted UX critique

Hands-on lab: Conduct a UX Audit and Usability Review, identify at least 10 usability findings, prioritize the issues and improve the product design.

Teach students how AI can be integrated into the complete UI/UX workflow without replacing human design thinking. Students use AI for research synthesis, ideation, UX writing, user flows, critique, accessibility and design documentation.

• AI for UX research
• research synthesis
• AI personas
• AI user flows
• AI ideation
• prompt engineering for designers
• UX writing
• content generation
• design critique prompts
• accessibility prompts
• usability prompts
• design documentation
• responsible AI usage

Hands-on lab: Create an AI-Assisted UX Workflow covering research synthesis, persona development, user flows, UX writing, design critique and accessibility review for the final project.

Teach students how to convert their design process into a professional UX case study. Students learn how to explain the problem, research, decisions, iterations, final solution and AI-assisted workflow clearly.

• UX case study
• problem statement
• research
• persona
• user journey
• information architecture
• wireframes
• UI design
• design system
• prototype
• usability testing
• iterations
• design decisions
• AI workflow
• portfolio structure
• presentation

Hands-on lab: Create a complete UI/UX Portfolio Case Study documenting the problem, research, UX process, design decisions, final UI, prototype, testing and AI-assisted workflow.

Complete and present the final digital product design by bringing together UX research, information architecture, user flows, wireframes, UI design, design systems, responsive screens, prototyping, usability testing and AI-assisted design.

• End-to-end UX process
• user research
• personas
• empathy mapping
• user journey
• information architecture
• user flows
• wireframes
• high-fidelity UI
• typography
• colour
• Auto Layout
• design systems
• responsive design
• prototyping
• usability testing
• UX audit
• AI-assisted design
• portfolio case study
• presentation
• design handoff basics

Hands-on lab: Complete & present the AI-Powered Digital Product Design Project: UX research, persona, user journey, IA, wireframes, high-fidelity UI, responsive screens, design system, clickable prototype, usability fixes, AI-assisted workflow and portfolio case study