Figma Tutorial for UI Design – Course for Beginners

By freeCodeCamp.org
Published: Jan 05, 2022

“
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

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…

[READ MORE]

”