UI Design & Figma Mastery

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