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:
- Installation of Figma in the Device.
- Explore and install Figma plugins.
- Research and collect design inspirations from platforms like Mobbin, Behance, and Dribbble.
- Define user personas and user flows using Figma AI.
- 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:
- Sketch the UI for a Login Screen
- Create a Wireframe for Side Navigation Bar.
- Create Wireframes for Simple To-Do App
- Create a Wireframe for your project.
- 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:
- Create a Design Token Sheet.
- Apply typescale and typography hierarchy.
- Create and reuse text styles.
- Check color contrast and accessibility compliance.
- 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:
- Use Figma AI to create the first draft UI.
- Design button components with variants (primary, secondary, disabled).
- Build a navigation bar using UI kits and libraries.
- Build Responsive Components.
- 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:
- Apply max-width and min-width using Figma variables.
- Design layouts for multiple screen sizes using device frames.
- Use constraints and auto-layout to maintain element positions.
- Add fixed elements and enable scroll interactions.
- Create fundamental responsive components (buttons, input fields, checkboxes).
- 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:
- Build interactive prototype using Figma AI.
- Apply dissolve and smart animate transitions.
- Create conditional logic and dynamic fields (e.g., price calculators).
- Add overlay connections and loading states.
- Finalize complete clickable prototype.
Module 7: Capstone Project
Applying UX/UI Design on your project