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.

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
    

• 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

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

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

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

Figma Prototyping for Beginners

Figma Prototyping & Transitions (Easing)

Figma Testing Prototype with Figma Mirror

Section 6: Figma Animation Basics

• Figma Smart Animate for Beginners

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

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

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)

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

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)

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

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

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

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

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

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

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

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

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

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

The difference between Teams, Projects and Pages

Section 23: Figma Essentials: Understanding and Using Libraries

• Figma Create a shareable team library

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

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?

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

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
  

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.

Figma is a leading design software, helping teams and individuals create designs faster and more efficiently. Figma is free and you can use it right on your web browser, on Mac, and on Windows.

The course has a practical component that takes you step-by-step through the workflow of a professional app designer. From user flow diagrams to wireframing to mockups and prototypes.

Students completing the course will have the knowledge to create beautiful and lovable apps that leave people with a smile on their faces.

The UI/UX Design With Figma Course is great for people with absolutely no design experience or experienced designers who want to get up to speed quickly with mobile app design and web design. We'll explore key UI and UX concepts that are essential to building good-looking and easy-to-use apps that are loved by users.

The only apps that do well are ones that are well designed both in terms of user interface and user experience. That's why it is so important to learn the design skills that will make your app stand out in a crowd.

Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently getting you from zero to a point where you can get hired or win freelance contracts. We will use in-demand tools like Figma to show you a full workflow from start to finish.