UI/UX Design

Who is This Course For?

This course is designed for beginners who are new to design and User Experience (UX) design. Even if you’re unfamiliar with what UX truly entails, don’t worry—we’ll start from the basics and progress step by step. By the end of this course, you’ll have a solid foundation in UI/UX design and the ability to create interactive prototypes using Figma.

Course Modules:

Module 1: Figma Basics

Learn the fundamentals of Figma, including creating design files, working with frames, and understanding the difference between low-fidelity and high-fidelity wireframes. You'll explore basic design elements like typography, shapes, colors, and object editing, setting a strong foundation for your design projects.

Module 2: Tools & Techniques

Master essential tools and techniques in Figma, including the differences between scale and selection tools, using frames versus groups, and sourcing free icons. You'll also learn how to match icon strokes and leverage Figma plugins to enhance your design workflow.

Module 3: Prototyping & Animation

This module introduces you to prototyping and animation in Figma. You'll learn how to create interactive prototypes, work with animation easing, test designs on your phone with Figma Mirror, and implement smart animations, popups, and slide-in menus for mobile navigation.

Module 4: Components & Variants

Discover the power of components and variants in Figma, learning how to create and manage reusable design elements. You'll explore various ways to create component variants, including multi-dimensional variants, and apply these techniques to build forms and other UI elements.

Module 5: Layouts & Responsive Design

Dive into Figma’s Auto Layout and constraints features to design responsive layouts. You'll learn how to use nested frames, auto layout for spacing, and text box auto height, ensuring your designs adapt seamlessly across different screen sizes.

Module 6: Visual Effects & Styles

Explore visual effects and styles in Figma, including drop shadows, blurs, and gradient creation. You'll also learn how to build and apply color palettes, create UI buttons, and use color styles to maintain visual consistency across your designs.

Module 7: Advanced Interactions & Handoff

Enhance your designs with micro-interactions using interactive components. You'll learn to create interactive toggles and menus, collaborate effectively with stakeholders, share your Figma files, and prepare your designs for developer handoff with detailed guidance.

Module 8: Working with Grids, Columns, & Images

This module focuses on using grids, columns, and images in Figma. You'll gain tips and tricks for drawing, working with images, and applying masking and cropping techniques to create polished and professional designs.

Module 9: Real-World Projects

Apply your Figma skills to real-world projects, designing a website and a mobile app based on client briefs. You'll build interactive prototypes, prepare a professional portfolio, and present your final designs, receiving feedback to refine your work and boost your confidence.