Can you Smart Animate separate anchor points between variants?

Course contents

SECTION: 1

Getting Started 8:13

1. Intro to the Figma Advanced Course

3:14

2. Getting Started in Figma Advanced Course

2:31

3. How to earn your certificate FREE

2:28

SECTION: 2

Auto Layout - Level 1 55:49

4. Auto Layout & Responsive Design 101: It's use in responsive design

16:06

5. Designing in Figma with Auto Spacing in Auto Layouts

11:40

6. Quiz question 1

7. When and when not to use Components in Figma

6:00

8. Quiz question 2

9. What is good spacing to use in Figma

6:58

10. What spacing should I use for web & app design in Figma

5:16

11. Auto Layout vs Constraints in Figma

3:52

12. Quiz question 3

13. Autolayout shortcuts: Tips and tricks to work with Auto Layout faster

3:06

14. Class Project 01 - Responsive Lower Navigation

2:51

SECTION: 3

Advanced Workflow Tricks 35:51

15. How to handle files in Figma and become a File Handling Master

6:39

16. Quiz question 4

17. How to use advanced Copy, Paste, and Selection Tricks in Figma?

6:35

18. Quiz question 5

19. How to do crazy things with your Figma fields?

3:33

20. Frame Tricks: Tips and Tricks to work with Figma frames effectively

4:40

21. Quiz question 6

22. Advanced Zooming Techniques for precision work in Figma

1:40

23. Light or Dark vs System Theme: Which one to use in Figma?

2:29

24. Class Project 02 - Event Card Constraints

1:35

25. Class Project 02 - Event Card Constraints - Completed

8:40

SECTION: 4

Grids 20:20

26. Grid v Constraints v Autolayout in Figma: Which one to use and when?

5:16

27. How to copy & paste grids and export grid styles in Figma

5:29

28. How to add rows and column grids to one layout in Figma

4:19

29. How to update Grid Styles in Figma

1:32

30. Grids inside of frames that aren't the main frame

3:44

SECTION: 5

Simple App Brand 19:52

31. Class project 03 - Event Branding

4:19

32. Logos using Iconscout: How to use Iconscout to create logos in Figma?

6:47

33. What are widgets compared to plugins in Figma?

3:33

34. Quiz question 7

35. How to create ux color variants using a Figma Widget?

5:13

36. Quiz question 8

SECTION: 6

Nested & Responsive Auto layouts 48:11

37. Intro to Nested & Responsive Auto layouts Section

4:01

38. Production video - Tidying up my frame & component mess

5:52

39. Bring in images using the unsplash plugin in Figma

6:34

40. Production video - Making the parts for our nested autolayout

5:36

41. Nesting Multiple Auto Layouts inside each other in Figma

5:13

42. Autolayout Nesting with variants and responsive text in Figma

8:55

43. Quiz question 9

44. Auto Layout on different device sizes- How to make advanced Auto Layouts

9:34

45. Quiz question 10

46. Responsive text that adjusts for 2 lines in Figma

2:26

SECTION: 7

Animation - Level 1 1:11:43

47. Abstract Gradient Background in Figma the easy way

11:50

48. Quiz question 11

49. How to copy and paste Interactions in Figma

1:23

50. How to animate gradient mesh using Variants in Figma

13:52

51. How to give feedback on a UX project - The Critique Sandwich

9:00

52. Class project 04 - Background Animation

4:50

53. Houdini Text: How to make a text mask animation Figma?

8:30

54. Quiz question 12

55. How to use the Spring Animations in Figma

6:33

56. Spring Animation: How to make custom Spring Animation in Figma

12:16

57. Why is interaction on tap on click grayed out of missing in Figma?

1:51

58. Class project 05 - Houdini Text Animation

1:38

SECTION: 8

Prototyping - Level 1 1:26:31

59. Create & remove bulk multiple noodles wires at once in Figma

3:05

60. Quiz question 13

61. How to bulk update nav links in your Figma prototype

3:15

62. How to set the right phone and find old prototype phones in Figma

4:01

63. How to make sticky scroll position search bar in Figma

3:43

64. Quiz question 14

65. How to stack multiple sticky text vertical scrolling in Figma

13:56

66. Quiz question 15

67. Class project 06 - Multiple Sticky Headings

2:25

68. How to make Interactive Components in Figma

3:42

69. How to make a checkmark turn on and off in Figma

2:38

70. Interactive components with sliding button in navigation for Figma

6:55

71. Quiz question 16

72. Class project 07 - Sliding Button Nav Challenge

4:14

73. Class project 07 - Completed

3:51

74. How to use Sections in Figma for organizing your content

4:49

75. How to use sections for prototyping in Figma

6:38

76. Quiz question 17

77. How to add iOS battery wifi notch status bar to Figma

7:11

78. How to add iOS or Android Snack Bar UI to Figma

10:38

79. Class project 08 - Operating System UI

1:47

80. Be careful what you create in Figma

3:43

SECTION: 9

Advanced Layers 29:26

81. What are the advanced Layer shortcuts in Figma

7:38

82. Quiz question 18

83. How to find layer Zen shortcuts in Figma

4:37

84. Quiz question 19

85. How to hide and lock unlock all layers in Figma

1:05

86. How to use Locked layers in Figma

2:11

87. How to Find Replace and Multi-select Layer Search in Figma

3:58

88. How to Bulk Rename Layers with advanced tricks in Figma

9:57

SECTION: 10

Components & Variants - Level 1 1:07:49

89. How to replace instances and variants with shortcuts in Figma

8:58

90. Quiz question 20

91. How to use Instance Swap Component Properties with preferred in Figma

7:01

92. How to use Component Text Property in Figma

2:21

93. How to use Boolean Component Property in Figma

3:10

94. Quiz question 21

95. How to make a input field using only component properties in Figma

9:52

96. How to Combine Variants with Component Properties in Figma

9:37

97. How to apply component properties to existing design systems

8:18

98. What is Simplify Instances in Figma

4:01

99. Quiz question 22

100. What does Expose Nested Instances do in Figma

10:15

101. Quiz question 23

102. Class project 09 - One button to rule them all

4:16

SECTION: 11

Typography 57:38

103. What are some font tips and tricks in Figma

5:10

104. How to truncate text and set max lines in Figma

2:44

105. How reset fonts & set default fonts in Figma

2:20

106. How to Use Line Height Percentage in 8pt grid in Figma

4:42

107. Quiz question 24

108. How to use Leading trim to cap height to baseline in Figma

4:16

109. How to set Hanging Punctuation for pull quotes & call outs in Figma

1:04

110. Quiz question 25

111. What are the Advanced Type Options in Figma

9:38

112. How to use Variable Type in UX app design in Figma

7:38

113. How to curve text with type on a path in Figma

6:44

114. How to use adobe fonts & local fonts in Figma

4:52

115. How to Preserve text overrides or not in Figma variant

4:42

116. Quiz question 26

117. How to use Chat GPT AI to create placeholder and personas in Figma

3:48

SECTION: 12

Imagery 1:03:59

118. How to create an image style in Figma

3:47

119. Quiz question 27

120. What's the difference with Images inside frames vs fills vs Masked in Figma

4:15

121. How to crop images using shortcuts in Figma

2:13

122. Quiz question 28

123. How to mask images with text in Figma

6:21

124. Class Project 10 - Text Mask

2:49

125. How to mask using transparent pngs with alpha channels in Figma

6:35

126. Quiz question 29

127. Class Project 11 - Alpha Mask

1:23

128. How to create a luma mask in Figma

3:02

129. Quiz question 30

130. Class project 12 - Luma Mask

1:00

131. How to make a spillover mask outside of the frame in Figma

9:49

132. How to use the pen tool to make image masks in Figma

11:04

133. Quiz question 31

134. How to use color layer blending modes in Figma

9:13

135. Class project 13 - Social Ad

2:28

136. Quiz question 32

SECTION: 13

Video 33:47

137. How to add video in Figma

8:05

138. Quiz question 33

139. How to make a background autoplay video in Figma

1:45

140. How to get a video play when you hover in Figma

4:29

141. Class project 14 - Hover Play

142. How to make a play pause button for video in Figma

7:28

143. How to build a video card in Figma

8:38

144. Class project 15 - Video Card

2:28

SECTION: 14

Color 17:38

145. What are some advanced color tricks in figma

6:26

146. How to change replace colors in Figma

8:56

147. Quiz question 34

148. How to create Color Themes for light and dark in Figma

2:16

SECTION: 15

Styles & Libraries 34:20

149. How to group color styles using slashes or folders in Figma

2:35

150. How to descriptions to your styles in Figma for others to use

2:39

151. Editing someone else's styles or component library in Figma

4:30

152. Quiz question 35

153. How to hide color font styles & components from team library in Figma

4:45

154. Quiz question 36

155. How to compare changes in component with overlay in Figma

3:52

156. How to refactoring styles to another design file in Figma

4:09

157. How to move relink refactoring components to another design file in Figma

5:40

158. How to swap parts or entire component & style library in Figma

6:10

159. Quiz question 37

SECTION: 16

Drawing, Stroke & Fill 36:19

160. What are some advanced drawing tips and tricks in figma

7:46

161. How to draw in Figma with the pen tool- Anchor point mastery

7:24

162. How to draw with Bend & Mirror angle in Figma

2:49

163. Can you animate anchor points or booleans in Figma

3:00

164. Quiz question 38

165. How to animate a mobile nav menu in Figma using a dip

14:12

166. Class project 16 - Alt Nav Animation

1:08

SECTION: 17

Auto Layout - Level 2 34:07

167. How to overlap & stack things in a Figma Autolayout

3:16

168. Quiz question 39

169. What are the shortcuts for hug & fill in Figma

3:36

170. Quiz question 40

171. How to set absolute spacing so things ignore Autolayout in Figma

2:47

172. Quiz question 41

173. How to absolute position something that is responsive in Figma

2:23

174. How stick things to the bottom right of an auto layout in Figma

4:02

175. How to resize a box automatically in a Auto Layout to match text in Figma

4:52

176. What are the autolayout padding and resizing shortcuts

1:51

177. How to create a minimum width height button in Figma

4:23

178. How to wrap auto layout objects in Figma

1:42

179. What does stroke included excluded mean in Figma auto layout

2:00

180. Quiz question 42

181. How to set custom spacing in auto layouts in Figma

3:15

SECTION: 18

Components & Variants - Level 2 18:22

182. How to organize Components into groups in Figma

5:57

183. How to create slot placehold components in Figma

7:21

184. How to convert an existing website into a figma design

5:04

SECTION: 19

Prototyping - Level 2 1:01:57

185. How to make a drop down using overlays in Figma

13:58

186. How to make a multi level drop down menu in Figma

14:14

187. Class project 17 - Nested Dropdown Menu

1:47

188. How to create a hover grow effect for images in Figma

18:22

189. Class project 18 - Hover Grow Effect

2:15

190. How to make an expanding Search Bar in Figma

10:25

191. Class project 19 - Expanding Search Bar

SECTION: 20

Variables 33:57

192. What are Variables in Figma

3:26

193. How to create cart total using number variables in Figma

5:40

194. How to add add conditions to variables in Figma

2:26

195. Variant change using Boolean variable - change cart color

5:41

196. Turning our boolean variable to false in Figma

1:50

197. Making a Overlay Popup in the Variable action panel in Figma

2:53

198. Light and Dark Modes using Collections & Color Variables in Figma

7:04

199. How to change spacing with Number Variables in Figma

4:57

SECTION: 21

Design Tokens 29:28

200. What are Design Tokens in Figma

6:50

201. How to create Design Tokens in Figma

9:46

202. Creating spacing & radius design tokens in Figma

7:46

203. When would you use design tokens in Figma

5:06

SECTION: 22

Animation - Level 2 16:52

204. How do you animate along a path in Figma

11:57

205. How to add Lottie animation files in Figma

4:55

206. Quiz question 43

SECTION: 23

Accessibility 11:01

207. Making Your Designs Accessible - A Guide to Accessibility plugin in Figma

11:01

SECTION: 24

Working with Stakeholders 49:39

208. What are some tips for working with colleagues in Figma

6:47

209. How view version history duplicate and restore in Figma

6:07

210. Quiz question 44

211. How to archive and restore previous versions of Figma files

4:16

212. How to create & share a flow in Figma

3:32

213. Quiz question 45

214. How to use the Slice Tool in Figma

2:42

215. Quiz question 46

216. How export uncropped and unscaled images from Figma

3:56

217. How to export webp images from Figma & Photoshop

5:27

218. How to downsize reduce file size of all images in a Figma file

3:04

219. How to document a component in a design system in Figma

4:57

220. How to use DEV Mode in Figma

8:51

SECTION: 25

What Next 21:49

221. Class Project 20 - Finish your design

6:08

222. Distinction Certificate Project

8:46

223. How to request your certificate FREE

224. What's Next - Figma Advanced

5:56

Ooops

You need a subscription to BYOL.com to view the knowledge quiz on this course.

Already a member? Login here

This course has been archived because the content is no longer up-to-date or relevant to most students