Figma Tutorial for UI Design - Course for Beginners

By - freeCodeCamp.org
Overview
Practice
Certification
Reminders

Description

In this Figma course, you will learn how to use Figma for UI Design. Figma is a vector graphics editor and prototyping tool. ✏️ Joseph Brendan developed this course. Check out his YouTube channel: https://www.youtube.com/channel/UCETwb_AzizmhID0RjKULnBA ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Introduction ⌨️ (0:00:55) Creating A Figma Account ⌨️ (0:02:32) Creating & Naming A Figma Design File ⌨️ (0:04:47) Creating Shapes In Figma ⌨️ (0:07:16) Selection In Figma ⌨️ (0:12:02) Editing Shapes In Figma ⌨️ (0:36:14) Introduction To Typography In Figma ⌨️ (1:01:41) Design Tree In Figma ⌨️ (1:06:43) First Design Task ⌨️ (1:20:44) Colors In Figma ⌨️ (1:44:22) Drawing Tools In Figma ⌨️ (1:49:20) Margin And Padding In UI UX Design ⌨️ (1:56:08) Figma AutoLayout ⌨️ (2:13:48) Formatting Principles In Figma ⌨️ (2:34:32) Figma Constraints And Resizing ⌨️ (2:51:11) Website Design in Figma ⌨️ (2:55:52) Jakob's Principle Of Design ⌨️ (3:00:25) Introduction to Styles and components ⌨️ (3:25:29) Figma Component Variants ⌨️ (3:36:18) Layout Design & Configuration For Websites in Figma ⌨️ (3:40:07) Layout Grids In Figma ⌨️ (4:01:22) Introduction To Responsive Design ⌨️ (4:07:32) Material Design Guide ⌨️ (6:26:24) Introduction To Tailwind UI ⌨️ (6:28:24) Tailwind UI Design Project ⌨️ (7:25:45) Responsive Landing Page Design Project ⌨️ (8:45:54) Designing Mobile Apps ⌨️ (8:56:47) Iconography In Figma ⌨️ (9:02:32) Boolean Groups ⌨️ (9:09:52) Figma Tokens ⌨️ (9:18:29) Animation In Figma With Figmotion ⌨️ (9:36:29) Mobile Design Project 🎉 Thanks to our Champion and Sponsor supporters: 👾 Raymond Odero 👾 Agustín Kussrow 👾 aldo ferretti 👾 Otis Morgan 👾 DeezMaster -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

Chapters

Introduction
Introduction
55 sec
Creating A Figma Account
Creating A Figma Account
1 min
Creating & Naming A Figma Design File
Creating & Naming A Figma Design File
2 min
Creating Shapes In Figma
Creating Shapes In Figma
2 min
Selection In Figma
Selection In Figma
4 min
Editing Shapes In Figma
Editing Shapes In Figma
24 min
Introduction To Typography In Figma
Introduction To Typography In Figma
25 min
Design Tree In Figma
Design Tree In Figma
5 min
First Design Task
First Design Task
14 min
Colors In Figma
Colors In Figma
23 min
Drawing Tools In Figma
Drawing Tools In Figma
4 min
Margin And Padding In UI UX Design
Margin And Padding In UI UX Design
6 min
Figma AutoLayout
Figma AutoLayout
17 min
Formatting Principles In Figma
Formatting Principles In Figma
20 min
Figma Constraints And Resizing
Figma Constraints And Resizing
16 min
Website Design in Figma
Website Design in Figma
4 min
Jakob's Principle Of Design
Jakob's Principle Of Design
4 min
Introduction to Styles and components
Introduction to Styles and components
25 min
Figma Component Variants
Figma Component Variants
10 min
Layout Design & Configuration For Websites in Figma
Layout Design & Configuration For Websites in Figma
3 min
Layout Grids In Figma
Layout Grids In Figma
21 min
Introduction To Responsive Design
Introduction To Responsive Design
6 min
Material Design Guide
Material Design Guide
2 hour 18 min
Introduction To Tailwind UI
Introduction To Tailwind UI
2 min
Tailwind UI Design Project
Tailwind UI Design Project
57 min
Responsive Landing Page Design Project
Responsive Landing Page Design Project
1 hour 20 min
Designing Mobile Apps
Designing Mobile Apps
10 min
Iconography In Figma
Iconography In Figma
5 min
Boolean Groups
Boolean Groups
7 min
Figma Tokens
Figma Tokens
8 min
Animation In Figma With Figmotion
Animation In Figma With Figmotion
18 min
Mobile Design Project
Mobile Design Project
40 min
⚡️ AI Mentor