3D Interactive Animation With a Rotating Effect - Figma Prototyping Tutorial — Transcript

Full transcript

1. 0:02welcome back everyone
2. 0:05today we'll be animating a planet
3. 0:07transition right in figma
4. 0:09we've got a source file ready for you so
5. 0:11you can inspect the file and follow
6. 0:13along step by step just check the link
7. 0:16below this video download the file and
8. 0:19we're good to go alright let's Dive
9. 0:21Right In
10. 0:22as you can see we already have a
11. 0:25collection of Planet images ready these
12. 0:27images are sourced from the journey an
13. 0:30AI art generator app that helps you
14. 0:32create beautiful Unique Images in just a
15. 0:34few seconds if you're not familiar with
16. 0:37my journey or how to use it I recommend
17. 0:39to watch our mid-journey tutorial you'll
18. 0:42find the link for it in the description
19. 0:44below the video we also have a basic
20. 0:47layout for a website hero section we
21. 0:50have the name of a planet at the top
22. 0:51some information about it just below the
23. 0:54name and to add a bit of magic to the
24. 0:56design there are glows and a star system
25. 0:59in the background we'll be working with
26. 1:01all these elements throughout this
27. 1:03tutorial
28. 1:04the first step is to bring one of the
29. 1:06planets into the center of the hero
30. 1:08section
31. 1:10next we'll select two other planets
32. 1:13resize them to be smaller than the
33. 1:15central planet and place one on each
34. 1:18side of the frame they will be used to
35. 1:20switch between planets in the animation
36. 1:22adjust the positioning of the two
37. 1:24planets so that approximately only half
38. 1:27of each one is visible on the screen now
39. 1:30we're going to add names for both of
40. 1:31these planets right next to them
41. 1:33[Music]
42. 1:42with this done we're ready to duplicate
43. 1:45the entire frame
44. 1:46in the new frame we're going to replace
45. 1:49the planet in the center
46. 1:50to do this we'll add a new fill to the
47. 1:53layer click on the plus sign next to
48. 1:55fill and select an image of another
49. 1:57planet
50. 2:01we can now remove the original fill by
51. 2:04clicking on the minus sign next to it
52. 2:06make sure to change the opacity of the
53. 2:09new fill to 100 to fully display the new
54. 2:12planet now we can update the colors of
55. 2:15the shadows and blurs to match our new
56. 2:17planet
57. 2:18this creates a cool atmospheric effect
58. 2:22now we need to rotate the planet by 60
59. 2:25degrees
60. 2:27[Music]
61. 2:33let's not forget about our star system
62. 2:36in the background rotate it by 60
63. 2:38degrees but this time in the opposite
64. 2:41direction lastly to keep everything in
65. 2:43harmony we'll update the colors of the
66. 2:46blurs and also the planet's name and
67. 2:48information to match the new planet
68. 2:58moving on let's pay some attention to
69. 3:01the planets on the sides
70. 3:03the planet on the left side should be
71. 3:05updated with the image of the planet
72. 3:07that precedes the current planet in our
73. 3:09sequence similarly the planet on the
74. 3:12right side should be updated with the
75. 3:14image of the planet that follows
76. 3:18[Music]
77. 3:27once that's done it's time to duplicate
78. 3:30the frame now select the central planet
79. 3:32and give it another 60 degree rotation
80. 3:35replacing the planet is just as simple
81. 3:37as before
82. 3:39add a new fill and select the next
83. 3:41planet image
84. 3:44then remove the previous fill
85. 3:47with the new planet in place it's
86. 3:49important to keep the aesthetic
87. 3:51consistent
88. 3:52so let's update the shadows and blurs to
89. 3:55match the new planet's hues
90. 4:01don't forget to also update the planet's
91. 4:03information as for the small planets on
92. 4:06the sides they need to be updated as
93. 4:09well keeping in line with our sequence
94. 4:11of planets
95. 4:12[Music]
96. 4:16and of course we can't forget our star
97. 4:19system in the background
98. 4:21rotate it in the opposite direction by
99. 4:2360 degrees
100. 4:25now let's duplicate the frame one last
101. 4:27time and repeat the process for our
102. 4:30final planet
103. 4:31[Music]
104. 4:49once that's complete we're ready to dive
105. 4:52into the prototyping phase switch to the
106. 4:55Prototype tab on the top right of your
107. 4:57screen in our first frame select the
108. 5:00small planet on the right
109. 5:02and drag a connection line from it to
110. 5:04the second frame
111. 5:05for the interaction details select smart
112. 5:08animate with quick easing and set the
113. 5:11duration to 900 milliseconds
114. 5:14next select the planet on the left from
115. 5:17the second frame connect it with the
116. 5:19previous frame ensure to set the same
117. 5:22interaction details as before follow
118. 5:25these steps for all the frames
119. 5:28[Music]
120. 5:30thank you
121. 5:40once everything is connected it's time
122. 5:42to preview the Prototype and see our
123. 5:45animation in action if you've enjoyed
124. 5:47this tutorial and you're interested in
125. 5:49leveling up your ux UI design skills do
126. 5:52check out our ux UI design Mastery
127. 5:55course the link is in the description
128. 5:57below the video
129. 6:00foreign