Learn Figma: User Interface Design Essentials - UI/UX Design

Arash Ahadzadeh, iOS Developer & UI Designer

136 Lessons (10h 8m)

- 1. Introduction to the course
  
  2:15
- 2. Introduction
  
  2:42
- 3. Structure of the course
  
  1:15
- 4. Tools
  
  0:48
- 5. Intro to Design Basics
  
  0:28
- 6. Layout
  
  2:00
- 7. Visual Hierarchy
  
  5:02
- 8. Visual Noise
  
  1:25
- 9. Iconography
  
  1:01
- 10. Typography
  
  3:09
- 11. Color Contrast
  
  1:36
- 12. Color Palette
  
  2:17
- 13. Spacing
  
  1:12
- 14. Composition
  
  1:25
- 15. Design Guide
  
  0:40
- 16. Consistent Fonts
  
  0:57
- 17. Consistent Colors
  
  1:00
- 18. Consistent Icons
  
  1:35
- 19. Consistent UI Elements
  
  0:44
- 20. Font Resources
  
  0:48
- 21. Color Resources
  
  0:46
- 22. Icon Resources
  
  0:57
- 23. Introduction to Figma
  
  1:03
- 24. Figma Requirements
  
  4:39
- 25. Figma Environment
  
  4:28
- 26. Shapes
  
  9:15
- 27. Editing Shapes
  
  7:20
- 28. Layers Basics
  
  6:38
- 29. Boolean Operations
  
  4:59
- 30. Text
  
  4:36
- 31. Text Inspector
  
  4:57
- 32. Text Style
  
  3:56
- 33. Constraints and Adaptive Layouts
  
  5:24
- 34. Auto Layout
  
  10:54
- 35. Images
  
  4:44
- 36. Styling: Fill
  
  3:33
- 37. Styling: Stroke
  
  1:34
- 38. Styling: Effects
  
  5:32
- 39. Color Style
  
  3:56
- 40. Masks
  
  2:29
- 41. Components
  
  8:39
- 42. Variants (NEW)
  
  20:25
- 43. Layout Grids
  
  2:26
- 44. Plugins
  
  9:14
- 45. Exporting
  
  2:06
- 46. Prototyping
  
  5:52
- 47. Multiplayer & Commenting
  
  3:04
- 48. Keyboard Shortcuts
  
  3:50
- 49. Intro to UI Elements
  
  0:32
- 50. Text Fields
  
  1:29
- 51. Buttons
  
  2:06
- 52. Sliders
  
  1:29
- 53. Tooltips
  
  1:02
- 54. Selection Controls
  
  1:19
- 55. Chips
  
  1:11
- 56. Cards
  
  1:04
- 57. Dialogs
  
  1:06
- 58. Lists
  
  0:58
- 59. Tables
  
  1:08
- 60. Navigation
  
  0:50
- 61. Menus
  
  0:50
- 62. Charts
  
  0:52
- 63. Steppers
  
  1:03
- 64. Snackbars
  
  1:21
- 65. What is Wireframing?
  
  0:59
- 66. User Flows
  
  1:08
- 67. Interactive Prototypes
  
  1:02
- 68. Wireframe tools
  
  0:59
- 69. Wireframing in Figma
  
  5:02
- 70. What is a Color Style?
  
  0:31
- 71. Primary, Accent, Semantic Colors
  
  10:12
- 72. Grey Colors & Gradients
  
  4:17
- 73. Borders & Shadows
  
  5:31
- 74. Intro to Typography Style
  
  0:25
- 75. Typography Guide - Part 1
  
  4:00
- 76. Typography Guide - Part 2
  
  2:21
- 77. Designing a Modern Finance App
  
  2:17
- 78. Launch Screen
  
  1:59
- 79. Sign-in & Welcome Page
  
  21:33
- 80. Sign-up Page
  
  6:07
- 81. OTP Verification Screens
  
  11:56
- 82. Profile Screens
  
  13:04
- 83. Homepage
  
  19:44
- 84. Menu
  
  10:51
- 85. Credit Cards Page
  
  13:56
- 86. Transactions Page
  
  10:37
- 87. Detailed Transactions Page
  
  9:42
- 88. Transfer Page
  
  7:00
- 89. Confirmation Page
  
  3:41
- 90. Notification Page
  
  6:59
- 91. User's Profile
  
  4:17
- 92. Onboarding Pages
  
  7:57
- 93. Introduction to the Landing Page Project
  
  1:28
- 94. What is a Landing Page?
  
  2:37
- 95. Setting up Your Project
  
  13:27
- 96. Create Your Color Styles
  
  6:02
- 97. Wireframing Your Project - Part 1
  
  8:39
- 98. Wireframing Your Project - Part 2
  
  12:12
- 99. Navigation Bar
  
  8:31
- 100. Hero Section - Part 1
  
  10:29
- 101. Hero Section - Part 2
  
  8:36
- 102. Feature Section - Credit Card
  
  13:00
- 103. Feature Section - Statistics
  
  17:17
- 104. Feature Section - Support
  
  13:26
- 105. Membership Plans
  
  16:30
- 106. FAQ Section
  
  7:32
- 107. Footer
  
  6:01