Figma for User Interface and User Experience UIUX Design

Name: Figma for User Interface and User Experience UIUX Design
Rating: 4.3 (835 reviews)

Learn UI UX Design with Figma for Prototyping, Web Interface Design, Mobile App Interface Design

Created bySayman Creative Institute

Last updated 4/2026

English

What you'll learn

Workspace and Interface
Basic tools in Figma
How you can do Prototyping
Easing options and Prototype animation
Smart animation
Colour inspiration, colour palette and eyedropper tool
Masking, Cropping and Image plugins
Component and Effects
Project of Web and App Interface Design

Course content

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

Introduction7:59
Introduction to Figma17:35
Resource File
Download Resource File
Workspace and Interface17:47
Basic tools in Figma21:02
How you can use pages in Figma13:42
How you can do Prototyping in Figma7:46
Easing options and Prototype animation16:34
Easing options and Prototype animation- Part-1 New Update1:11
Smart animation11:03
Usefulness of sharing and adding comment13:16
Learn to share Figma files and add comments to collaborate in real time. Control who can view or edit, invite teammates, and guide edits with comments.
Columns and grids18:26
COLOUR INSPIRATION, COLOUR PALETTE AND EYEDROPPER TOOL22:25
Gradients16:50
Colour styles10:40
How to use images in Figma9:30
Learn to import and place images in Figma, use fill options for shapes and frames, and perform basic editing like exposure, contrast, temperature, tint, and rotate.
Masking, Cropping and Image plugins22:50
Explore masking and cropping in Figma, learn multiple crop methods and basic masking with shapes, and use image plugins like Unsplash and Pixels to source free images.
Component and Effects9:38
Component and Effects-Part-1 New Update0:52
Exporting Images6:31
Class Project-15:18
Class Project-25:57
Class Project-36:06
Practice creating a gradient in Figma by using the shape tool to design a graphic, applying linear, radial, angular, or diamond gradients, adding at least five colors, and exporting.
Real Time Project17:49
Project of how to design webpage using shape blocking method17:49
Design a web page using the shape blocking method in Figma, building grids, shapes, strokes, fills, images, and text, then prototype page flow.

Requirements

Basic computer knowledge
Understand English Language

Description

Hello everyone welcome to our class of Figma for learning UI UX so if you are planning to learn User Interface and User Experience from the beginning than you are in right place because we will cover in this class from the basic to advanced. This is a beginner level class so if you have no previous experience then you can join in this class.

Lets take a look what you will learn from this class:

1. Introduction to Figma
2. Workspace and Interface
3. Basic tools in Figma-
4. How you can use pages in Figma
5. How you can do Prototyping in Figma
6. Easing options and Prototype animation
7. Smart animation
8. Usefulness of sharing and adding comment
9. Columns and grids
10. Colour inspiration, colour palette and eyedropper tool
11. Gradients
12. How to use images in Figma
13. Masking, Cropping and Image plugins
14. Component and Effects
15. Exporting Images

After complete this class you will be able to do
-Make your own mobile app and web page
-Make your own colour palettes and gradients
-Able to grab a good knowledge of coloring in web designing
-Do Prototyping
-Use your selected images to make buttons and also make the font of the web page

This is a project based class so during learning you will have class project so what you learned you will be able to participate in class project so you can do practice while you are learning. You will have supporting resource in this class so it will be easier for you to learn.

During learning if you face any issue or if you have any question than feel free to ask me on class discussion section I am always there for you to help you. So lets start learning Figma for UI UX together

Who this course is for:

Beginner who want to learn UIUX design with Figma