per person /

Free

Home Courses

UI/UX Using Figma (CUDM2514)

UI/UX Using Figma (CUDM2514)

Teacher

M. Aswini Kumar

Category

Course Attendees

Still no participant

Course Reviews

Still no reviews


COURSE OBJECTIVES:

  • Understand the fundamentals of UI and UX design and their importance.
  • Apply design thinking and user-centered design principles.
  • Use Figma for creating wireframes, UI components, and prototypes.
  • Develop responsive and interactive designs.
  • Build and maintain a reusable design system.
  • Create end-to-end clickable prototypes with transitions and animations.

COURSE OUTCOMES:

  • CO1 - Explain the core concepts of UI and UX, and differentiate between good and bad design experiences. (Understand, Analyze)
  • CO2 - Create low-fidelity and high-fidelity wireframes, prototypes, and UI structures using Figma tools. (Apply, Create)
  • CO3 - Apply principles of visual design including color theory, typography, and accessibility to enhance user interfaces. (Apply, Evaluate)
  • CO4 - Develop reusable UI components and design systems for consistent and scalable design. (Create, Analyze)
  • CO5 - Build interactive and responsive prototypes demonstrating real-time user interactions and logical flows. (Create, Evaluate)

CO-PO MAPPING

 

 PO1  PO2  PO3  PO4  PO5  PO6  PO7  PO8  PO9  PO10  PO11  PO12  PSO1  PSO2  PSO3
 CO1  3  3  1  1  3  2  1  2  -  1  -  2
 CO2  3  2  3  3  2  2  -  1  1  2  1  1
 CO3  3  2  3  2  3  1  2  1  -  2  -  2
 CO4  3  2  3  2  2  2  1  2  1  2  1  1
 CO5  3  2  3  3  3  2  1  1  2  3  2  2

COURSE CONTENTS

 

Module 1: Introduction to UI and UX

Install Figma via Figma Official Website. Understand the basics of UI/UX, design thinking, layout structure, and how to start a UI/UX project using Figma. We need to showcase real life examples for this topic. Good UI and Good UX, Good UI and Bad UX, Bad Ui and Good UX, Bad UI and Bad UX for better understanding. We need to explain what is UI and UX, the difference between those both, and Why UX is important?

Practicals:

  1. Installation of Figma in the Device.
  2. Explore and install Figma plugins.
  3. Research and collect design inspirations from platforms like Mobbin, Behance, and Dribbble.
  4. Define user personas and user flows using Figma AI.
  5. Exploring Figma Features (Pen Tools, Frames, Text, Comments).

Module 2: Wireframing

Learn how to create low-fidelity wireframes (Rough Sketches in Notebook) focusing on structure and flow, without visual polish and High Fidelity Wireframing

Practicals:

  1. Sketch the UI for a Login Screen
  2. Create a Wireframe for Side Navigation Bar.
  3. Create Wireframes for Simple To-Do App
  4. Create a Wireframe for your project.
  5. Wireframe UI from a Real App (Choose an app and redesign the app which creates a visually appealing UI).

Module 3: Visual Design Elements (Color, Typography, Styles) and Variables

Explore visual aspects of UI such as color schemes, typography, contrast, and text hierarchy. Learn how to apply visual design principles and create reusable design variables to ensure consistency and scalability in UI design.

Practicals:

  1. Create a Design Token Sheet.
  2. Apply typescale and typography hierarchy.
  3. Create and reuse text styles.
  4. Check color contrast and accessibility compliance.
  5. Build a Mini Design System File.

Module 4: UI Components and Variants

Understand component-based design, AutoLayout, and how to create reusable UI elements.

Practicals:

  1. Use Figma AI to create the first draft UI.
  2. Design button components with variants (primary, secondary, disabled).
  3. Build a navigation bar using UI kits and libraries.
  4. Build Responsive Components.
  5. Design and apply nested components for consistency.

Module 5: Responsive & Scalable UI Design Systems

Responsive design principles using Figma constraints and layout grids, Designing for multiple screen sizes and device types, Creating and managing reusable components, Building scalable design systems for SaaS, mobile, or web products, Design tokens, documentation, and annotations

Practicals:

  1. Apply max-width and min-width using Figma variables.
  2. Design layouts for multiple screen sizes using device frames.
  3. Use constraints and auto-layout to maintain element positions.
  4. Add fixed elements and enable scroll interactions.
  5. Create fundamental responsive components (buttons, input fields, checkboxes).
  6. Build advanced components like cards, modals, accordions, dropdowns.

Module 6: Prototyping and Animation

Develop user interactions and flows using animations, overlays, and logical transitions.

Practicals:

  1. Build interactive prototype using Figma AI.
  2. Apply dissolve and smart animate transitions.
  3. Create conditional logic and dynamic fields (e.g., price calculators).
  4. Add overlay connections and loading states.
  5. Finalize complete clickable prototype.

Module 7: Capstone Project

Applying UX/UI Design on your project


Our Main Teachers