UI/UX Design with Figma

What you will be able to do

• Plan and run lightweight user research and turn findings into a clear problem statement
• Create personas, jobs-to-be-done statements and user journeys grounded in research
• Structure an app or website with information architecture and wireframes
• Apply visual hierarchy, typography, colour and layout grids to create clear interfaces
• Build reusable Figma components with auto layout, variants and variables
• Design responsive, accessible screens that meet WCAG contrast, focus and touch-target guidance
• Prototype interactions, run usability tests and iterate on the findings
• Hand designs to developers with Dev Mode and present the work as a portfolio case study

About this course

Syllabus

This syllabus is a draft awaiting instructor review. Topics, order and schedule may change before the first batch is announced.

1. 01Understanding users and the problem+4 live sessions · 8 hours · The design process and the research that makes design decisions defensible.

   Learning objectives

   • Explain the difference between UI and UX and the stages of a design process
   • Plan and run short user interviews and surveys without leading questions
   • Synthesise findings into personas, jobs-to-be-done and a problem statement

   Live sessions

   1. 01What UI/UX design is and how products are designed2 hUI versus UX, the double-diamond process, the roles on a product team, and a first tour of Figma and FigJam with the guided project brief.
   2. 02User research methods2 hInterviews, surveys and observing real use; writing a research plan and neutral questions; consent and handling participants’ personal information carefully.
   3. 03Personas, jobs-to-be-done and problem definition2 hAffinity mapping research notes in FigJam, building evidence-based personas, jobs-to-be-done statements, and turning insights into a problem statement and how-might-we questions.
   4. 04Week 1–2 review and doubt-clearing2 hCritique of learners’ research plans and syntheses; open questions.

   Practice

   Interview two people about how they find study space today and synthesise the notes in FigJam.

   Assessment

   Assignment: research summary with one persona, a jobs-to-be-done statement and a problem statement.

   You will be able to

   You can find out what users need and define the right problem before designing screens.

2. 02Journeys, structure and wireframes+4 live sessions · 8 hours · Map how people move through a product and sketch its structure before styling it.

   Learning objectives

   • Map user journeys and task flows from research
   • Organise content with information architecture and a sitemap
   • Create low-fidelity wireframes in Figma with frames and basic shapes

   Live sessions

   1. 05User journeys and task flows2 hJourney maps with stages, actions, thoughts and pain points; task flows for a single goal; finding where design can help most.
   2. 06Information architecture2 hGrouping and labelling content, card sorting, sitemaps, navigation patterns for mobile and web, and common navigation mistakes.
   3. 07Wireframing in Figma2 hFrames, shapes, text and basic layers in Figma; sketching to low-fidelity wireframes; common mobile screen patterns such as lists, details and forms.
   4. 08Wireframe critique and checkpoint quiz2 hStructured peer critique of wireframes; short quiz on research, journeys and information architecture; capstone briefs released; doubt-clearing.

   Practice

   Map the study-room booking journey, card-sort its content and wireframe the core booking flow.

   Assessment

   Checkpoint quiz plus submission of the journey map, sitemap and wireframes.

   You will be able to

   You can plan a product’s structure and flows before investing in visual design.

3. 03Visual design fundamentals+3 live sessions · 6 hours · Make interfaces clear and attractive with hierarchy, typography, colour and layout.

   Learning objectives

   • Use size, weight, spacing and contrast to create visual hierarchy
   • Choose and set type for readable interfaces
   • Build a colour palette with purpose and sufficient contrast

   Live sessions

   1. 09Visual hierarchy, layout grids and spacing2 hGestalt principles, alignment, proximity and white space, 8-point spacing, column and layout grids in Figma, and designing for scanning.
   2. 10Typography for interfaces2 hChoosing typefaces, type scales, line height and length, text styles in Figma, and supporting Indian-language scripts where needed.
   3. 11Colour, imagery and visual critique2 hColour roles, building a palette, colour styles in Figma, contrast ratios, icons and imagery; critique of learners’ first high-fidelity screens.

   Practice

   Turn the booking-flow wireframes into high-fidelity screens using a defined grid, type scale and palette.

   Assessment

   Assignment: three high-fidelity screens with a short rationale for hierarchy, type and colour choices.

   You will be able to

   You can turn wireframes into clean, consistent and readable interfaces.

4. 04Components, design systems and responsive design+4 live sessions · 8 hours · Build reusable components and a small design system, and make designs adapt to any screen.

   Learning objectives

   • Lay out components and screens with auto layout and constraints
   • Create components with variants and properties
   • Define design tokens with Figma variables and modes
   • Design responsive layouts across mobile, tablet and desktop

   Live sessions

   1. 12Auto layout and constraints2 hAuto layout direction, spacing, padding and resizing; nesting auto layout; constraints and how screens behave when frames resize.
   2. 13Components and variants2 hMain components and instances, overrides, variants for states such as default, pressed and disabled, component properties, and organising a library.
   3. 14Variables, tokens and design systems2 hColour, spacing and number variables, light and dark modes, naming tokens so developers can use them, and how established design systems are structured.
   4. 15Responsive design and doubt-clearing2 hBreakpoints, adapting the booking flow from mobile to tablet and desktop, responsive components; open questions on components and variables.

   Practice

   Build a button, input, card and navigation component set with variants and variables, and rebuild the screens with it.

   Assessment

   Assignment: a small component library and the booking flow at two breakpoints.

   You will be able to

   You can design consistently and quickly with a reusable component system.

5. 05Accessibility, interaction and testing+3 live sessions · 6 hours · Design for everyone, bring designs to life with prototypes and test them with real people.

   Learning objectives

   • Check designs against WCAG 2.2 AA contrast, focus and touch-target guidance
   • Design interactions, feedback and states that help users succeed
   • Build interactive prototypes and run moderated usability tests

   Live sessions

   1. 16Accessible design2 hWCAG 2.2 AA basics for designers: colour contrast, not relying on colour alone, visible focus and focus order, touch-target sizes, readable text, form labels and errors, and reduced motion.
   2. 17Interaction design and prototyping2 hFeedback, affordances and states including loading, empty and error; prototype connections, overlays, smart animate and interactive components in Figma.
   3. 18Usability testing and iteration2 hWriting test tasks, running a moderated test, observing without leading, recording findings by severity, and deciding what to change; doubt-clearing.

   Practice

   Run an accessibility check on the booking flow, prototype it and test it with two people, then iterate.

   Assessment

   Assignment: accessibility checklist, prototype link and a usability test summary with the changes made.

   You will be able to

   You can validate designs with real users and make them usable by more people.

6. 06Handoff, portfolio and capstone+3 live sessions · 6 hours · Prepare designs for developers, present the work as a case study and complete the capstone.

   Learning objectives

   • Prepare annotated, Dev Mode-ready files for developers
   • Write a portfolio case study that shows process and decisions honestly
   • Deliver and present a complete capstone case study

   Live sessions

   1. 19Developer handoff and portfolio case studies2 hDev Mode, annotations, measurements, exporting assets, ready-for-dev status and working with developers; structuring a case study around problem, process, decisions and results.
   2. 20Capstone studio and doubt-clearing2 hFocused working session on capstone designs with individual feedback and critique.
   3. 21Capstone presentations and final assessment2 hLearners present their case studies for live review; final assessment covering the whole course.

   Practice

   Prepare the capstone file for handoff and draft its case study.

   Assessment

   Capstone case study submission and a final assessment (pass mark 60%).

   You will be able to

   You can take a design from research to developer handoff and explain your process convincingly.

Teaching formats and fees

Every format teaches the full syllabus live, with the same projects, assessments and certificate rules. The fee is per student for the whole course.

Launch fee — GST treatment to be confirmed.

Fees are set in Indian rupees. Amounts in other currencies are estimates; the amount and currency you would pay are shown before payment once online enrolment opens.

Schedules and batches

Choose the schedule that fits your week. Both teach the same syllabus and the same 42 live hours; only the number of weeks differs.

• Weekday Intensive classes are one hour, so each 2 h syllabus session is taught across consecutive weekday classes.
• Weekend Evening classes run on Saturday and Sunday evenings; the exact time and time zone are set before a batch is confirmed.
• Public holidays are not class days unless the instructor confirms a class. Holidays, instructor leave and cancelled classes move the end date later so no live hours are lost.
• Plan about 5 hours a week of exercises, assignments and project work outside class.
• Group, Duo and One-to-One courses all follow one of these two schedules.

Final project

Certificate

Tools and skills

Where these skills apply

• UI and UX design for apps and websites
• Product design on cross-functional teams
• Design work for startups, agencies and freelance clients
• Developers and product managers collaborating more effectively with design
• Improving the usability of internal tools and business software

We help you prepare for work; we do not guarantee jobs, placements or salaries. Career resources

Questions about UI/UX Design with Figma