Day 1
Introduction to UI Design
Overview of UI Design
UI vs UX: Key Differences
Basics of User-Centered Design
UI Components: Buttons, Forms, and Navigation
Day 2
Getting Started with Figma
Introduction to Figma: Interface Overview
Figma Basics: Layers, Frames, and Pages
Creating a New Project in Figma
Setting Up Your Workspace
Day3
Working with Shapes and Layers
Creating and Editing Shapes in Figma
Understanding Layers and Groups
Aligning and Distributing Elements
Using the Frame Tool for Layouts
Day 4
Color, Typography, and Icons
Color Theory for UI Design
Working with Color Styles in Figma
Typography in UI Design: Font Pairing, Readability, and Consistency
Importing and Creating Icons in Figma
Day 5
Grids, Spacing, and Layouts
Introduction to Grid Systems in UI Design
Setting Up Layout Grids in Figma
Spacing and Alignment Best Practices
Responsive Grids and Flexible Layouts
Assignment
Create a basic landing page UI using grids, color, and typography.
Day 6
Components and Variants in Figma
Creating Reusable Components
Understanding and Creating Variants (Buttons, Inputs, etc.)
Organizing Components in the Assets Panel
Day 7
Building a Design System in Figma
What is a Design System?
Building Reusable Components for a Design System
Creating and Using Text and Color Styles in a Design System
Day 8
Prototyping in Figma (Part 1)
Introduction to Prototyping in Figma
Linking Frames and Creating Interactions
Creating Clickable Prototypes with Basic Transitions
Day 9
Prototyping in Figma (Part 2)
Advanced Prototyping: Smart Animations and Interactive Components
Creating Micro-interactions in Figma
Adding Scrolling and Overlays
Day 10
Mobile UI Design in Figma
Designing Mobile-First Interfaces
Mobile Layout Best Practices
Creating Responsive Designs in Figma (Auto Layout)
Assignment
Create a clickable prototype of a mobile app interface with interactive components.
Day 11
Advanced Figma Features
Using Auto Layout for Responsive Design
Creating Constraints and Adaptive Layouts
Working with Plugins in Figma for Efficiency
Day 12
Collaboration and Version Control in Figma
Figma’s Collaboration Features: Real-Time Design
Version History and File Management
Sharing Files for Review and Feedback
Day 13
Designing for Different Devices (Web, Tablet, Mobile)
Designing Multi-Device UI Layouts in Figma
Creating Responsive UI Components
Best Practices for Web, Tablet, and Mobile UI Design
Day 14
Building Advanced Design Systems
Structuring a Scalable Design System in Figma
Organizing Components, Icons, and Style Libraries
Best Practices for Managing Design System Files
Day 15
UI Design Patterns and Trends
Overview of Common UI Design Patterns
Current UI Design Trends
How to Apply Design Patterns in Figma
Assignment
Create a responsive UI design for both desktop and mobile, using advanced Figma features like Auto Layout and Constraints.
Day 16
Usability Testing Basics
Introduction to Usability Testing
Conducting Basic Usability Tests on Figma Prototypes
Gathering Feedback and Iterating on Design
Day 17
Micro-Interactions and Motion in UI Design
Adding Micro-Interactions in Figma Prototypes
Using Animation to Enhance UI
Best Practices for Motion in User Interfaces
Day 18
High-Fidelity Design in Figma
Transitioning from Low-Fidelity to High-Fidelity Prototypes
Enhancing Your UI with Advanced Visual Design
Using Figma’s Design System to Ensure Consistency
Day 19
Working with External Tools (Zeplin, Principle, etc.)
Exporting Assets from Figma for Developers
Integrating Figma with Zeplin for Handoff
Using Other Tools (Principle) for Advanced Animation
Day 20
Usability Testing and Iteration
Running Usability Tests on High-Fidelity Prototypes
Analyzing Usability Test Results
Iterating on Your Design Based on Feedback
Assignment
Conduct usability testing on your high-fidelity prototype and refine your design based on feedback.
Day 21
Capstone Project Kickoff
Define a Real-World Problem
Conduct Research and Ideate Solutions
Start Sketching Wireframes in Figma
Day 22
Building a High-Fidelity Prototype
Create a High-Fidelity Prototype Based on Your Research
Apply All Skills Learned: Grids, Typography, Color, Components, and Prototyping
Use Design Systems and Responsive Layouts
Day 23
Finalizing the Capstone Project
Add Interactive Components and Micro-Interactions
Run Usability Tests on Your Capstone Prototype
Iterate Based on User Feedback
Day 24
Presenting Your Capstone Project
Finalize Your Prototype for Presentation
Prepare a Presentation of Your Design Process: From Wireframe to Final Product
Present to Peers for Feedback
Day 25
Building Your UI Design Portfolio
How to Structure a UI Design Portfolio
Documenting Case Studies and Design Process
Tips for Presenting Work Online (Behance, Dribbble, Personal Website)
Projects
20 Days
Submit and present your final capstone project, and create a UI design portfolio
showcasing your work.
