Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Master Web & Mobile Design: Figma, UI/UX Essentials, +More

Name: Master Web & Mobile Design: Figma, UI/UX Essentials, +More
Rating: 4.3 (690 reviews)

Unlock UI/UX Design Mastery: Figma for Web & Mobile Interfaces. Land Your Dream Job Now!

Created byChetan Pujari

Last updated 5/2025

English

English [Auto],

What you'll learn

Master the fundamentals of UX Design using Figma.
Create interactive prototypes effortlessly with Figma.
Develop comprehensive UX projects from scratch.
Seamlessly integrate UX personas into your design process.
Enhance your CV by adding UX Design skills.
Gain insights into client expectations for UX Designers.
Craft effective wireframes for web and mobile applications.
Perfectly balance colors and images in your designs.
Navigate font selection for web and mobile apps with confidence.
Design custom icons, buttons, and UI components effortlessly.
Explore advanced Figma concepts like Components and Constraints.
Utilize free UI kits and plugins to boost productivity.
Construct concise style guides for client handoff.
Implement captivating micro-interactions and animations.
Master website and mobile app design principles.
Fine-tune typography and color schemes.
Ensure seamless mobile responsiveness through testing.
Generate production-ready assets with ease.
Create compelling UX briefs and personas.
Discover time-saving workflow tricks and shortcuts.
Access dedicated forum support from industry experts.
Learn the best practices employed by UX professionals.
Unlock career opportunities as a sought-after Designer or versatile freelancer, catering to clients worldwide.
Access over 100 assets and premium design templates, yours to customize for endless project possibilities.
Walk away with a polished design portfolio curated and provided to you upon course completion.
Design with versatility across various devices, utilizing Figma alongside industry-standard tools.
Acquire invaluable design insights and best practices condensed into a comprehensive course.
Create professional logos and execute branding strategies with confidence.
Navigate UI/UX terrain with ease, incorporating the latest industry trends into your designs.

Course content

29 sections • 113 lectures • 9h 45m total length

Introduction : Master Web & Mobile Design: Figma, UI/UX Essentials, +More3:02
Master web and mobile design using Figma and ui/ux essentials, progressing from brief understanding to wireframes, components, and interactive prototypes for real projects.
From Zero to Figma Hero : Your Step-by-Step Guide2:44
Begin with hands-on learning by downloading resource files and setting up Figma, desktop or browser. Explore free versus paid features, updates, and tips from the community.
Figma to Code Design Stunning Interfaces Without Writing a Line1:35
Explore how Figma enables quick drafts for websites and apps, supports fast feedback loops with users, and guides the handoff from design to development.
UI vs. UX in Figma Design Magic Explained2:36
Learn the difference between UI and UX, and use Figma to craft visually appealing interfaces while optimizing the user journey for a smooth, user-friendly product experience.
Build Apps & Websites You'll Love (In This Figma Course)2:04
Master Figma fundamentals to advanced UI/UX concepts, creating low-to-high fidelity wireframes, prototypes, and micro interactions while applying color psychology to real-world projects with goals and a targeted audience.
Learn UX Briefs & Task Flows in Figma3:47
Learn to use the UX brief as a project map detailing goals, scope, budget, and audience, and to map task flows as step-by-step guides focused on decisions and interactions.

Lo-Fi vs Hi-Fi Wireframes Design Showdown2:54
Explore lo-fi and hi-fi wireframes in Figma, learning to sketch basic layouts with boxes and lines and later refine into high-fidelity prototypes for presentation and user testing.
Frames & Design file in Figma Design(Interface)7:21
Learn how to create a new design file in Figma, set up frames for iPhone views, and name versions to keep projects organized.

Figma Text Tool and Fonts7:30
Add and format text in Figma using the T shortcut or top bar, adjusting font, typeface, weight, size, and alignment for readable typography.
Figma Basics How To CREATE And MODIFY SHAPES8:01
Master Figma basics by creating and editing shapes—rectangles, ellipses, polygons—with rounded corners, then duplicate and align to build a home page wireframe with a banner, search bar, and hamburger menu.
How to Choose and use Colors in figma4:39
Learn to add color in figma by adjusting fill for light, dark, and contrast with transparency. Use hex and rgb codes, eyedropper, color styles, and gradient vs solid colors.
Strokes & updating default properties in figma8:51
Master strokes in Figma with rounded corners, color, and inside, outside, or center placement, then set default properties and use burger menu lines to speed up design workflows.
What is Object Editing Mode & How to Use It! In Figma2:39
Learn to enter and exit object editing mode in Figma, edit shapes and rounded corners, and manage fills with the paint bucket tool via the square dotted button.
How to Use The Scale Tool And Selection in Figma2:17
Master the scale tool in Figma to proportionally resize objects, including strokes and text, instead of relying on grouping, using the selection tool. Use shortcuts p, k, and v.
Figma groups and frames for better UI designs6:41
Master Figma groups and frames to organize elements, enable clip content and constraint, and reuse nested frames and elements across desktop pages for ui designs.
Project 1: From Sketch to Reality: Wireframing Your Design in Figma2:05
Design a six-page wireframe in Figma, from intro to home, category, my account, and my orders, with optional tracking or product details, using simple shapes and fonts.
Best Free Icon Set Packs for UIUX Designers5:52
Explore free icon packs for UI/UX design in Figma, learn where to download from Figma Community and icon finders, and compare SVG versus PNG for scalable, license-aware use.
Project 1: From Sketch to Reality: Wireframing Your Design in Figma
Icon Basics In Figma5:26
Learn to import icons into a Figma wireframe, place them in a uniform navigation bar, and align, resize, and color them for cohesive UI across screens.
How To Install And Use Plugins in Figma2:52
Discover how to install and use plugins in Figma from community. Explore tools like icon eight, bookmark plugins, and add profile pictures or icons to use in your designs.
Project 2: Mastering the Toolbox: Icons & Plugins for Powerful Figma Designs2:03
Explore icons and plugins in Figma, apply them to your project, and submit a polished design that showcases flexible iconography and plugin-driven enhancements.
Project 2: Mastering the Toolbox: Icons & Plugins for Powerful Figma Designs

Figma Prototyping for beginners6:20
Master Figma prototyping by creating interactive flows that navigate between frames, test on device presets like iPhone 15 Pro Max, and preview, present, and share your prototype with clients.
Figma Prototyping & Transitions (Easing)8:37
Learn Figma prototyping by wiring wireframes, deleting prototype wires, and linking pages with basic transitions, dissolve, and easing at 300 ms.
Figma Testing Prototype with Figma Mirror4:37
Test a Figma prototype on a phone with the Figma Mirror app, observe real-time design changes and share prototypes via email or link for client feedback.
Project 3: Mobile Design Magic: Showcase Your App in Figma1:54
Design and test a mobile UI in Figma, adjust icon size, color, and font, capture wireframe, and submit it for project three; then learn basics of animation in next video.
Project 3: Mobile Design Magic: Showcase Your App in Figma

Figma Smart Animate for Beginners6:31
Master the basics of Figma animation with smart animate, learning how delays and prototype setup create dynamic effects, compare to keyframing, and manage clip content for on-frame elements.
Project 4: Breathe Life into Your Design: Creating Smart Animations in Figma1:04
Design and animate project 4 smart animations in Figma by creating pages, applying shapes, icons, or cards, using pngs, then screenshot or record as gif and submit.
Project 4: Breathe Life into Your Design: Creating Smart Animations in Figma

Sharing & Feedback in real-time with Figma5:18
Explore how Figma teams enable real-time collaboration with shared workspaces and version control. Compare drafts and teams, noting free limits and added project management and centralized design systems.
Figma Collaborate in real-time with multiplayer4:41
Share and review designs in Figma with real-time collaboration, using view-only links, client comments, and on-the-fly feedback to streamline design reviews.

What Are Mood Boards & The SECRET To Finding Inspiration For Web & App Design5:42
Master mood boards to clarify vision, spark inspiration, and streamline decisions for web and app design, sourcing visuals from one page love, Envato Elements, Dribbble, and Adobe Stock for Figma.
How To Create A Mood Board In Figma2:20
Learn to create organized and dirty mood boards in Figma using templates, image frames, and community resources to communicate design direction clearly to clients.
Project 5: Inspiration Station: Building a Moodboard in Figma0:52
Build a mood board for your UI in Figma, capturing the overall aesthetic, style, and emotion for your brand, then organize, showcase, and submit your mood boards.
Project 5: Inspiration Station: Building a Moodboard in Figma

How to Choose Colors (Color Inspiration)6:53
Discover how to find and extract color inspiration in Figma using eyedropper tools and palettes from Canva colors and Color Hunt, then craft accessible hex palettes.
How I Make UI Color Palettes In Figma6:01
Create a color palette in Figma as the foundation for high fidelity mockups, defining primary, secondary, and neutral colors with tints and shades, and build a color system with styles.
How To Create Gradients in Figma3:31
Learn to create dynamic gradients in Figma using linear, radial, angular, and diamond options, adjusting primary and secondary colors and transparency for vivid designs.
Creating a Color System in Figma5:49
Learn to build a reusable color system in Figma by creating and naming color styles for primary, secondary, neutral, accent, and gray shades, and apply gradients for consistent, team-ready designs.
Easiest way to generate color palette in Figma (Using Plugins)5:35
Discover two Figma plugins: Foundation Color Generator and Material Theme Builder, that generate cohesive color palettes in seconds. Also apply color theory basics like harmony to guide palette choices.
Project 6: Colors, Styles, and Grids in Action!1:17
Choose a harmonizing color palette with three or four colors, craft color styles, and design a mobile layout with grids to create balanced and expressive interfaces.
Project 6: Colors, Styles, and Grids in Action!

Requirements

No prior experience needed. We guide you from square one to mastery, making it accessible for everyone.
Prepare to embark on a journey from novice to expert, with comprehensive instruction every step of the way.
Open your heart to the world of design and unlock the ability to transform your ideas into stunning creations indefinitely.
Dive into the realm of design with an open mind and eagerness to learn—no prerequisites necessary.
Embrace the opportunity to develop a lifelong passion for creating beautiful projects, starting from ground zero.
Access to Figma is necessary; a free plan is available on the Figma website.
This course welcomes beginners; no prior UX Design/UI Design experience is required.
No previous knowledge of Figma is necessary to enroll.
Dive in without any prior design skills or experience; this course is designed for beginners.

Description

Welcome to Figma Essentials with Chetan Pujari!

Embark on a journey to master UX Design using Figma, the ultimate UI/UX design tool. Whether you're new to design or eager to delve deeper into User Experience, this course is your gateway to success.

Starting from the basics, we'll guide you through crafting compelling User Interfaces and dynamic prototypes, while addressing client expectations head-on.

Here's what's in store:

Dive into the fundamentals: Understand the brief and work with UX personas.
Design with precision: Create sleek wireframes and master color and image implementation.
Perfect your typography: Learn the art of font selection for web and mobile apps.
Craft custom components: Design icons, buttons, and other UI elements tailored to your project.
Decipher advanced concepts: Explore components, constraints, and multi-dimensional variants with ease.
Boost productivity: Utilize free UI kits and plugins to streamline your workflow.
Create consistency: Develop a style guide for seamless client handoff.
Elevate your designs: Master micro-interactions, page transitions, and animations.
Bring your prototypes to life: Build fully interactive prototypes from start to finish.
Collaborate effectively: Work with team members and prepare files for developers.

Throughout the course, we'll focus on Figma while providing insights into real-world UX projects and industry practices. Plus, assignments will hone your skills and empower you to create a standout portfolio.

Ready to transform from Figma Zero to Figma Hero? Let's upgrade your UX Design journey today.

The course provides over 100 assets and premium design templates, ensuring you have everything you need for your future projects. Rest assured, this is the ultimate online hub for honing your Design skills!

Get ready for a hands-on journey from beginner to professional Designer, where we guide you through crafting polished designs and transforming them into fully functional websites or apps.

Here's what you'll learn in the course...

Section 1 GETTING STARTED

- Frames & Design file in Figma Design(Interface)
- UI vs. UX in Figma Design Magic Explained
- Build Apps & Websites You'll Love (In This Figma Course)
- Figma to Code Design Stunning Interfaces Without Writing a Line
- Learn UX Briefs & Task Flows in Figma
Section 2: Wireframing: Fundamentals and Best Practices
- Lo-Fi vs Hi-Fi Wireframes Design Showdown
Section 3: Mastering Typography, Color, and Icons
- 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
- Best Free Icon Set Packs for UIUX Designers
- Icon Basics In Figma
- How To Install And Use Plugins in Figma
  Section 4: Creating Pages in Figma
- How To Create And Use Pages In Your Figma File
Section 5: Introduction to Prototyping in Figma: A Beginner's Guide
- Figma Prototyping for Beginners
- Figma Prototyping & Transitions (Easing)
- Figma Testing Prototype with Figma Mirror
Section 6: Figma Animation Basics
- Figma Smart Animate for Beginners
Section 7: Collaborate with Others: Sharing, Commenting, and Editing in Figma

Section 8: The Ultimate Guide to Creating Moodboards in Figma
- What Are Mood Boards & The SECRET To Finding Inspiration For Web & App Design
- How To Create A Mood Board In Figma
Section 9: Mastering Columns & Grids in Figma
- Create a Responsive Grid System for Web & UI Design
Figma: Essential Tips and Tricks

Section 10: The Ultimate Guide to Using Colors in Figma
- 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
- The easiest way to generate a color palette in Figma (Using Plugins)
Section 11: Mastering Text and Fonts in Figma
- Best Practices for Choosing Fonts and Font Pairing in UI and Web Design
- Create the Perfect Typography Scale for UI & Web Projects
- The 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
Section 12: Figma's Drawing Tools
- Figma Pen Tool Basics & Vector Networks
- Why are the Apple icons different (corner smoothing)
Section 13: Figma Essentials: Working with Boolean Operations
- Figma Boolean Operations (Union, Subtract, Intersect, Exclude)
- Figma's Power Duo When to Use Union and When to Flatten
- How to Use Smart Selection and Tidy Up in Figma
Section 14: Figma Essentials: Working with Images and Assets
- Placing images in Figma
- Figma Masks (Mask Image and Text in Figma)
- Figma images Plugins for UIUX Designers
Section 15: Figma Essentials: Mastering Auto Layout and Constraints
- 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
Section 16: Figma Essentials: Working with Effects
- How to Make Beautiful Shadows - UI Design with Figma
- How to Create Background Blur and Layer Blur in Figma
Section 17: Figma Essentials: Understanding Saving and Version History
- How To Save Your Figma Files To Desktop and How To Access Figma File's History
Section 18: Figma Essentials: Understanding Components and Creating Instances
- Figma Components - The Basics
- Update, Change, Edit, And Reset Components In Figma
- Deleting the 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
Section 19: Figma Essentials: Exploring the Power of Variants
- Figma components and variants for beginners
- Figma Component properties
Section 20: Figma Essentials: Mastering Input Form Design and Functionality
- How to Design an Interactive Input Field in Figma
- How to design a Notification UI design in Figma
Section 21: Advanced Prototyping Techniques 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
- ticky Scroll In Figma
- How to Create Auto Scrolling Animation in Figma
Section 22: Figma Essentials: Working with Teams and Project Management
- The difference between Teams, Projects and Pages
Section 23: Figma Essentials: Understanding and Using Libraries
- Figma Create a shareable team library
Section 24: Animation and Micro Interactions in Figma
- Animation VS Micro Interaction In Figma
- Amazing Button Animations in Figma
- Micro animations using interactive components in Figma
- Figma Prototype easing & spring animations
- Pulsing animation in Figma
Section 25: Figma Thumbnails
- How do I set a project thumbnail or cover in Figma?
Section 26: Master Figma Export: A Step-by-Step Guide
- How to Export Your Figma Design as an Image (PNG, JPG, SVG, PDF)
- How to Hand-off your UX designs like a PRO
- Introduction to design systems resources and inspirations
Section 27: Let's Build Real-World UIUX Project
- Intro - Real-world projects With Figma
- Real World UIUX Project 2 StayWave
- Real World UIUX Project 3 Food Delivery App
- Real World UIUX Project 4 Music App
- Real World UIUX Project 5 DIY

We'll equip you with the skills to command premium rates for your expertise, transcending the race for low-paying gigs on generic freelancing platforms. Our aim is to empower you with the capabilities of a seasoned designer while guiding you through the creation of a tangible product for your portfolio. This course isn't merely about passive learning; it's about empowering you to transition from a novice to a sought-after designer capable of securing lucrative opportunities. Unlike fleeting technical skills, design prowess remains timeless. While trends may shift, the foundational principles you'll master here will remain relevant for years to come.

Who this course is for:

UX Design Beginners: Brand new to UX design? This course equips you with the essential Figma skills and UX principles to get started.
Career Changers: Looking to switch gears? Learn in-demand UX design skills with Figma to launch a new and exciting career.
Design Enthusiasts: Want to level up your design skills? Master Figma and core UI/UX design concepts to build a strong foundation.
Portfolio Builders: Need to impress potential employers? Enhance your portfolio by adding "UX Design with Figma" to your skillset.
Freelancers & Entrepreneurs: Take control of your career! Learn valuable UX design skills to offer freelance services or design user-centered products.
Ideal for Web Developers and Mobile Developers seeking to expand their skill set with valuable design expertise.
Suited for individuals aiming to land roles as Web Designers, Mobile Designers, or UI/UX Designers in the industry.

Master Web & Mobile Design: Figma, UI/UX Essentials, +More

What you'll learn

Explore related topics

Course content

Introduction6 lectures • 16min

Wireframing: Fundamentals and Best Practices2 lectures • 10min

Mastering Typography, Color, and Icons12 lectures • 59min

Creating Pages in Figma1 lecture • 6min

Introduction to Prototyping in Figma: A Beginner's Guide4 lectures • 21min

Figma Animation Basics2 lectures • 8min

Collaborate with Others: Sharing, Commenting, and Editing in Figma2 lectures • 10min

The Ultimate Guide to Creating Moodboards in Figma3 lectures • 9min

Mastering Columns & Grids in Figma1 lecture • 5min

The Ultimate Guide to Using Colors in Figma6 lectures • 29min

Requirements

Description

Who this course is for: