Arash Ahadzadeh – UI Design & Figma Mastery

Arash Ahadzadeh – UI Design & Figma Mastery

Proof Content

Become a Pro UI Designer by Mastering Figma
Unlock your full potential in UI design with our UI design and Figma mastery course. Learn industry-leading techniques, design real-world projects from scratch, and create captivating user experiences.

Module 01
Learn the Design Fundamentals

Mastering the fundamentals is the cornerstone of any successful UI/UX designer. In this module, we focus on equipping you with the essential knowledge and skills that form the building blocks of exceptional design.

Module 02
Figma Academy

In the Figma Academy module, we take you on a step-by-step journey through the various aspects of Figma, ensuring you become proficient in utilizing its full potential. From the basics of navigating the interface to advanced techniques for creating complex design systems and interactive prototypes, this module covers it all.

Module 03
UI Elements: The Building Blocks of Exceptional User Interfaces

In this module we will go through the essential components that form exceptional user interfaces. As a UI designer, understanding these elements and their characteristics is crucial for creating intuitive and visually appealing designs.

Module 04
Master the Science of Color

Understanding the principles of color is essential for creating visually appealing, harmonious, and meaningful user experiences. Through the Color Theory module, we dive into the psychology of colors, color systems, color harmony, and the effective use of color in UI design.

• Master color theory and create harmonious color palettes
• Create accessible color palettes
• Learn how to apply a color palette to your design

Module 05
Design a Responsive Landing Page With Your Design System

The Practical Web Design module focuses on two key aspects: creating your own design system and crafting a captivating landing page. You’ll learn how to establish design guidelines, and design a fully responsive landing page that adapts to different devices.

Create an accessible design system from scratch 
Learn how to build an accessible design system for your projects.

Design a modern landing page 
Ideate, wireframe, and design a landing page for a SaaS product.

Make your design responsive 
Make your design adapt to different devices such as tablet and mobile.

Deliver your project 
Learn how to prepare and deliver your project to the developer.

Module 06
Design Challenges

In the Design Challenges module, we present you with exciting opportunities to test your knowledge, hone your skills, and apply what you’ve learned in real-world scenarios. Get ready to tackle a series of design challenges that push your creativity, critical thinking, and problem-solving abilities to new heights.

Module 07
Prototyping & Animations

In the Prototyping & Animation module, discover the power of prototyping and animation as you transform static interfaces into interactive and engaging experiences. Master the art of creating seamless transitions, captivating animations, and user-friendly prototypes that truly showcase the potential of your designs.

Learn the basics of prototyping 
Learn the fundamentals of prototyping in Figma.

Make advanced micro-interactions 
Turn your static UI elements into animated components.

Create advanced prototypes 
Learn how to create advanced animations and interactions in Figma.

Make seamless UI animations 
Learn real-world techniques to make smooth animations and transitions.

What’s included in this course?
Everything from Figma starter projects to Final project files.

• 17+ hours of content
• 130+ video lessons
• Figma project starter file

Course Curriculum
What will you learn in this UI design course?

Module 01 – Introduction
1- Introduction 02:59
2- What’s UI/UX Design? 02:54

Module 02 – UI Design Principles
1- Intro to Design Principles 01:20
2- Layout 03:41
3- Visual Hierarchy 03:28
4- Visual Noise 01:59
5- Iconography 02:48
6- Typography 09:08
7- Contrast 01:35
8- Color Palette 00:59
9- Spacing 08:18
10- Grids 03:34
11- Consistency 03:27
12- Laws of UX 14:23

Module 03 – Figma Academy
1- Introduction 01:00
2- Figma Environment 06:37
3- Shapes 11:01
4- Images 03:47
5- Editing Shapes 04:05
6- Layers Basics 15:56
7- Pen & Pencil 05:38
8- Boolean Operations 09:51
9- Masks 06:23
10- Measurements 04:11
11- Text 12:46
12- Auto Layout 42:40
13- Auto Layout Updates (2023) 07:29
14- Constraints and Adaptive Layouts 12:45
15- Styling: Fill, Stroke, Effects 17:30
16- Text and Color Styles 10:28
17- Components 24:47
18- Variants 12:12
19- Interactive Components 03:53
20- Layout Grids 06:01
21- Plugins 08:33
22- Exporting 08:04
23- Collaboration & Commenting 02:45
24- Variables 30:00
25- Dev Mode 06:44
26- Important Keyboard Shortcuts 01:00

Module 04 – UI Elements
1- Intro to UI Elements 00:46
2- Text Fields 06:51
3- Buttons 04:13
4- Sliders 02:34
5- Tooltips 01:07
6- Selection Controls 02:49
7- Cards 03:06
8- Dialogs 02:57
9- Lists 01:28
10- Tables 03:15
11- Navigation 02:08
12- Charts 01:48
13- Snackbars 01:35

Module 05 – Color Theory
1- The importance of colors in UI/UX design 01:36
2- Color modes 01:49
3- The Color Ingredients 01:13
4- Master the Color Wheel 01:30
5- Different Types of Colors 01:52
6- Color Harmonies 02:01
7- Color Contrast 01:45
8- Real-world Examples of Harmonious Color Schemes 04:37
9- Introduction to Color Psychology 03:49
10- Gender Differences in Color Preference 01:23
11- Required Colors for UI Design 03:36
12- How to create a color palette for your project? 03:51
13- How to choose your base color? 01:37
14- How to choose an accent color? 00:48
15- How to choose background colors? 00:58
16- Semantic colors in UI design 01:00
17- What is a color scale? 02:05
18- What is grayscale? 02:22
19- How to apply a color palette to your design? 04:02
20- How to create great gradients? 03:26
21- What is color accessibility? 02:55
22- Validate your color palette 01:43
23- Useful tools for accessibility 01:49

Module 06 – Practical Web Design
1- Intro to the Project: Web Design 00:27
2- What’s a Project Brief? 07:29
3- What’s a Design System? 03:17
4- Create a Design System | Part 1 14:00
5- Create a Design System | Part 2 09:22
6- Create a Design System | Part 3 03:27
7- Create a Design System | Part 4 11:10
8- Create a Design System | Part 5 07:44
9- Create a Moodboard 09:37
10- Create a Wireframe | Part 1 31:58
11- Create a Wireframe | Part 2 16:34
12- What’s the Box Model? 03:29
13- Navbar 21:31
14- Hero Section 16:52
15- Social Proof Section 08:07
16- Features Section 17:30
17- CTA Section 05:11
18- Expanded Features Section 13:53
19- Integrations Section 14:31
20- Testimonials Section 12:17
21- FAQ Section 09:48
22- Footer Section 12:27
23- Responsiveness | Mobile 36:07
24- Responsiveness | Tablet 10:08
25- Responsiveness | Large Desktop 07:32
26- Componentization 10:03
27- Breakpoints Prototype 05:50
28- Project Handoff 10:25

Module 07 – Design Challenges 
1- Design Challenge 1 | Sign-in page 01:59
2- Design Challenge 1 | Solution 25:08
3- Design Challenge 2 | Table 01:11
4- Design Challenge 2 | Solution (part 1) 21:15
5- Design Challenge 2 | Solution (part 2) 20:38
6- Design Challenge 3 | Sidebar Layout 00:58
7- Design Challenge 3 | Solution 04:22
8- How to Practice UI Design? 08:33
9- Tips on Color Usage 04:17

Module 08 – Prototyping & Animations
1- What’s Prototyping? 02:00
2- Types of UI Animation 02:54
3- Basics of Prototyping in Figma 20:52
4- Animated Like Button 09:20
5- Variants & Interactive Components 26:00
6- Animated Buttons 10:46
7- Animated Switches 02:29
8- Animated Slider 06:18
9- Animated Card 03:45
10- Animated Text 05:31
11- Interactive Dropdown Menu 21:12
12- Animated Notification 09:16
13- iPhone’s Dynamic Island 06:12
14- 3D Animation in Figma 08:09
15- Loading Animation 12:29
16- Animated Mesh Gradient 07:35
17- Scroll Animation 04:53
18- Animated Tab Bar 07:43
19- Animated Image Carousel 09:38
20- Animated Floating Action Button 05:21
21- Accordion Effect 03:29

Module 09 – Conclusion
1- What’s next? 01:45
2- Get your certificate 01:00

This course includes:

• 130+ video lessons (17+ hours of content)
• Design basics and UI design fundamentals
• Master all Figma’s tools and features
• Master the Color Theory and learn how to create harmonious color palettes
• Step-by-step walkthrough of the UI design process
• All the project’s Figma files
• Create your design system
• Design a responsive landing page from scratch
• Learn advanced UI design techniques
• Solve real-world design challenges
• Create advanced prototypes and animations
• Learn the design handoff process
• Test your knowledge with engaging quizzes

If you have any questions regarding this product, please contact us by email: [email protected]