Figma Tutorial for UI Design

In this Figma course by Joseph Brendan, learn how to use Figma for UI Design.

Figma is a vector graphics editor and prototyping tool.

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

Frank

#DataScientist, #DataEngineer, Blogger, Vlogger, Podcaster at http://DataDriven.tv . Back @Microsoft to help customers leverage #AI Opinions mine. #武當派 fan. I blog to help you become a better data scientist/ML engineer Opinions are mine. All mine.