🏫 Programming & Software Development
UI-UX Design with Figma
UI/UX Design Course - Learn Figma, Wireframing, Prototyping & User-Centered Design
Duration
12 Weeks
Weekly Hours
4 Hours
M
Course Incharge
Muzammil Bilwani
📋 Prerequisites
✓ Must be an undergraduate student with a creative mindset and basic computer literacy
📖 Course Description
Learn to design user-centered interfaces through practical projects using Figma. Create wireframes, prototypes, and conduct usability testing.
What You Will Learn
UI/UX design principles and best practices
- Wireframing and prototyping in Figma
- Designing for web and mobile platforms
- Conducting user testing and applying design thinking
Course Outline
1
Introduction to UI/UX Design and Figma
- →Overview of course structure and goals
- →Importance of peer review and how to apply feedback
- →Required tools: Figma setup and workspace basics
- →What is a User Interface?
- →The Relationship Between UI and UX
- →Roles in UI/UX
- →Basic navigation and interface in Figma
- →Creating and managing projects in Figma
2
Figma Basics and Design Principles
- →Using shapes, text, and images in Figma
- →Layers, grouping, and frames in Figma
- →Introduction to vector networks in Figma
- →Setting design goals
- →Introduction to color theory
- →Introduction to font psychology
- →Basic typography in Figma
- →Basic imagery use in Figma
- →Creating basic UI elements in Figma
- →Applying design principles to Figma projects
3
Component Design and Reusability
- →Creating reusable components in Figma
- →Using and managing component variants in Figma
- →Designing buttons in Figma
- →Designing input fields in Figma
- →Designing other UI elements in Figma
- →Building a component library in Figma
- →Implementing components in design projects
4
Advanced Figma Techniques
- →Creating interactive prototypes in Figma
- →Adding interactions to prototypes in Figma
- →Managing interactions in Figma prototypes
- →Creating transition animations in Figma
- →Building a simple interactive prototype in Figma
- →Testing prototypes in Figma
- →Refining prototypes based on feedback
5
Visual Design Elements
- →Defining visual style and aesthetic for a project
- →Using color effectively in Figma
- →Using shape effectively in Figma
- →Using imagery effectively in Figma
- →Using language as a design tool in Figma
- →Designing a cohesive visual style in Figma
- →Applying look and feel to UI projects in Figma
6
Advanced Prototyping and User Flow
- →Creating complex interactions in Figma
- →Creating animations in Figma
- →Using overlays in Figma prototypes
- →Using nested components in Figma prototypes
- →Managing prototype flows in Figma
- →Developing advanced prototypes in Figma
- →Conducting usability testing with Figma prototypes
7
Collaboration and Feedback in Figma
- →Sharing designs with stakeholders using Figma
- →Using comments for feedback in Figma
- →Collaborating with team members in Figma
- →Managing version control in Figma
- →Using design history in Figma
- →Working on a collaborative design project in Figma
- →Implementing feedback from peers in Figma
8
Design Systems and Libraries in Figma
- →Principles of design systems
- →Creating a design system in Figma
- →Maintaining a design system in Figma
- →Using Figma libraries
- →Managing Figma libraries
- →Building a comprehensive design system in Figma
- →Creating and managing component libraries in Figma
9
Responsive Design with Figma
- →Principles of responsive design
- →Designing for different screen sizes in Figma
- →Using auto-layout in Figma
- →Setting constraints in Figma
- →Using grid systems in Figma
- →Designing responsive interfaces in Figma
- →Applying auto-layout techniques in Figma
- →Implementing grid systems in Figma
10
User Research and Testing
- →Conducting user research for UI projects
- →Creating user personas based on research
- →Planning usability testing for Figma prototypes
- →Conducting usability testing sessions
- →Analyzing usability test results
- →Incorporating research findings into design
- →Designing for user needs based on research
11
Advanced UI Techniques
- →Designing with accessibility in mind in Figma
- →Implementing accessibility features in Figma
- →Creating micro-interactions in Figma
- →Adding subtle animations in Figma
- →Designing for web platforms in Figma
- →Designing for mobile platforms in Figma
- →Ensuring inclusive design in Figma
- →Meeting accessibility standards in Figma designs
12
Final Project and Presentation
- →Developing a comprehensive UI project using Figma
- →Incorporating all learned techniques into the project
- →Preparing the final project presentation
- →Presenting the final project to the class
- →Receiving feedback on the final project
- →Providing feedback to peers
- →Reflecting on the design process and lessons learned
- →Discussing best practices in UI design with Figma
📊 Grading Criteria
| Component | Percentage |
|---|---|
| Quizzes | 20% |
| Class Participation / Attendance | 15% |
| Projects | 25% |
| Final Projects | 40% |
| Total | 100% |
Ready to Register in This Course?
Join thousands of students who have transformed their careers. Start your journey today!