The Complete Figma

Tags: Figma

Learn how to use Figma to design beautiful mobile & web apps that make users feel amazing

Last updated 2022-01-10 | 4.6

- How to use Figma on web & desktop
- Designing full mobile & web mockups (UI Design)
- Creating great experiences with applications of UX Design

What you'll learn

How to use Figma on web & desktop
Designing full mobile & web mockups (UI Design)
Creating great experiences with applications of UX Design
Building interactive prototypes to share with co-workers and clients
Seeing your prototypes live on your own mobile phone
Creating easy-to-tweak designs using re-usable components & styles
How to pick colour schemes and unique typography for your designs
Working with your clients/team right within Figma

* Requirements

* A Computer (Mac or Windows)
* Internet Connection

Description

You will learn how to create beautiful mobile & web user interfaces that you can then turn into live prototypes with the help of Figma.


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 Windows.


[NEW] This course has been updated for 2022 to include all the latest Figma Features for your convenience and to keep the course fully up to date with Figma.


Is this course for you?

You're in the right place if any of these apply to you:

  • You’re interested in user interface & user experience design (UI/UX) but not sure where to start.

  • You’re an entrepreneur with an app idea and want to turn your idea from a sketch to a realistic mockup and prototype.

  • You want to brush up your design skills to get the job that you want at companies like Airbnb, Google, Apple, etc.

  • You’re already designing and want to jump into Figma and take your designs to the next level.

  • You’re interested in earning income as a freelance designer.

  • You simply want to enter a new career path, and graphic design has interested you.


By the end of this course:

You will have learned the many great tools Figma has to offer and you will be able to design engaging mobile and web mockups, that you can turn into live interactive prototypes, for your own projects or for your clients.


What do I need?

This course is for both beginners & experienced designers looking to expand their skills.
All you need is a computer and a web browser.

About your instructor:

This course is taught by entrepreneur & designer Nima Tahami. Nima has more than 10 years of experience designing and developing dozens of mobile apps and web apps for both clients and startups of his own. Nima's current startup, ShiftRide, has been covered in many news outlets, including Forbes, where his app was highlighted for its ease of use.


Nima has created this course to help people become the best designer they can be. Design is part of the foundation of many things from great products & websites to great advertisements and everything in between. Nima has also designed and developed an open-source iPhone development library by the name of FCAlertView, helping 350,000+ app developers use beautiful customizable alert prompts within their applications.


Course Overview:

The course is broken down into 3 main parts: Learning all about Figma, Designing a Full Mobile Mockup, and Designing a Simple Web App Mockup.


Learning All About Figma:

  • Understanding why Figma is great

  • Signing Up for Figma

  • Going over the basics of the software

  • Importing Files from Sketch

  • Creating Frames, Shapes, and exploring with Drawing Tools


Designing a Full Mobile Mockup:

  • Designing the Mobile App UI for a laundry delivery service called Clean Kangaroo

  • Creating reusable design components

  • Using constraints to create responsive designs for any size mobile device

  • Applying easy-to-change styles for colours and typography

  • Turning our mockup into an interactive prototype

  • Testing our prototype on a real device

  • Adding animations, overlays, links, and more to our prototype to make them more usable

  • Sharing & Exporting our designs

  • Working live with a team inside Figma


Designing a Simple Web Mockup:

  • Designing a 3-Page Web App UI for Clean Kangaroo

  • Using Auto-Layout to create smart dynamic designs

  • Filling in our designs with sample data using Plugins


So what are you waiting for?

Let’s get started learning how to design real-world projects using Figma and take our design skills to a whole new level together.

Who this course is for:

  • Beginner-level designers interested in user interface & user experience design (UI/UX)
  • Beginner/Intermediate designers interested in earning income as a freelance designer
  • Any-level designers looking to get into web & mobile app designs (graphical user interface)
  • Entrepreneurs wanting to turn their app ideas from a sketch to a realistic mockup and prototype.
  • Anyone looking to jump into a new exciting career with graphic design.

Course content

11 sections • 82 lectures

The Main Toolbar Preview 02:37

The Properties Panel Preview 02:55

The Layers Panel Preview 01:26

Useful Shortcuts Preview 00:37

Frames Preview 03:26

Grids & Guides Preview 03:26

Creating Shapes Preview 07:16

Pen & Pencil Tools Preview 05:26

Boolean Operations Preview 03:40

Boolean Exercise Solution Preview 01:36

Alignment Tools Preview 02:36

Mockup Requirements Preview 03:07

Mockup Files Preview 00:34

The Wireframe Preview 05:20

Setting Up Our Frames Preview 09:41

Images & Overlays Preview 09:22

Adding Icons Preview 10:37

Choosing a Color Scheme Preview 06:56

Setting Up Color Styles Preview 05:14

Tutorial Page Preview 10:55

Components Preview 15:07

Button Components Preview 05:36

Using Pages to Organize Preview 05:14

Using Variants to Create Component Groups Preview 08:13

Variants Exercise Solution Preview 04:38

Exploring Variants Even More Preview 00:26

Payment Page Preview 08:19

Constraints Preview 06:46

Constraints Exercise Solution Preview 04:44

Plugins Preview 04:52

Completing Our Map Page Preview 06:11

User Experience Design (UX) Preview 06:12

Using Templates Preview 03:03

Using Apple Templates & Fonts Preview 01:39

Working on Our Main Pages Preview 07:25

Designing a Tab Bar for Navigation Preview 06:07

Using Variants for Tab Bars Preview 00:15

Request Page Preview 09:09

Store Cards Preview 11:56

Adding Constraints to the Request Page Preview 03:40

Profile Page Preview 07:37

Applying Constraints to the Profile Page Preview 02:05

Services Page Preview 07:57

Adding Sample Data from Google Sheets Preview 04:31

Finding Custom Fonts to Use Preview 03:07

Creating Text Styles Preview 07:29

Applying Text Styles Everywhere Preview 07:14

Finishing Touches Preview 06:46

Creating Prototypes Preview 03:07

Adding Connections between Frames Preview 03:35

Scrolling in Prototypes Preview 04:27

Testing on a Real Device Preview 01:51

Using Overlays for Tutorial Cards Preview 06:00

Openning Links Preview 02:23

Adding Animations Preview 02:53

Page Transitions Preview 02:18

Interactive Maps Preview 01:53

Playing GIFs Preview 03:20

Smart Animate Preview 05:57

Interactive Components Preview 05:02

Interactive Components Exercise Solutions Preview 02:19

Creating New Flows Preview 03:54

Project Outline Preview 02:24

Starting with a Template Preview 05:17

Login Page Preview 08:46

Image Masks Preview 02:28

Dashboard Page Preview 09:07

Auto-Layout Preview 08:18

Adding Sample Data Preview 07:44

Full Web Mockup Preview 00:11

Version History Preview 02:00