3D Carousel in Figma Using Smart Animate | Prototyping Tutorial — Transcript

Full transcript

1. 0:00[Music]
2. 0:06hi everyone
3. 0:08welcome back to our Channel
4. 0:10today we have a unique figma tutorial
5. 0:12ready for you
6. 0:13we're going to create a circular slider
7. 0:15for a website's hero section so get your
8. 0:18figma file ready and let's dive in here
9. 0:21we have our basic layout for the hero
10. 0:23section already set up just beneath that
11. 0:26you'll see we have a few images of
12. 0:28smoothie bowls and fruits ready to go
13. 0:30the first step is to create a circle
14. 0:33that is going to serve as the base for
15. 0:35our rotating Carousel of smoothie bowls
16. 0:38now let's go ahead and copy all the
17. 0:41Smoothie Bowl images into our circle
18. 0:42make sure to distribute them evenly
19. 0:45around the circle so we can create a
20. 0:46good flow for our slider
21. 0:50all right
22. 0:59once we have all our bowls nicely placed
23. 1:01around the circle we're going to select
24. 1:04all these images along with the circle
25. 1:06itself and create a group now move this
26. 1:09group into the hero section frame
27. 1:12carefully position it so that we're only
28. 1:14able to see the pink bowl at the
29. 1:15Forefront
30. 1:18next we're going to give our Circle a
31. 1:20bit of color let's go with a vibrant
32. 1:22pink now let's go back to our collection
33. 1:25of smoothie Bowl images
34. 1:27copy all of them and scale them down a
35. 1:29bit
36. 1:30once that's done we'll place these
37. 1:31images right below the paragraph
38. 1:34these will serve as our handy selectors
39. 1:36to switch between the bowls
40. 1:41to help our viewers know which smoothie
41. 1:44bowl is currently in the spotlight We'll
42. 1:46add a white rectangle just below the
43. 1:48pink Bowl
44. 1:54finally We'll add some drop Shadows to
45. 1:56all the bowl images this will give our
46. 1:59design a more 3D and interactive feel
47. 2:19[Music]
48. 2:22now we're going to duplicate the frame
49. 2:24select the circle with all the bowls and
50. 2:27rotate it just enough so that you can
51. 2:28see the next bulb that's to the right of
52. 2:30the currently displayed Bowl you might
53. 2:32need to play around with the positioning
54. 2:34a bit to get it just right and here's a
55. 2:36little trick let's also rotate the
56. 2:39individual Bowl
57. 2:40this will give the effect of the bowl
58. 2:42also turning as it moves into view
59. 2:44now we're going to tweak the colors and
60. 2:47visuals a bit to bring everything
61. 2:49together
62. 2:50first let's adjust the colors of our
63. 2:52page to match the new smoothie Bowl
64. 2:55this can really tie the design together
65. 2:57and create a cohesive look and feel
66. 3:00next we'll play around with the Shadows
67. 3:02a bit
68. 3:14we're also going to change the color of
69. 3:17the paragraph
70. 3:18with our light background we want to
71. 3:20make sure the text has enough contrast
72. 3:22to be easily readable
73. 3:24for the Final Touch let's switch out the
74. 3:26fruit in the background
75. 3:27we'll replace it with these mango pieces
76. 3:30to match our smoothie
77. 3:35change the pass-through property to 20
78. 3:37so that the fruit doesn't overshadow the
79. 3:39text
80. 3:42foreign
81. 3:47moving forward
82. 3:49duplicate the frame we've just created
83. 3:52select the circle that includes all the
84. 3:55bowls and once again rotate it just
85. 3:57enough to bring the next bowl from the
86. 3:58right into view
87. 4:02let's match the page colors to this new
88. 4:03bowl and move the rectangle indicating
89. 4:06the selected Bowl under the next Bowl
90. 4:11[Music]
91. 4:13tweak the Shadows a bit to ensure they
92. 4:15match with the new color changes
93. 4:18foreign
94. 4:23ly replace the background fruit to match
95. 4:26the Smoothie Bowl currently displayed
96. 4:50now repeat the entire process for the
97. 4:53last frame with a blue smoothie Bowl
98. 4:57foreign
99. 5:01don't forget to adjust the color shadows
100. 5:04and background fruit accordingly
101. 5:12[Music]
102. 5:39fantastic
103. 5:40to make our design even more vibrant
104. 5:42let's apply a drop shadow to all the
105. 5:44bowls currently in view
106. 5:47this will give us a nice 3d effect
107. 6:03[Music]
108. 6:06and now on to our final and most
109. 6:09exciting part where we'll be creating
110. 6:11interactions between frames
111. 6:14this is where we truly bring our design
112. 6:16to life switch over to the Prototype tab
113. 6:19in the first frame select the second
114. 6:21bowl click on the plus sign and drag it
115. 6:24to connect it with the second frame
116. 6:26choose on click as the trigger smart
117. 6:28animate for the animation ease out for
118. 6:31the easing and set the duration to 600
119. 6:33milliseconds let's ensure that our users
120. 6:35can also go back to the previous Bowl
121. 6:37not just forward use the same details as
122. 6:41before enabling our design to move both
123. 6:43ways
124. 6:48let's continue by creating an
125. 6:50interaction between the second and third
126. 6:52frames
127. 6:53keep the interaction details consistent
128. 6:55with what we used before
129. 6:58and for our final interaction let's
130. 7:00connect the third and the last frames in
131. 7:02the same way
132. 7:04now let's preview our prototype and see
133. 7:07how it performs
134. 7:13the Smoothie bowls are rotating
135. 7:15beautifully when we're moving forward
136. 7:17but not when we're going back
137. 7:19but we can fix this easily
138. 7:22the trick here is to adjust the
139. 7:24positions of bowls in subsequent frames
140. 7:26for instance
141. 7:28if we want the pink Bowl to rotate when
142. 7:30going back we need to rotate it slightly
143. 7:32in this Frame
144. 7:34now when we preview the Prototype again
145. 7:37it works as expected
146. 7:40repeat this process for all the bowls to
147. 7:42ensure a smooth rotation in both
148. 7:44directions with that final tweak we've
149. 7:47created a beautiful engaging animation
150. 7:49that will truly bring your designs to
151. 7:51life don't forget to subscribe to our
152. 7:54channel for more creative content and
153. 7:56inspiring design ideas