UI Design & Figma Mastery
Buy now
Learn more
Module 01 - Introduction
01- Introduction.mp4
02- What's UI/UX Design.mp4
How to access the community?
Module 02 - UI Design Principles
01- Intro to Design Principles.mp4
02- Layout.mp4
03- Visual Hierarchy.mp4
04- Visual Noise.mp4
05- Iconography.mp4
06- Typography.mp4
07- Contrast.mp4
08- Color Palette.mp4
09- Spacing.mp4
10- Grids.mp4
11- Consistency.mp4
12- Laws of UX.mp4
Quiz 01
Module 03 - Figma Academy
01- Introduction to Figma.mp4
Figma Academy (Exercise).fig.zip
02- Figma Environment.mp4
03- Shapes.mp4
04- Images.mp4
05- Editing Shapes.mp4
06- Layers Basics.mp4
07- Pen & Pencil.mp4
08- Boolean Operations.mp4
09- Masks.mp4
10- Measurements.mp4
11- Text.mp4
12- Auto Layout.mp4
13- Figma Auto Layout Updates (2023).mp4
14- Constraints and Adaptive Layouts.mp4
15- Styling Fill Stroke Effects.mp4
16- Text and Color Styles.mp4
17- Components.mp4
18- Variants.mp4
19- Interactive Components.mp4
20- Layout Grids.mp4
21- Plugins.mp4
22- Exporting.mp4
23- Collaboration and commenting.mp4
24- Important Keyboard Shortcuts
25- Variables.mp4
26- Dev Mode.mp4
Module 04 - UI Elements
01- Intro to UI Elements.mp4
02- Text Fields.mp4
03- Buttons.mp4
04- Sliders.mp4
05- Tooltips.mp4
06- Selection Controls.mp4
07- Cards.mp4
08- Dialogs.mp4
09- Lists.mp4
10- Tables.mp4
11- Navigation.mp4
12- Charts.mp4
13- Snackbars.mp4
Quiz 02
Module 05 - Master Color in UI Design
01- The importance of colors in UI/UX design.mp4
02- Color Modes.mp4
03- The color ingredients.mp4
04- Master the color wheel.mp4
05- Different types of colors.mp4
06- Color Harmonies.mp4
07- Color Contrast.mp4
08- Real-world examples of harmonious color schemes.mp4
09- Introduction to Color Psychology.mp4
10- Gender differences in color preference.mp4
11- Required colors for UI design.mp4
12- How to create a color palette for your project.mp4
13- How to choose your base color.mp4
14- How to choose an accent colors.mp4
15- How to choose background colors.mp4
16- Semantic colors in UI design.mp4
17- What is a color scale.mp4
18- What is Grayscale.mp4
19- How to apply a color palette to your design.mp4
20- How to create great gradients?.mp4
21- What is color accessibility.mp4
22- Validate your color palette based on contrast ratio.mp4
23- Useful tools for accessibility.mp4
Module 06 - Web Design Project: Polio CRM Landing Page
01- Intro to the project.mp4
02- What's Project Brief.mp4
03- What's a Design System.mp4
04- Create a Design System part 1.mp4
05- Create a Design System part 2.mp4
06- Create a Design System part 3.mp4
07- Create a Design System part 4.mp4
08- Create a Design System part 5.mp4
09- Create a moodboard.mp4
10- Create a Wireframe (Part 1).mp4
11- Create a Wireframe (Part 2).mp4
12- What's Box Model.mp4
13- Navbar.mp4
14- Hero Section.mp4
15- Social Proof Section.mp4
16- Features Section.mp4
17- CTA Section.mp4
18- Expanded Features Section.mp4
19- Integrations.mp4
20- Testimonials Section.mp4
21- FAQ Section.mp4
22- Footer Section.mp4
23- Responsiveness (Mobile).mp4
23- Responsiveness (Tablet).mp4
25- Responsiveness (Large).mp4
26- Componentization.mp4
27- Breakpoints Prototype.mp4
28- Project Handoff.mp4
Module 07 - UI Design Challenges
01- Design Challenge 1 - Sign-in Page.mp4
02- Challenge 1 Soultion.mp4
03- Design Challenge 02 (Table).mp4
04- Challenge 2 soultion (part 1).mp4
05- Challenge 2 Solution (Part 2).mp4
06- Design Challenge 3 (Sidebar Layout).mp4
07- Challenge 3 Solution.mp4
08- How to practice UI design.mp4
09- Tips on Color Usage.mp4
Final Project.fig.zip
Module 08 - Advanced Prototyping
01- What's prototyping.mp4
02- Types of UI Animation.mp4
Assets (Figma File).zip
03- Basics of Prototyping in Figma.mp4
04- Animated Like Button.mp4
05- Variants & Interactive Components.mp4
06- Animated Buttons.mp4
07- Animated Switches.mp4
08- Animated Slider.mp4
09- Animated Card.mov
10- Animated Text.mp4
11- Interactive Dropdown Menu Final.mp4
12- Animated Notification.mp4
13- iPhone's Dynamic Island.mp4
14- 3D Animation in Figma.mp4
15- Loading Animation.mp4
16- Animated Mesh Gradient.mp4
17- Scroll Animation.mp4
18- Animated Tab Bar.mp4
19- Animated Image Carousel.mp4
20- Animated Floating Action Button.mp4
21- Accordion Effect.mp4
Module 09 - Conclusion
1- What's next.mp4
2- Review the course
Products
Course
Section
Module 06 - Web Design Project: Polio CRM Landing Page
Module 06 - Web Design Project: Polio CRM Landing Page
UI Design & Figma Mastery
Buy now
Learn more
Module 01 - Introduction
01- Introduction.mp4
02- What's UI/UX Design.mp4
How to access the community?
Module 02 - UI Design Principles
01- Intro to Design Principles.mp4
02- Layout.mp4
03- Visual Hierarchy.mp4
04- Visual Noise.mp4
05- Iconography.mp4
06- Typography.mp4
07- Contrast.mp4
08- Color Palette.mp4
09- Spacing.mp4
10- Grids.mp4
11- Consistency.mp4
12- Laws of UX.mp4
Quiz 01
Module 03 - Figma Academy
01- Introduction to Figma.mp4
Figma Academy (Exercise).fig.zip
02- Figma Environment.mp4
03- Shapes.mp4
04- Images.mp4
05- Editing Shapes.mp4
06- Layers Basics.mp4
07- Pen & Pencil.mp4
08- Boolean Operations.mp4
09- Masks.mp4
10- Measurements.mp4
11- Text.mp4
12- Auto Layout.mp4
13- Figma Auto Layout Updates (2023).mp4
14- Constraints and Adaptive Layouts.mp4
15- Styling Fill Stroke Effects.mp4
16- Text and Color Styles.mp4
17- Components.mp4
18- Variants.mp4
19- Interactive Components.mp4
20- Layout Grids.mp4
21- Plugins.mp4
22- Exporting.mp4
23- Collaboration and commenting.mp4
24- Important Keyboard Shortcuts
25- Variables.mp4
26- Dev Mode.mp4
Module 04 - UI Elements
01- Intro to UI Elements.mp4
02- Text Fields.mp4
03- Buttons.mp4
04- Sliders.mp4
05- Tooltips.mp4
06- Selection Controls.mp4
07- Cards.mp4
08- Dialogs.mp4
09- Lists.mp4
10- Tables.mp4
11- Navigation.mp4
12- Charts.mp4
13- Snackbars.mp4
Quiz 02
Module 05 - Master Color in UI Design
01- The importance of colors in UI/UX design.mp4
02- Color Modes.mp4
03- The color ingredients.mp4
04- Master the color wheel.mp4
05- Different types of colors.mp4
06- Color Harmonies.mp4
07- Color Contrast.mp4
08- Real-world examples of harmonious color schemes.mp4
09- Introduction to Color Psychology.mp4
10- Gender differences in color preference.mp4
11- Required colors for UI design.mp4
12- How to create a color palette for your project.mp4
13- How to choose your base color.mp4
14- How to choose an accent colors.mp4
15- How to choose background colors.mp4
16- Semantic colors in UI design.mp4
17- What is a color scale.mp4
18- What is Grayscale.mp4
19- How to apply a color palette to your design.mp4
20- How to create great gradients?.mp4
21- What is color accessibility.mp4
22- Validate your color palette based on contrast ratio.mp4
23- Useful tools for accessibility.mp4
Module 06 - Web Design Project: Polio CRM Landing Page
01- Intro to the project.mp4
02- What's Project Brief.mp4
03- What's a Design System.mp4
04- Create a Design System part 1.mp4
05- Create a Design System part 2.mp4
06- Create a Design System part 3.mp4
07- Create a Design System part 4.mp4
08- Create a Design System part 5.mp4
09- Create a moodboard.mp4
10- Create a Wireframe (Part 1).mp4
11- Create a Wireframe (Part 2).mp4
12- What's Box Model.mp4
13- Navbar.mp4
14- Hero Section.mp4
15- Social Proof Section.mp4
16- Features Section.mp4
17- CTA Section.mp4
18- Expanded Features Section.mp4
19- Integrations.mp4
20- Testimonials Section.mp4
21- FAQ Section.mp4
22- Footer Section.mp4
23- Responsiveness (Mobile).mp4
23- Responsiveness (Tablet).mp4
25- Responsiveness (Large).mp4
26- Componentization.mp4
27- Breakpoints Prototype.mp4
28- Project Handoff.mp4
Module 07 - UI Design Challenges
01- Design Challenge 1 - Sign-in Page.mp4
02- Challenge 1 Soultion.mp4
03- Design Challenge 02 (Table).mp4
04- Challenge 2 soultion (part 1).mp4
05- Challenge 2 Solution (Part 2).mp4
06- Design Challenge 3 (Sidebar Layout).mp4
07- Challenge 3 Solution.mp4
08- How to practice UI design.mp4
09- Tips on Color Usage.mp4
Final Project.fig.zip
Module 08 - Advanced Prototyping
01- What's prototyping.mp4
02- Types of UI Animation.mp4
Assets (Figma File).zip
03- Basics of Prototyping in Figma.mp4
04- Animated Like Button.mp4
05- Variants & Interactive Components.mp4
06- Animated Buttons.mp4
07- Animated Switches.mp4
08- Animated Slider.mp4
09- Animated Card.mov
10- Animated Text.mp4
11- Interactive Dropdown Menu Final.mp4
12- Animated Notification.mp4
13- iPhone's Dynamic Island.mp4
14- 3D Animation in Figma.mp4
15- Loading Animation.mp4
16- Animated Mesh Gradient.mp4
17- Scroll Animation.mp4
18- Animated Tab Bar.mp4
19- Animated Image Carousel.mp4
20- Animated Floating Action Button.mp4
21- Accordion Effect.mp4
Module 09 - Conclusion
1- What's next.mp4
2- Review the course
28 Lessons
01- Intro to the project.mp4
02- What's Project Brief.mp4
03- What's a Design System.mp4
04- Create a Design System part 1.mp4
05- Create a Design System part 2.mp4
06- Create a Design System part 3.mp4
07- Create a Design System part 4.mp4
08- Create a Design System part 5.mp4
09- Create a moodboard.mp4
10- Create a Wireframe (Part 1).mp4
11- Create a Wireframe (Part 2).mp4
12- What's Box Model.mp4
13- Navbar.mp4
14- Hero Section.mp4
15- Social Proof Section.mp4
16- Features Section.mp4
17- CTA Section.mp4
18- Expanded Features Section.mp4
19- Integrations.mp4
20- Testimonials Section.mp4
21- FAQ Section.mp4
22- Footer Section.mp4
23- Responsiveness (Mobile).mp4
23- Responsiveness (Tablet).mp4
25- Responsiveness (Large).mp4
26- Componentization.mp4
27- Breakpoints Prototype.mp4
28- Project Handoff.mp4