Use Code “BF40” for 40% Off! Ends on Dec 3rd.
00
Days
00
Hrs
00
Min
00
Sec
Join designers from startups to top companies
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.
Dashboard mockup
Dashboard mockup
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.
Dashboard mockup
Dashboard mockup
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.
Dashboard mockupiPhone mockup
Dashboard mockup
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.

Don’t just take our word for it

Hear from some of our amazing students.
"The course was amazing! I ended up taking a lot of notes as the instructor provided so much information. Excited to dig deeper into this. Thank you again the course was awesome."
Kc Brown
Product Designer
"Excellent course. Everything you need in one course! Thank you so much, I learned a lot."
Amina Mehić
UX Designer
"Amazing Course, I have learnt so many things about Figma Prototype. Glad to do this course. Recommended for anyone who want to learn Figma prototype with following easy steps."
Akash Gia
Interactive Designer
"Great content. The style of teaching and the course engagement was just amazing. Just fall in love with the teacher thinking to participate in all of his courses."
Amir Sohail
Product Designer
"Great course! Was able to digest everything really quickly. This will help me a lot in my journey as a designer."
Beryl Lao
Product Designer
"I came to this course with the expectation of finding it similar to other "Prototyping courses out there where they show you how to connect a frame to another one and voila!" but Arash exceeded my expectation with animation that are useful and usable in real projects and not just dribble shots. Thanks Arash for the awesome content. :)"
Otman Ouali
UX Designer
"Very helpful courses, well organized, very clear instructions, couldn't ask for better! this class really helped me get in touch with the software and learn more about the UI/UX design process. Thank you Arash for this amazing class, the effort put into it is greatly "appreciated.
Mohammed Filali
UX Designer
"THANK YOU! I have been watching multiple other Figma beginner courses and while they were good in certain areas I felt like I wasn't getting the whole picture. Your course made everything click in to place!!! Really well done on such an informative and motivating course!! I definitely will be using it for reference with my future projects. If you are a student looking for a course that will cover a project from start to finish, get you inspired and excited then you MUST do this course."
Candice Robertson
UX Designer
"Amazing course! Well organized and crystal clear! Arash is a real master. One of the best courses I've ever attended!"
Valeria Tumietto
UI/UX Designer
"I am the type of person who usually enrolls in a thousand courses and never manages to finish them, but this course is so practical and well organized that it gave me the motivation to finish it. I recommend it for everyone who is starting in Figma."
Ana Sánchez
UI/UX Designer
"I really enjoyed and learned a lot from this! I'm familiar with most Adobe softwares, and I was a bit scared to transition to Figma. However this tutorial helped me a lot, everything was explained well and clearly, I'm confident that this will help anyone even without design experience at all. Thank you so much Arash!"
Joshua Perri
UI Designer
"Loved this class. Very thought through and engaging. Steps are clear and concise and all of the work is clean. Nice work, thanks."
Danny Armstrong
Web Designer
"I absolutely loved this class! As someone who had no prior knowledge of Figma going in, the way Arash taught this course was very clear and straightforward. I loved creating my first app design and website landing page. I'm excited to continue my journey in UI/UX design!"
Yong Jie
UI Designer

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
Exclusive access to the community
Lifetime free updates
Certificate of completion
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
Access to an exclusive community for getting feedback

About your instructor

Over the last 10 years, Arash has been a freelance UI/UX designer, educator, and university lecturer. He has collaborated with international companies and startups like Debenhams, Canon, etc. He has been privileged to guide and empower more than 40,000 students worldwide, helping them start their design career.
Support

Frequently asked questions

Everything you need to know about the course and billing.
When I join UI Design & Figma Mastery, do I have permanent access?
Yes. With a one-time fee, you get unlimited access to all current and future course content, including videos, design challenges, and quizzes.
Do you offer a free trial?
Unfortunately, due to the nature of the digital content provided, we are unable to accept refund requests. Once the lessons have been watched and project files have been downloaded, they become permanently accessible to you.

Rest assured, our team works diligently to ensure that the quality of our content is of the highest standard, empowering you to make the most of your learning experience.
Will I receive a certificate of completion?
Yes. Upon completing all modules, you will be eligible to receive a digital certificate of completion to showcase your achievement.
Will I receive a tax invoice?
Certainly! We provide tax invoices for all purchases made on our platform. Once your payment is processed, you can conveniently log in to your account and navigate to the Billing page. From there, you'll be able to download your tax invoice.
Do you offer educational discounts?
Yes, we do offer a 30% educational discount for students with valid IDs. Just email us at support@thedesignmastery.com, and we will provide you with all the necessary information and steps to use the discount.
What if I need help?
Upon purchasing the course, you will gain automatic access to our exclusive community, designed to support your learning journey. In this community, you can ask questions, seek guidance, and connect with fellow learners.

Our dedicated team is committed to providing prompt responses, ensuring that you receive the assistance you need as quickly as possible.
Does UI Design & Figma Mastery also teach UX?
While the curriculum primarily focuses on UI design, it encompasses various topics that also intersect with UX design. Currently, there is no dedicated focus on UX research or testing within the curriculum. However, we have plans to include these specific UX topics in the future.
We use cookies to personalize content, ads, analyze our traffic and improve your experience on our site. By clicking “Allow" you agree to the use of cookies. Read our Cookie Policy.