Master Web & Mobile Design - Figma, UI/UX Essentials, and More
This course covers Figma from basics to advanced skills. You’ll start with design fundamentals like wireframing, typography, and color theory, then move on to responsive layouts, animations, and interactive prototypes. You’ll master key Figma tools such as Auto Layout, Smart Animate, Boolean operations, and constraints, while also exploring user psychology to create intuitive designs. Through real-world projects for web and mobile, you’ll gain hands-on experience and finish the course ready to design functional, user-centered interfaces for a professional UI/UX career.
| Responsible | Ahmed Abd Elfattah |
|---|---|
| Last Update | 27/09/2025 |
| Members | 1 |
Basic
-
-
Introduction: Master Web & Mobile Design: Figma, UI/UX Essentials, +More
-
From Zero to Figma Hero: Your Step-by-Step Guide
-
Figma to Code Design Stunning Interfaces Without Writing a Line
-
UI vs. UX in Figma Design Magic Explained
-
Build Apps & Websites You'll Love (In This Figma Course)
-
Learn UX Briefs & Task Flows in Figma
-
Lo-Fi vs Hi-Fi Wireframes Design Showdown
-
Frames & Design File in Figma Design (Interface)
-
Figma Text Tool and Fonts
-
Figma Basics How To CREATE And MODIFY SHAPES
-
How to Choose and use Colors in Figma
-
Strokes & Updating Default Properties in Figma
-
What is Object Editing Mode & How to Use It! In Figma
-
How to Use The Scale Tool And Selection in Figma
-
Figma Groups and Frames for Better UI Designs
-
Project 1: From Sketch to Reality: Wireframing Your Design in Figma
-
Best Free Icon Set Packs for UI/UX Designers
-
Icon Basics In Figma
-
How To Install And Use Plugins in Figma
-
Project 2: Mastering the Toolbox: Icons & Plugins for Powerful Figma Designs
-
How To Create And Use Pages In Your Figma File
-
Figma Prototyping for Beginners
-
Figma Prototyping & Transitions (Easing)
-
Figma Testing Prototype with Figma Mirror
-
Project 3: Mobile Design Magic: Showcase Your App in Figma
-
Figma Smart Animate for Beginners
-
Project 4: Breathe Life into Your Design: Creating Smart Animations in Figma
-
Sharing & Feedback in Real-Time with Figma
-
Figma Collaborate in Real-Time with Multiplayer
-
What Are Mood Boards & The SECRET To Finding Inspiration For Web & App Design
-
How To Create A Mood Board In Figma
-
Project 5: Inspiration Station: Building a Moodboard in Figma
-
Create a Responsive Grid System for Web & UI Design
-
How to Choose Colors (Color Inspiration)
-
How I Make UI Color Palettes In Figma
-
How To Create Gradients in Figma
-
Creating a Color System in Figma
-
Easiest Way to Generate Color Palette in Figma (Using Plugins)
-
Project 6: Colors, Styles, and Grids in Action!
-
Best Practices for Choosing Fonts and Font Pairing in UI and Web Design
-
Create the Perfect Typography Scale for UI & Web Projects
-
Fastest Way to Create Text Styles in Figma
-
How to Add Lorem Ipsum Text in Figma
-
Useful Text Tips & Tricks in Figma
-
How to Add Fonts in Figma and How To Add Missing Fonts in Figma
-
Project 7: Textpertise: Mastering Text Styles in Figma
-
Figma Pen Tool Basics & Vector Networks
-
Why Are the Apple Icons Different (Corner Smoothing)
-
Figma Boolean Operations (Union, Subtract, Intersect, Exclude)
-
Figma's Power Duo: When to Use Union and When to Flatten
-
Project 08: Homepage & Burger Menu Design in Figma
-
How to Use Smart Selection and Tidy Up in Figma
-
Placing Images in Figma
-
Figma Masks (Mask Image and Text in Figma)
-
Figma Images Plugins for UI/UX Designers
-
Project 9: Image Alchemy: Mastering Images & Plugins in Figma
-
Auto Layout And Constraints in Figma
-
Figma Auto Layout Space Between Objects
-
Figma Constraints & Resizing Made SIMPLE
-
Nest Frames, Auto Layout And Constraints in Figma
-
Advanced Auto Layout Techniques - Figma
-
Project 10: Design That Adapts: Creating Responsive Layouts in Figma
-
How to Make Beautiful Shadows - UI Design with Figma
-
How to Create Background Blur and Layer Blur in Figma
-
Project 11: Let's Add Shadows, Blurs, and Squishy Buttons!
-
How To Save Your Figma Files To Desktop and How To Access Figma File's History
-
Figma Components - The Basics
-
Update, Change, Edit, and Reset Components In Figma
-
Deleting Main Components in Figma is Impossible (Tips & Tricks of Components)
-
Moving Main Components and How to Organize Your Components
-
Figma Best Practices: Name Layers & Stay Organized
-
Project 12: Building Blocks: Mastering Components in Figma
-
Figma Components and Variants for Beginners
-
Figma Component Properties
-
Project 13: Variant Power: Supercharge Your Design with Variants
-
How to Design an Interactive Input Field in Figma
-
Project 14: Account & Category Mastery: Designing for User Flow in Figma
-
How to Design a Notification UI Design in Figma
-
How to Add Popup Overlays in Figma
-
How to Create a TOOLTIP (Hover to Show Text) Component in Figma
-
How to Create Multiple Prototypes & Create Separate Flows on One Figma Page
-
Prototyping Overlay Transitions in Figma
-
Project 15: Pop Up & Flow Like a Pro: Prototyping Interactions in Figma
-
Sticky Scroll in Figma
-
How to Create Auto Scrolling Animation in Figma
-
The Difference Between Teams, Projects and Pages
-
Figma Create a Shareable Team Library
-
Animation vs Micro Interaction in Figma
-
Amazing Button Animations in Figma
-
Project 16: Add To Cart Button Animation
-
Project 17: Dark Mode and Light Mode
-
Project 18: Pocket-Sized Perfection: Design an iPhone Product Page & Cart
-
Micro Animations Using Interactive Components in Figma
-
Figma Prototype Easing & Spring Animations
-
Pulsing Animation in Figma
-
Project 19: The Final Click: Finishing Your Clickkart App Design in Figma
-
How Do I Set a Project Thumbnail or Cover in Figma
-
How to Export Your Figma Design as Image (PNG, JPG, SVG, PDF)
-
How to Hand Off Your UX Designs Like a Pro
-
Introduction to Design Systems, Resources, and Inspirations
-
10 Psychological Principles for Powerful UX Design
-
Leveraging Psychology for Personalized User Experiences: A Case Study
-
Color Psychology in UI/UX Design
-
The Happiness Paradox: Understanding Hedonic Adaptation in UI/UX Design
-
The Dopamine Effect in UI/UX Design
-
The Power of Sound: How Audio Shapes User Experience (UX) Psychology
-
Intro - Real World Projects With Figma
-
Real World UI/UX Project 2: StayWave
-
Real World UI/UX Project 3: Food Delivery App
-
Real World UI/UX Project 4: Music App
-
Real World UI/UX Project 5: DIY
-
Figma for UI/UX Design: You've Graduated! (What's Next)
-