Introduction

Creating A Figma Account

Creating & Naming A Figma Design File

Creating Shapes In Figma

Selection In Figma

Editing Shapes In Figma

Introduction To Typography In Figma

Design Tree In Figma

First Design Task

Colors In Figma

Drawing Tools In Figma

Margin And Padding In UI UX Design

Figma AutoLayout

Formatting Principles In Figma

Figma Constraints And Resizing

Website Design in Figma

Jakob's Principle Of Design

Introduction to Styles and components

Figma Component Variants

Layout Design & Configuration For Websites in Figma

Layout Grids In Figma

Introduction To Responsive Design

Material Design Guide

Introduction To Tailwind UI

Tailwind UI Design Project

Responsive Landing Page Design Project

Designing Mobile Apps

Iconography In Figma

Boolean Groups

Figma Tokens

Animation In Figma With Figmotion

Mobile Design Project

freeCodeCamp.org

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

Figma Tutorial for UI Design - Course for Beginners

Figma Tutorial for UI Design - Course for Beginners

Figma Tutorial for UI Design - Course for Beginners

Get Full Course Access

Highly Recommended Courses

Explore top skills

In-demand Careers

Popular Topics

Creative Skills

Business Skills

Choose your learning path