This lesson is exclusive to members

Previous Next

Figma Advanced Tutorial: Become a Figma Pro

Class Project 02 - Event Card Constraints

Daniel Walter Scott

Download Exercise Files

Contents

Getting Started
- 1. Intro to the Figma Advanced Course
- 2. Getting Started in Figma Advanced Course
- 3. How to earn your certificate FREE
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
- 26. Grid v Constraints v Autolayout in Figma: Which one to use and when?
- 27. How to copy & paste grids and export grid styles in Figma
- 28. How to add rows and column grids to one layout in Figma
- 29. How to update Grid Styles in Figma
- 30. Grids inside of frames that aren't the main frame
Simple App Brand
- 31. Class project 03 - Event Branding
- 32. Logos using Iconscout: How to use Iconscout to create logos in Figma?
- 33. What are widgets compared to plugins in Figma?
- 34. Quiz question 7
- 35. How to create ux color variants using a Figma Widget ?
- 36. Quiz question 8
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
- 145. What are some advanced color tricks in figma
- 146. How to change replace colors in Figma
- 147. Quiz question 34
- 148. How to create Color Themes for light and dark in Figma
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
- 182. How to organize Components into groups in Figma
- 183. How to create slot placehold components in Figma
- 184. How to convert an existing website into a figma design
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
- 200. What are Design Tokens in Figma
- 201. How to create Design Tokens in Figma
- 202. Creating spacing & radius design tokens in Figma
- 203. When would you use design tokens in Figma
Animation - Level 2
- 204. How do you animate along a path in Figma
- 205. How to add Lottie animation files in Figma
- 206. Quiz question 43
Accessibility
- 207. Making Your Designs Accessible - A Guide to Accessibility plugin in Figma
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
- 221. Class Project 20 - Finish your design
- 222. How to request your certificate FREE
- 223. What's Next - Figma Advanced

Introduction

Take on Class Project 02 – Event Card Constraints! Design a versatile event card in Figma using constraints, sharpening your skills in layout and adaptability.

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

No transcription available for this video.

Powered by instructorHQ v4
Terms of use Privacy policy
© Bring your Own Laptop Ltd 2024