Figma Tutorial for UI Design – Course for Beginners

freeCodeCamp
via YouTube
In this Figma course, you will learn how to use Figma for UI Design. Figma is a vector graphics editor and prototyping tool.
Save (0)
ClosePlease login

No account yet? Register

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

Instructor(s)

Joseph Brendan
freeCodeCamp
via YouTube
Free
English
10 hrs, 16 mins
Self paced
Beginner
Subtitles: English