Teach on Udemy

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

Learn More

Your cart is empty.

Keep shopping

Learn Figma: UI/UX Design Masterclass From Beginner to Pro

Name: Learn Figma: UI/UX Design Masterclass From Beginner to Pro
Rating: 3.9 (1018 reviews)

Mobile App UI/UX Design in Figma: From Concept to Prototype

Created byJames Joab Soren, Hudson Dynamic Lab

Last updated 3/2025

English

English [Auto],

What you'll learn

Interface & Workspace
Tools & Utilities
Understanding Layers & Pages
Adding & Designing Text
Creating Wireframes
Button
Smart Selection % Tidy
Input Fields
Prototyping & Animation
Smart Animations & Micro Interaction
Collaborating in Figma
Organizing and optimising work using Grids
Colour theory & Colour Tools
Using colour Gradients & Layouts
Making a Placeholder Image
Masking and cropping

Course content

1 section • 21 lectures • 4h 25m total length

Introduction2:21
Learn to navigate the Figma interface and workspace, master layers, text, wireframes, buttons, prototyping and animation, color theory and gradients, masking and cropping, and collaborate to create basic UI/UX designs.
1. Interface & Workspace8:28
Learn the Figma interface and workspace, navigate account settings, themes, teams, drafts, and favorites, and explore the community, resources, plans, and version history for collaborative design.
2. Tools & Utilities22:05
Discover Figma tools and utilities for design and prototype work. Master selection, move, scale, frame, section, and slice, plus export options.
3. Understanding Layers & Pages5:56
Discover how layers and pages in Figma organize frames, names, and object order, and learn practical tips for stacking elements and navigating between pages.
4. Adding & Designing Text_Match Source - Adaptive High Bitrate14:35
Learn to add and design text in Figma for ui/ux, including framing, margins, fonts, and typographic styling. Use masking, grids, auto-layout, constraints, and drop shadows to design typography.
5. Creating Wireframes_Match Source - Adaptive High Bitrate28:54
Learn to create wireframes in Figma, using frames, images, shapes, and text to outline mobile UI layouts. Organize with grouping, naming, alignment, and basic wireframe components to plan UI screens.
6. Button_Match Source - Adaptive High Bitrate4:06
Design an interactive button in Figma by creating a frame, converting it to a component with hover variants, and prototyping a hover animation with color and rounded corners.
7. Smart Selection & Tidy_Match Source - Adaptive High Bitrate4:07
Master smart selection in Figma to tidy up frames, realign and distribute vertical and horizontal spacing, and maintain an organized, evenly spaced design.
8. Input Fields_Match Source - Adaptive High Bitrate13:01
Create interactive input fields in Figma for UI/UX design by building a labeled text input with auto layout, states (default, filling, filled, error), and prototype interactions including cursor animation.
9. Prototyping & Animation_Match Source - Adaptive High Bitrate11:45
Master prototyping and animation in Figma by building components with auto layout and variables, and creating hover and after delay transitions using smart animate, with live previews for presentation.
10. Smart Animation & Micro Interaction_Match Source - Adaptive High Bitrate21:12
Create smart animations and microinteractions in Figma using auto layout, gradient fills, and prototype transitions with smart animate options, including on/off states across frames.
11. Collaborating in Figma_Match Source - Adaptive High Bitrate6:10
Collaborate in Figma in real time by sharing projects with teammates, assigning view or edit access, using comments and mentions for feedback, and tracking changes via notifications.
12. Organizing and optimizing work using Grids_Match Source - Adaptive High Bitr18:41
Master organizing and optimizing your Figma UI/UX workflow using layout grids to align and snap elements. Learn wireframe creation with grids, grouping, and the pen tool for neat designs.
13. Color theory & Color Tools_Match Source - Adaptive High Bitrate17:09
Learn color theory and color tools in figma to craft effective UI/UX designs. Explore rgb and cmyk, the color wheel, schemes, and color styles to make visuals pop.
14. Color Gradients & Layouts_Match Source - Adaptive High Bitrate18:45
Master color gradients and layouts in Figma by building and applying linear, radial, angular, and diamond gradients, creating color styles, grids, and wireframe layouts for design systems.
15. Making a Placeholder image_Match Source - Adaptive High Bitrate2:58
Learn to create a placeholder image in Figma by importing and placing an image, then adjust fills, exposure, contrast, saturation, crop, resize, and rotate as needed.
16. Masking & cropping_Match Source - Adaptive High Bitrate7:28
Master masking and cropping in Figma by using gradient fills, text, and images, applying masks to reveal typography, and cropping images for clean, dynamic UI visuals.
Class Project 111:33
Create and export color palettes in Figma by designing rectangles, applying color theory (complementary, analogous, triadic) with a color wheel, and exporting as jpeg for a class project.
Class Project 2 [part 1]19:32
Design a login screen inspired by Instagram with animations, wireframes, grids, icons, and an interactive prototype that supports light and dark themes via a toggle button across four pages.
Class Project 2 [part 2]23:18
Master Figma prototyping by building multi-frame prototypes with on tap and smart animate transitions, delays, and realignments. Create login, signup, terms, and dark mode variants with assets and buttons.
Effectively Use of UIUX3:31
Discover how to effectively use ui/ux in Figma to craft intuitive interfaces and advance from beginner to pro in this ui/ux design masterclass.

Requirements

Basic computer skill

Description

Welcome to our class of figma uiux beginner tutorial for learning how to use figma for uiux so if you are planning to learn how to use figma from the beginning then you are in the right place because we will cover in this. This class covers the basics so if you have any prior experience than it might be helpful for you to understand this class properly, if not then don’t worry as we will be teaching you all that you need to know as we go.

Let’s take a look at what you will be learning from this course;

1. Interface & Workspace

2. Tools & Utilities

3. Understanding Layers & Pages

4. Adding & Designing Text

5. Creating Wireframes

6. Button

7. Smart Selection % Tidy

8. Input Fields

9. Prototyping & Animation

10. Smart Animations & Micro Interaction

11. Collaborating in Figma

12. Organizing and optimising work using Grids

13. Colour theory & Colour Tools

14. Using colour Gradients & Layouts

15. Making a Placeholder Image

16. Masking and cropping

After Completing this Class, you will be able to

· Use Figma to make basic UIUX Designs

· Use the interface to utilize and enhance productivity

· Colour Grade

· Export in more advance and customized settings

· Optimise Workflow

· Do Project Examples

Now do keep this in mind that is a project-based Course, so at the end of all the classes you will have a class project that will enable you to actively participate in them to practice or refine what you have learned throughout the entire course. You will be provided with supporting resources so it will become easier to learn as we go.

During Learning if you have any queries or problem then do feel free to ask me. I will always be available to help if needed. So let us go ahead and start.

Who this course is for:

Individuals with an interest in UI/UX design who want to learn the essential features and functionalities of Figma from scratch.
Newcomers in the design field who want to build a strong foundation in UI/UX design principles.