Certificates
Group Memberships
Resources
Login
Sign Up
This lesson is exclusive to members
Previous
Next
Figma UI UX Design Essentials
Class Project 18 - My Second Animation
Daniel Walter Scott
Download Exercise Files
Contents
Getting Started
1. Introduction to Figma Essentials training course
FREE
2. Getting started with Figma training
FREE
3. How to earn your certificate
FREE
4. What is Figma for & does it do the coding?
FREE
5. Whats the difference between UI and UX in Figma
6. What we are making in this Figma course
7. Class Project 01 - Create your own brief
Wireframing - Low Fidelity
8. What is Lo Fi Wireframe vs High Fidelity in Figma?
9. Creating our design file & introducing frames in Figma
Type, Color & Icon Introduction
10. The basics of type & fonts in Figma
11. Rectangles, Circles, Buttons and Rounded corners in Figma
12. How to use color in Figma
13. Strokes plus updating color defaults in Figma
14. Object editing and how to escape in Figma
15. Quiz question 1
16. Scale vs Selection Tool in Figma
17. Quiz question 2
18. Frames vs Groups in Figma
19. Class Project 02 - Wireframe
20. Where to get Free icons for Figma
21. Matching the stroke of our icons
22. How to use Plugins in Figma for icons
23. Class Project 03 - Icons
Pages
24. How to use Pages in Figma
25. Quiz question 3
Prototyping - Level 1
26. How to prototype in Figma
27. Quiz question 4
28. Quiz question 5
29. Prototype animation and easing in Figma
30. Testing on your phone with Figma Mirror
31. Class Project 04 - Testing on your phone
Animation Level 1
32. What is Smart Animation & delays in Figma?
33. Quiz question 6
34. Class Project 05 - My first animation
Commenting
35. Sharing & Commenting on a Figma file with Stakeholders
36. Sharing & editing with other UX designers in Figma
Moodboard - High Fidelity
37. How I get inspiration for UX projects
38. How to create a moodboard in Figma
FREE
39. Class Project 06 - Moodboard
Columns
40. How to work with Columns & Grids in Figma
41. Quiz question 7
42. Quiz question 8
Tips & Tricks
43. Tips, Tricks, Preferences, and Weirdness in Figma
Colors
44. Color Inspiration & the eyedropper in Figma
45. How to create a color palette in Figma
46. How to make gradients in Figma
47. How to create & use Color Styles in Figma
48. Quiz question 9
49. Class Project 07 - Colors & Columns
Text & Fonts Advanced
50. Fonts on Desktop vs in Browser in Figma
51. What fonts can I use? Plus font pairing in Figma
FREE
52. What common font sizes should I choose in web design?
53. How to make Character Styles in Figma
54. Lorem ipsum & placeholder text in Figma
55. Useful things to know about text in Figma
56. How to fix missing fonts in Figma
FREE
57. Class Project 08 - Text
58. Quiz question 10
59. Quiz question 11
Drawing
60. Drawing tips and tricks in Figma
61. Squircle buttons with iOS rounded courses in Figma
62. Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma
63. What is the difference? Union vs Flatten in Figma
64. Quiz question 12
65. Quiz question 13
66. Class Project 09 - Making stuff
67. Smart Selection & Tidy up in Figma
Working with Illustrator
68. Do I need to know Illustrator with Figma?
Images
69. Tips & tricks for using images in Figma
70. Masking & cropping images in Figma
71. Free images & plugins for Figma
Working with Photoshop
72. Do you need Photoshop for UX design in Figma?
FREE
73. Class Project 10 - Images
Autolayout & Constraints
74. What is Autolayout & expanding buttons in Figma?
75. Quiz question 14
76. Quiz question 15
77. Class Project 11 - Buttons
78. Auto Layout for spacing
79. Quiz question 16
80. How to use constraints in Figma
81. Quiz question 17
82. Combining Nested frames Auto Layout & Constraints in Figma
83. Adding Text Box Autoheight to Autolayout in Figma
84. Class Project 12 - Responsive Design
Effects
85. Nice drop shadow & inner drop shadow effects in Figma
86. Quiz question 18
87. Blur Layer, Background Blur & Image Blur in Figma
88. Quiz question 19
89. How to make Neumorphic UI buttons in Figma
FREE
90. Class Project 13 - Effects
Saving & History
91. How to save locally & save history in Figma
Components & Instances
92. What are components in Figma?
93. Quiz question 20
94. Quiz question 21
95. Updating, Changing & Resetting your components
96. Quiz question 22
97. You can’t kill main components in Figma
98. Where should you keep your main components in Figma
99. Intro to the forward slash / naming convention in Figma
100. Quiz question 23
101. Class Project 14 - Components
Variants & Variables
102. How to make a variable component in Figma
FREE
103. Quiz question 24
104. Another way to make variables in Figma
105. How to make a Multi Dimensional Variant in Figma
106. Class Project 15 - Variants
Making a form
107. How to make a form using variants in Figma
108. Class Project 16 - Form
109. Putting it all together in a desktop example
Prototyping - Level 2
110. How to add a popup overlay modal in Figma
FREE
111. How to make & prototype a tool tip in Figma
112. What are Flows in Figma?
113. Quiz question 25
114. Slide in mobile nav menu overlay in Figma
115. Class Project 17 - Prototyping
116. How to pin navigation to the top in Figma
117. How to make a horizontal scrolling swipe in Figma
118. Quiz question 26
119. Automatic scroll down the page to anchor point in Figma
Teams & Projects
120. What are Teams vs Projects vs Files in Figma?
Libraries
121. How do you use team libraries in Figma
122. Quiz question 27
Animation & Micro Interactions
123. The difference between animation & micro interactions
124. Animation with custom easing in Figma
125. Class Project 18 - My Second Animation
126. How to make animated transitions in Figma
127. Quiz question 28
128. Class Project 19 - Page transition
129. Micro interactions using interactive components in Figma
130. Micro interaction toggle switch in Figma
131. Micro interaction burger menu turned into a cross in Figma
132. Class Project 20 - Micro interaction
Thumbnail update
133. How to change the thumbnail for Figma Files
Exporting
134. How to export images out of Figma
135. Quiz question 29
136. How to share your document with clients & stakeholders
137. Talking to your developer early in the Figma design process
138. Sharing Figma with developers & engineers handoff
139. What are the next level handoffs aka design systems
140. Class Project 21 - Finish your design
FREE
141. How to request your certificate
FREE
142. What next?
FREE
Comments
Contact Us
Group memberships
Bio
FAQ
All Courses
Resources
Certificates
Challenges
Podcast
Byol Store
Powered by instructorHQ v4
Terms of use
Privacy policy
© Bring your Own Laptop Ltd 2023