Learn Figma: User Interface Design Essentials - UI/UX Design
Arash Ahadzadeh, iOS Developer & UI Designer
Watch this class and thousands more
Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more
Watch this class and thousands more
Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more
Lessons in This Class
136 Lessons (10h 9m)
-
-
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 -
-