🎯Land Your Dream Job500+ Mock Interviews
Transform Your Tasks with AIGet 3x more done

Figma Tutorial for UI Design - Course for Beginners

By - freeCodeCamp.org

📚 Course Information

Channel

freeCodeCamp.org

Published On

1/5/2022

📝 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

🎯 What You'll Learn

Complete understanding of the topic

Hands-on practical knowledge

Real-world examples and use cases

Industry best practices

⭐ Course Features

🤖

AI Support

24/7 doubt solving

📝

Practice Quiz

Test your knowledge

🏆

Certificate

Course completion

📋 Prerequisites

  • Basic understanding of programming concepts

  • Eagerness to learn and practice

AI MentorLive Chat
Always here to help you learn
Premium

Get Full Course Access

Take your learning to the next level with premium features

Unlimited access to all chapters
Interactive quizzes & assessments
Downloadable certificate

Course Content

Introduction Section (0 sec - 1 hour 17 min)
1
1 hour 17 min

Introduction Section (0 sec - 1 hour 17 min)

5 Questions Ready
Main Content Section 1 (1 hour 17 min - 2 hour 34 min)
2
1 hour 17 min

Main Content Section 1 (1 hour 17 min - 2 hour 34 min)

5 Questions Locked
Main Content Section 2 (2 hour 34 min - 3 hour 51 min)
3
1 hour 17 min

Main Content Section 2 (2 hour 34 min - 3 hour 51 min)

5 Questions Locked
Main Content Section 3 (3 hour 51 min - 5 hour 8 min)
4
1 hour 17 min

Main Content Section 3 (3 hour 51 min - 5 hour 8 min)

5 Questions Locked
Main Content Section 4 (5 hour 8 min - 6 hour 25 min)
5
1 hour 17 min

Main Content Section 4 (5 hour 8 min - 6 hour 25 min)

5 Questions Locked
Main Content Section 5 (6 hour 25 min - 7 hour 42 min)
6
1 hour 17 min

Main Content Section 5 (6 hour 25 min - 7 hour 42 min)

5 Questions Locked
Main Content Section 6 (7 hour 42 min - 8 hour 59 min)
7
1 hour 17 min

Main Content Section 6 (7 hour 42 min - 8 hour 59 min)

5 Questions Locked
Final Section (8 hour 59 min - 10 hour 16 min)
8
1 hour 17 min

Final Section (8 hour 59 min - 10 hour 16 min)

5 Questions Locked