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.
This course is available and delivery within a few hours!
File Size: 5.22 GB
Arash Ahadzadeh – UI Design & Figma Mastery
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
- 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
2- What’s UI/UX Design?
Module 02 – UI Design Principles
1- Intro to Design Principles
2- Layout
3- Visual Hierarchy
4- Visual Noise
5- Iconography
6- Typography
7- Contrast
8- Color Palette
9- Spacing
10- Grids
11- Consistency
12- Laws of UX
Module 03 – Figma Academy
1- Introduction
2- Figma Environment
3- Shapes
4- Images
5- Editing Shapes
6- Layers Basics
7- Pen & Pencil
8- Boolean Operations
9- Masks
10- Measurements
11- Text
12- Auto Layout
13- Auto Layout Updates (2023)
14- Constraints and Adaptive Layouts
15- Styling: Fill, Stroke, Effects
16- Text and Color Styles
17- Components
18- Variants
19- Interactive Components
20- Layout Grids
21- Plugins
22- Exporting
23- Collaboration & Commenting
24- Variables
25- Dev Mode
26- Important Keyboard Shortcuts
Module 04 – UI Elements
1- Intro to UI Elements
2- Text Fields
3- Buttons
4- Sliders
5- Tooltips
6- Selection Controls
7- Cards
8- Dialogs
9- Lists
10- Tables
11- Navigation
12- Charts
13- Snackbars
Module 05 – Color Theory
1- The importance of colors in UI/UX design
2- Color modes
3- The Color Ingredients
4- Master the Color Wheel
5- Different Types of Colors
6- Color Harmonies
7- Color Contrast
8- Real-world Examples of Harmonious Color Schemes
9- Introduction to Color Psychology
10- Gender Differences in Color Preference
11- Required Colors for UI Design
12- How to create a color palette for your project?
13- How to choose your base color?
14- How to choose an accent color?
15- How to choose background colors?
16- Semantic colors in UI design
17- What is a color scale?
18- What is grayscale?
19- How to apply a color palette to your design?
20- How to create great gradients?
21- What is color accessibility?
22- Validate your color palette
23- Useful tools for accessibility
Module 06 – Practical Web Design
1- Intro to the Project: Web Design
2- What’s a Project Brief?
3- What’s a Design System?
4- Create a Design System | Part 1
5- Create a Design System | Part 2
6- Create a Design System | Part 3
7- Create a Design System | Part 4
8- Create a Design System | Part 5
9- Create a Moodboard
10- Create a Wireframe | Part 1
11- Create a Wireframe | Part 2
12- What’s the Box Model?
13- Navbar
14- Hero Section
15- Social Proof Section
16- Features Section
17- CTA Section
18- Expanded Features Section
19- Integrations Section
20- Testimonials Section
21- FAQ Section
22- Footer Section
23- Responsiveness | Mobile
24- Responsiveness | Tablet
25- Responsiveness | Large Desktop
26- Componentization
27- Breakpoints Prototype
28- Project Handoff
Module 07 – Design Challenges
1- Design Challenge 1 | Sign-in page
2- Design Challenge 1 | Solution
3- Design Challenge 2 | Table
4- Design Challenge 2 | Solution (part 1)
5- Design Challenge 2 | Solution (part 2)
6- Design Challenge 3 | Sidebar Layout
7- Design Challenge 3 | Solution
8- How to Practice UI Design?
9- Tips on Color Usage
Module 08 – Prototyping & Animations
1- What’s Prototyping?
2- Types of UI Animation
3- Basics of Prototyping in Figma
4- Animated Like Button
5- Variants & Interactive Components
6- Animated Buttons
7- Animated Switches
8- Animated Slider
9- Animated Card
10- Animated Text
11- Interactive Dropdown Menu
12- Animated Notification
13- iPhone’s Dynamic Island
14- 3D Animation in Figma
15- Loading Animation
16- Animated Mesh Gradient
17- Scroll Animation
18- Animated Tab Bar
19- Animated Image Carousel
20- Animated Floating Action Button
21- Accordion Effect
Module 09 – Conclusion
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
Course Features
- Lecture 0
- Quiz 0
- Duration 10 weeks
- Skill level All levels
- Language English
- Students 28
- Assessments Yes
