Figma Advanced Tutorial: Become a Figma Pro
When and when not to use Components in Figma
Contents
- Getting Started
-
Auto Layout - Level 1
- 4. Auto Layout & Responsive Design 101: It's use in responsive design
- 5. Designing in Figma with Auto Spacing in Auto Layouts
-
6. Quiz question 1 - 7. When and when not to use Components in Figma
-
8. Quiz question 2 - 9. What is good spacing to use in Figma
- 10. What spacing should I use for web & app design in Figma
- 11. Auto Layout vs Constraints in Figma
-
12. Quiz question 3 - 13. Autolayout shortcuts: Tips and tricks to work with Auto Layout faster
- 14. Class Project 01 - Responsive Lower Navigation
-
Advanced Workflow Tricks
- 15. How to handle files in Figma and become a File Handling Master
-
16. Quiz question 4 - 17. How to use advanced Copy, Paste, and Selection Tricks in Figma?
-
18. Quiz question 5 - 19. How to do crazy things with your Figma fields?
- 20. Frame Tricks: Tips and Tricks to work with Figma frames effectively
-
21. Quiz question 6 - 22. Advanced Zooming Techniques for precision work in Figma
- 23. Light or Dark vs System Theme: Which one to use in Figma?
- 24. Class Project 02 - Event Card Constraints
- 25. Class Project 02 - Event Card Constraints - Completed
- Grids
- Simple App Brand
-
Nested & Responsive Auto layouts
- 37. Intro to Nested & Responsive Auto layouts Section
- 38. Production video - Tidying up my frame & component mess
- 39. Bring in images using the unsplash plugin in Figma
- 40. Production video - Making the parts for our nested autolayout
- 41. Nesting Multiple Auto Layouts inside each other in Figma
- 42. Autolayout Nesting with variants and responsive text in Figma
-
43. Quiz question 9 - 44. Auto Layout on different device sizes- How to make advanced Auto Layouts
-
45. Quiz question 10 - 46. Responsive text that adjusts for 2 lines in Figma
-
Animation - Level 1
- 47. Abstract Gradient Background in Figma the easy way
-
48. Quiz question 11 - 49. How to copy and paste Interactions in Figma
- 50. How to animate gradient mesh using Variants in Figma
- 51. How to give feedback on a UX project - The Critique Sandwich
- 52. Class project 04 - Background Animation
- 53. Houdini Text: How to make a text mask animation Figma?
-
54. Quiz question 12 - 55. How to use the Spring Animations in Figma
- 56. Spring Animation: How to make custom Spring Animation in Figma
- 57. Why is interaction on tap on click grayed out of missing in Figma?
- 58. Class project 05 - Houdini Text Animation
-
Prototyping - Level 1
- 59. Create & remove bulk multiple noodles wires at once in Figma
-
60. Quiz question 13 - 61. How to bulk update nav links in your Figma prototype
- 62. How to set the right phone and find old prototype phones in Figma
- 63. How to make sticky scroll position search bar in Figma
-
64. Quiz question 14 - 65. How to stack multiple sticky text vertical scrolling in Figma
-
66. Quiz question 15 - 67. Class project 06 - Multiple Sticky Headings
- 68. How to make Interactive Components in Figma
- 69. How to make a checkmark turn on and off in Figma
- 70. Interactive components with sliding button in navigation for Figma
-
71. Quiz question 16 - 72. Class project 07 - Sliding Button Nav Challenge
- 73. Class project 07 - Completed
- 74. How to use Sections in Figma for organizing your content
- 75. How to use sections for prototyping in Figma
-
76. Quiz question 17 - 77. How to add iOS battery wifi notch status bar to Figma
- 78. How to add iOS or Android Snack Bar UI to Figma
- 79. Class project 08 - Operating System UI
- 80. Be careful what you create in Figma
-
Advanced Layers
- 81. What are the advanced Layer shortcuts in Figma
-
82. Quiz question 18 - 83. How to find layer Zen shortcuts in Figma
-
84. Quiz question 19 - 85. How to hide and lock unlock all layers in Figma
- 86. How to use Locked layers in Figma
- 87. How to Find Replace and Multi-select Layer Search in Figma
- 88. How to Bulk Rename Layers with advanced tricks in Figma
-
Components & Variants - Level 1
- 89. How to replace instances and variants with shortcuts in Figma
-
90. Quiz question 20 - 91. How to use Instance Swap Component Properties with preferred in Figma
- 92. How to use Component Text Property in Figma
- 93. How to use Boolean Component Property in Figma
-
94. Quiz question 21 - 95. How to make a input field using only component properties in Figma
- 96. How to Combine Variants with Component Properties in Figma
- 97. How to apply component properties to existing design systems
- 98. What is Simplify Instances in Figma
-
99. Quiz question 22 - 100. What does Expose Nested Instances do in Figma
-
101. Quiz question 23 - 102. Class project 09 - One button to rule them all
-
Typography
- 103. What are some font tips and tricks in Figma
- 104. How to truncate text and set max lines in Figma
- 105. How reset fonts & set default fonts in Figma
- 106. How to Use Line Height Percentage in 8pt grid in Figma
-
107. Quiz question 24 - 108. How to use Leading trim to cap height to baseline in Figma
- 109. How to set Hanging Punctuation for pull quotes & call outs in Figma
-
110. Quiz question 25 - 111. What are the Advanced Type Options in Figma
- 112. How to use Variable Type in UX app design in Figma
- 113. How to curve text with type on a path in Figma
- 114. How to use adobe fonts & local fonts in Figma
- 115. How to Preserve text overrides or not in Figma variant
-
116. Quiz question 26 - 117. How to use Chat GPT AI to create placeholder and personas in Figma
-
Imagery
- 118. How to create an image style in Figma
-
119. Quiz question 27 - 120. What's the difference with Images inside frames vs fills vs Masked in Figma
- 121. How to crop images using shortcuts in Figma
-
122. Quiz question 28 - 123. How to mask images with text in Figma
- 124. Class Project 10 - Text Mask
- 125. How to mask using transparent pngs with alpha channels in Figma
-
126. Quiz question 29 - 127. Class Project 11 - Alpha Mask
- 128. How to create a luma mask in Figma
-
129. Quiz question 30 - 130. Class project 12 - Luma Mask
- 131. How to make a spillover mask outside of the frame in Figma
- 132. How to use the pen tool to make image masks in Figma
-
133. Quiz question 31 - 134. How to use color layer blending modes in Figma
- 135. Class project 13 - Social Ad
-
136. Quiz question 32
-
Video
- 137. How to add video in Figma
-
138. Quiz question 33 - 139. How to make a background autoplay video in Figma
- 140. How to get a video play when you hover in Figma
- 141. Class project 14 - Hover Play
- 142. How to make a play pause button for video in Figma
- 143. How to build a video card in Figma
- 144. Class project 15 - Video Card
- Color
-
Styles & Libraries
- 149. How to group color styles using slashes or folders in Figma
- 150. How to descriptions to your styles in Figma for others to use
- 151. Editing someone else's styles or component library in Figma
-
152. Quiz question 35 - 153. How to hide color font styles & components from team library in Figma
-
154. Quiz question 36 - 155. How to compare changes in component with overlay in Figma
- 156. How to refactoring styles to another design file in Figma
- 157. How to move relink refactoring components to another design file in Figma
- 158. How to swap parts or entire component & style library in Figma
-
159. Quiz question 37
-
Drawing, Stroke & Fill
- 160. What are some advanced drawing tips and tricks in figma
- 161. How to draw in Figma with the pen tool- Anchor point mastery
- 162. How to draw with Bend & Mirror angle in Figma
- 163. Can you animate anchor points or booleans in Figma
-
164. Quiz question 38 - 165. How to animate a mobile nav menu in Figma using a dip
- 166. Class project 16 - Alt Nav Animation
-
Auto Layout - Level 2
- 167. How to overlap & stack things in a Figma Autolayout
-
168. Quiz question 39 - 169. What are the shortcuts for hug & fill in Figma
-
170. Quiz question 40 - 171. How to set absolute spacing so things ignore Autolayout in Figma
-
172. Quiz question 41 - 173. How to absolute position something that is responsive in Figma
- 174. How stick things to the bottom right of an auto layout in Figma
- 175. How to resize a box automatically in a Auto Layout to match text in Figma
- 176. What are the autolayout padding and resizing shortcuts
- 177. How to create a minimum width height button in Figma
- 178. How to wrap auto layout objects in Figma
- 179. What does stroke included excluded mean in Figma auto layout
-
180. Quiz question 42 - 181. How to set custom spacing in auto layouts in Figma
- Components & Variants - Level 2
-
Prototyping - Level 2
- 185. How to make a drop down using overlays in Figma
- 186. How to make a multi level drop down menu in Figma
- 187. Class project 17 - Nested Dropdown Menu
- 188. How to create a hover grow effect for images in Figma
- 189. Class project 18 - Hover Grow Effect
- 190. How to make an expanding Search Bar in Figma
- 191. Class project 19 - Expanding Search Bar
-
Variables
- 192. What are Variables in Figma
- 193. How to create cart total using number variables in Figma
- 194. How to add add conditions to variables in Figma
- 195. Variant change using Boolean variable - change cart color
- 196. Turning our boolean variable to false in Figma
- 197. Making a Overlay Popup in the Variable action panel in Figma
- 198. Light and Dark Modes using Collections & Color Variables in Figma
- 199. How to change spacing with Number Variables in Figma
- Design Tokens
- Animation - Level 2
- Accessibility
-
Working with Stakeholders
- 208. What are some tips for working with colleagues in Figma
- 209. How view version history duplicate and restore in Figma
-
210. Quiz question 44 - 211. How to archive and restore previous versions of Figma files
- 212. How to create & share a flow in Figma
-
213. Quiz question 45 - 214. How to use the Slice Tool in Figma
-
215. Quiz question 46 - 216. How export uncropped and unscaled images from Figma
- 217. How to export webp images from Figma & Photoshop
- 218. How to downsize reduce file size of all images in a Figma file
- 219. How to document a component in a design system in Figma
- 220. How to use DEV Mode in Figma
- What Next
Certificates
We’re awarding certificates for this course!
Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.
How to earn your certificate
Work your way towards your certificate for this course by following these simple steps.
- Watch the course videos
- Complete the Class Projects - look out for the videos marked with
- Upload your class projects into the My Projects area in your account
- Complete and pass the Knowledge Quiz (Merit level courses only)
- Complete the Distinction Certificate Project (Distinction level courses only) - look out for the video marked with
- Upload your Distinction project to the My Projects area in your account
- Request your certificate when you've completed the requirements for the certificate level you're working towards
Good luck!
Pass certificates
We’re awarding ‘Pass’ level certificates for this course.
You can work your way towards your ‘Pass’ certificate by following these simple steps.
- Watch the course videos
- Complete the Class Projects - look out for the videos marked with
- Upload your class projects into the My Projects area in your account
- Don’t forget to request your certificate when all your projects are complete
Good luck!
Merit certificates
We’re awarding ‘Merit’ level certificates for this course.
You can work your way towards your ‘Merit’ certificate by following these simple steps.
- Watch the course videos
- Complete the Class Projects - look out for the videos marked with
- Upload your class projects into the My Projects area in your account
- Complete and pass the Knowledge Quiz
- Don’t forget to request your certificate when you have passed the quiz and completed all your projects
Good luck!
Introduction
Unlock the power of Components in Figma! Explore best practices for using components effectively and learn when to avoid them for optimal design workflow.
No transcription available for this video.
-
Contact Us - Group memberships
- Bio
- FAQ
- All Courses
- Resources
- Powered by instructorHQ v4
- Terms of use Privacy policy
- © Bring your Own Laptop Ltd 2024