Figma for UI/UX Design 2021: Learning by Doing approach
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.
Colour Scheme and Typography
-
1
Introduction -
2
Setting up the environment
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
-
3
Hello World: Basic Introduction to Figma Interface
-
4
Client Requirement and Wireframe
Designing the Webpage
Coming Soon
-
10
Setting up the Artboard and Grids
-
11
Creating the Navigation Bar
-
12
Using Headings and Text Styles
-
13
Creating Background and Inserting Image
-
14
Making the Call to Action Button
-
15
Using Auto Layout for next section
-
16
Designing the Feature Cards with Auto Layout
-
17
Adding Visual Background to the Cards
-
18
Another way to design Cards (for next section)
-
19
Building next section with Cards using auto layout
-
20
Do it yourself for the rest of the design
Be the first to add a review.
