Figma Course: UI/UX Design

Level:

All Levels

Lenght:

41 hrs

Lectures:

103

Design & Digital Art

Figma Course: UI/UX Design

This course will be your personal guide for interface design using Figma! Go from the basics to working professionally!

What You'll Learn

The principles of User Interface Design and Prototyping
How to read a User Flow Diagram
How to design within Figma
How to use the collaborative feature
The principles of UX design
What are the most common beginner mistakes and how to avoid them
How to create an app
How to create interactive calendars

The basics of Human-Computer Interaction
How to use Figma and its given tools
Wireframing in order to produce a functional prototype
How to give and receive feedback on prototypes
The importance of color theory
The principles of forms, buttons, and plugins
How to make a website
How to animate in Figma

30 Day Money-Back Guarantee

100% refund, no questions asked.

Lifetime Access

Access your content on any device, at any time.

Teaching Support

Never get stuck with our teaching assistants on call.

About The Course

Have you ever wanted to design your own app, website or blog? These days, we use them without a second thought. They have become an integral part of both the human experience and the financial market. It’s easy to come up with a new idea for a viral new app, but not as easy to make that app a reality – or so you might think. That’s where Figma comes in. Figma is a free, collaborative UI/ UX design tool that can help you design a wide range of interfaces in great detail – and we’re here to teach you how.

In this course, you’re going to learn everything about user interface design with Figma. Step-by-step, we’ll cover everything you need to know from opening the program for the very first time to finalising your finished design. You’ll learn all of the tools, as well as how and when to use them. We’ll also cover everything you’ll need to be able to collaborate with other web developers easily through its collaborative feature. During the course, you will learn about the principles of User Interface Design in order to design with purpose, as well as the principles of Human-Computer Interaction. Finally, we’ll teach you how to adapt to specific project requirements, as well as how to wireframe in order to turn your design into a functional prototype.

Start your UI/UX development journey with us!

Curriculum

1. Introduction

Welcome to the Course + User Interface Overview | 04:22

See preview

User Research and User Needs | 04:35

User Interface Principles | 12:25

2. Drafting

Creating a Figma Account | 08:49

Creating a New Design File | 04:44

Mapping the User Journey Pt. 1 | 10:45

Mapping the User Journey Pt. 2 | 19:39

Creation of Wireframes | 16:24

3. Prototyping

Creating Frames | 14:41

Function of Tools | 15:05

Font Usage | 12:31

Layout Planning | 28:03

Framing, Layering, and Grouping | 21:37

Creating and Editing Shapes | 18:51

Images and Masking | 18:59

Components | 11:05

Constraints and Versioning | 19:43

Prototyping | 18:49

Team Libraries and Setups | 18:20

Previewing and Commenting | 12:56

Exporting Assets | 10:38

4. Demonstrations

App Scenario 1 | 48:14

App Scenario 2 | 41:44

App Scenario 3 | 27:35

Website Scenario 1 | 01:07:02

Website Scenario 2 | 26:21

5. Keep Learning

Color Theory | 39:47

UI Comparisons | 56:59

3D Button and Gradient Graph Tricks | 49:48

Content Creation | 52:44

Professional UI Discussion Pt. 1 | 30:49

Professional UI Discussion Pt. 2 | 41:58

Forms | 43:13

Buttons | 35:39

Plugins | 39:30

Animating “Like” Buttons | 22:35

Animating a Burger Menu | 13:33

Interactive Calendar | 24:30

Netflix Prototype | 33:38

Beginner Mistakes | 33:12

Figma Interface Preview | 41:23

6. Bonus: Learn about UX

Introduction to the Content | 45:09

What is UX and UX Design? | 41:04

Importance of UX Design | 39:43

7 Key Factors of User Experience | 36:16

Mind the Empathy Gap | 32:51

7. Advanced Figma Course - Introduction

Introduction | 00:40

Welcome | 02:40

Course Roadmap | 13:54

Course 1 Overview and Recap | 08:13

8. The Approach

Think – Setup – Design – Iterate | 10:33

Best Practices in Figma | 18:31

9. Mastering Auto Layout

Basics | 14:53

Properties: Functionality Examples Pt. 1 | 14:26

Properties: Functionality Examples Pt. 2 | 17:35

Properties: Functionality Examples Pt. 3 | 15:40

Properties: Functionality Examples Pt. 4 | 11:17

Wrap up Pt. 1 | 27:22

Wrap up Pt. 2 | 30:51

10. Design Systems

Styles: Intelligent Work Pt. 1 | 25:42

Styles: Intelligent Work Pt. 2 | 12:56

Everything as a Component: Making Designs Efficient and Scalable Pt. 1 | 14:30

Everything as a Component: Making Designs Efficient and Scalable Pt. 2 | 08:17

Everything as a Component: Making Designs Efficient and Scalable Pt. 3 | 21:33

Everything as a Component: Making Designs Efficient and Scalable Pt. 4 | 35:15

Advanced Prototyping Pt. 1 | 39:09

Advanced Prototyping Pt. 2 | 07:03

External Libraries | 12:05

Documentation | 08:43

Wrap Up: Design Systems Master | 10:15

11. Wrap Up

Recommended Resources and Summary of Concepts | 10:38

12. Use Cases: Appying Concepts

Responsive Web (Landing page) Pt. 1 | 22:52

Responsive Web (Landing page) Pt. 2 | 27:28

Responsive Web (Landing page) Pt. 3 | 32:38

Responsive Web (Landing page) Pt. 4 | 25:52

Responsive Web (Landing page) Pt. 5 | 29:36

Responsive E-commerce Site (Registration Flow) Pt. 1 | 19:39

Responsive E-commerce Site (Registration Flow) Pt. 2 | 25:12

Responsive E-commerce Site (Registration Flow) Pt. 3 | 23:08

Responsive E-commerce Site (Registration Flow) Pt. 4 | 33:51

Responsive E-commerce Site (Registration Flow) Pt. 5 | 36:45

Crypto Exchange Dashboard (Converting Crypto Assets Flow) Pt. 1 | 31:31

Crypto Exchange Dashboard (Converting Crypto Assets Flow) Pt. 2 | 29:29

Crypto Exchange Dashboard (Converting Crypto Assets Flow) Pt. 3 | 26:24

Crypto Exchange Dashboard (Converting Crypto Assets Flow) Pt. 4 | 28:10

Crypto Exchange Dashboard (Converting Crypto Assets Flow) Pt. 5 | 29:45

Android App – Smart Translate (Translation Flow) Pt. 1 | 24:49

Android App – Smart Translate (Translation Flow) Pt. 2 | 27:29

Android App – Smart Translate (Translation Flow) Pt. 3 | 23:13

Android App – Smart Translate (Translation Flow) Pt. 4 | 19:09

Android App – Smart Translate (Translation Flow) Pt. 5 | 22:12

IOS App – Banking App (Sending Money Flow) Pt. 1 | 33:11

IOS App – Banking App (Sending Money Flow) Pt. 2 | 32:23

IOS App – Banking App (Sending Money Flow) Pt. 3 | 27:52

IOS App – Banking App (Sending Money Flow) Pt. 4 | 28:05

IOS App – Banking App (Sending Money Flow) Pt. 5 | 30:49

IOS App – Car Rental App (Renting a Car Flow) Pt. 1 | 28:13

IOS App – Car Rental App (Renting a Car Flow) Pt. 2 | 27:15

IOS App – Car Rental App (Renting a Car Flow) Pt. 3 | 18:53

IOS App – Car Rental App (Renting a Car Flow) Pt. 4 | 19:31

IOS App – Car Rental App (Renting a Car Flow) Pt. 5 | 26:23

13. Next Steps

Next Steps | 06:09

Last Words | 00:28

Over 320,000 happy students

Students worldwide

1 K+

Countries & Locations

1 +

Positive Reviews

1 K+

Related Courses

Design & Digital Art

Figma Course: UI/UX Design

What You'll Learn

30 Day Money-Back Guarantee

Lifetime Access

Teaching Support

About The Course

Curriculum

See preview

Over 320,000 happy students

Related Courses

Character Design Course

Comic Book Creation Course

Clip Studio Paint Course

Midjourney Course

Quick links

Support