Learn Figma Uiux Design

Tags: Figma

Design a Website while learning Figma using Learning by Doing Approach

Last updated 2022-01-10 | 4.3

- Understand Figma and its functionality
- Create a modern looking website as per client requirement
- Create colour palette and choose colour schemes according to the brand colours

What you'll learn

Understand Figma and its functionality
Create a modern looking website as per client requirement
Create colour palette and choose colour schemes according to the brand colours
Understand typefaces
type scale
and create Typography reference sheet
Design easy to replicate designs using advanced Figma features such as Auto Layout

* Requirements

* Basic computer operating skills
* A computer (and internet) with Figma installed (or you can use it in browser)

Description

Here are some reviews from the students of the course:

"This course is great for beginners in Figma like me, Not only tells about Figma but other stuff that related to it. Great course!!" - Fahrel

"I start learning Figma with this class . It was very useful and I learned not only the basics of Figma but also I learned how to organized my project and lots of tips about UI." - Kamelia

"The course is great for beginners to quickly learn the most used features and start creating their own work." - Marcus Martins

"Your teaching style is great. I really enjoy watching and learning from you. thanks" - Beheshteh atrian

"The Class is Amaning, It really helped me to learn Figma as a Beginner" - Monesh Mangtani

"This course was very beneficial and practical for me." - Bita Bostanchi

"Very nice for you who want to take a step at web design or UI/UX design role." - Amadev


This is very much a practical course on learning Figma. At the end of the course, you will have an aesthetically pleasing Project of a Website to show in your portfolio.


Figma is increasingly becoming the tool of choice for UI/UX Design teams all over the world. It is because Figma is much more powerful than Adobe XD and Sketch when it comes to its capability to collaborate and develop responsive design. In this course, you will learn Figma while designing while you are learning. This learning by doing methodology will help you learn Figma more effectively.


In this course, you will also learn the process of UI/UX Design with Figma, which starts at the client brief, and ends with a beautiful design which the client loves. You are requested to follow the course and start working in Figma in parallel. The course covers following steps in the UI/UX Design process:

  • Understanding Client's Design

  • Understanding the Wireframe

  • Creating Colour Palette matching to the Brand Design

  • Choosing Typefaces and Type Scale

  • Designing a modern User Interface according to the requirement

  • Use Figma specific features like Auto Layout to speed up your workflow

This course is specifically aimed at beginners to help then get upto speed. Learning a tool is not enough to create an output of relevance, and hence, this course is a project based course. At the end of the course you will have a beautiful website design (with website copy) for a study abroad company to show off in your portfolio.

Who this course is for:

  • Students looking to learn Figma for UI/UX Design
  • Beginners looking to create a project in Figma and learn all the functionalities
  • Graphic Designers, Web Designers, UX Designers looking to Learn Figma for UI Design

Course content

4 sections • 22 lectures

Introduction Preview 01:09

Setting up the environment Preview 02:43

Link for the Workbook File - https://www.figma.com/file/Ha3S4t0JFzjM87eufWmtfQ/Excellence-Study-Abroad-Workbook-File


Link for the Reference File - https://www.figma.com/file/0PBgomraRFAEw0kcWO5V88/Excellence-Study-Abroad-Reference-File

If you're having trouble with importing course files to Figma Preview 00:38

Link for the Workbook File - https://www.figma.com/file/Ha3S4t0JFzjM87eufWmtfQ/Excellence-Study-Abroad-Workbook-File


Link for the Reference File - https://www.figma.com/file/0PBgomraRFAEw0kcWO5V88/Excellence-Study-Abroad-Reference-File

Hello World: Basic Introduction to Figma Interface Preview 15:00

Client Requirement and Wireframe Preview 03:39

Choosing Primary Colours Preview 06:09

Choosing Secondary and Tertiary Colours Preview 04:42

Choosing Grays from Primary Colour Preview 03:35

Choosing Typefaces and Type-Scale Preview 11:25

Heading, Paragraph, and Body Styles Preview 04:37

Setting up the Artboard and Grids Preview 05:18

Creating the Navigation Bar Preview 05:44

Using Headings and Text Styles Preview 05:53

Creating Background and Inserting Image Preview 05:06

Making the Call to Action Button Preview 06:50

Using Auto Layout for next section Preview 07:48

Designing the Feature Cards with Auto Layout Preview 17:16

Adding Visual Background to the Cards Preview 03:26

Another way to design Cards (for next section) Preview 13:36

Building next section with Cards using auto layout Preview 07:10

Do it yourself for the rest of the design Preview 04:04

Thank You! .... Coming Soon.... Preview 00:19