Figma for Beginners: Learning by Doing approach

Name: Figma for Beginners: Learning by Doing approach
Rating: 4.4 (290 reviews)

Design a Website to learn Figma | Learning by Doing Approach | For beginners, product managers and designers, etc

Created bySaumitra Newalkar

Last updated 2/2025

English

English [Auto],

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

Course content

4 sections • 22 lectures • 2h 20m total length

Introduction1:09
Learn Figma basics through a learn-by-doing approach, guiding beginners from requirements to wireframes and designing a website from scratch, with practical setup tips.
Setting up the environment2: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 Figma0: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 Interface15:00
Explore the Figma interface by building a simple login screen with frames, text, shapes, and color on an iPhone frame, then prototype interactions and outline steps from wireframes to typography.
Client Requirement and Wireframe3:39

Choosing Primary Colours6:09
Explore how to design a color palette in Figma by using a template, creating primary, secondary, tertiary, and grayscale colors, and aligning them with a logo gradient and brand guidelines.
Choosing Secondary and Tertiary Colours4:42
Anchor primary colors to the logo for brand cohesion, then pick complementary secondary colors with Adobe Color to create harmony, using them sparingly for accents and icons.
Choosing Grays from Primary Colour3:35
Choosing Typefaces and Type-Scale11:25
Choose two typefaces for headings and body text, apply a harmonious time scale, and build a clear typographic hierarchy using fonts like Poppins and Open Sans from Google Fonts.
Heading, Paragraph, and Body Styles4:37

Setting up the Artboard and Grids5:18
Set up a Figma artboard with a 1600 by 5000 frame, apply a 12-column grid, place the logo at 64-pixel margins, and prepare images and plug-ins as you design.
Creating the Navigation Bar5:44
Using Headings and Text Styles5:53
Creating Background and Inserting Image5:06
Making the Call to Action Button6:50
design a call to action button in Figma from scratch using auto layout, Poppins medium typography, primary color, borders, rounded corners, and an arrow icon.
Using Auto Layout for next section7:48
Apply auto layout to align icons and buttons, tweak shadows to create clickable links, and prototype a feature universities section in figma, using grids, spacing, and color palette.
Designing the Feature Cards with Auto Layout17:16
Design cards with auto layout in Figma, applying heading and paragraph styles, a learn more CTA, icons, color palette, and drop shadows for career counseling and university admissions.
Adding Visual Background to the Cards3:26
Add a gradient background and accent circles to the five cards, using a gradient plugin, adjust opacity, and duplicate elements to transform the layout.
Another way to design Cards (for next section)13:36
Preview previous sections and demonstrate turning an upcoming events card into a visually appealing, reusable component using rectangles, typography, color accents, icons, a call-to-action, and auto layout.
Building next section with Cards using auto layout7:10
Design the next section with cards using auto layout, building each card from scratch with images and text, and add a scroller to suggest more content.
Do it yourself for the rest of the design4:04
Duplicate the visual element, such as the two circles, to add a cohesive accent on the white background and practice applying headings, cards, testimonials, and a call-to-action button.

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

Figma for Beginners: Learning by Doing approach

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 23min

Colour Scheme and Typography5 lectures • 30min

Designing the Webpage11 lectures • 1hr 22min

MIND BLOWN - IS THIS THE FUTURE ?1 lecture • 5min

Requirements

Description

Who this course is for: