Create a 3D Animated Website with Figma & Dora - No Code Required — Transcript

Full transcript

1. 0:00[Music]
2. 0:01foreign
3. 0:03have you ever wondered how to make a
4. 0:05website with 3D scroll animations
5. 0:07without using any code today we'll do
6. 0:11just that using figma Andorra before we
7. 0:14dive in make sure to download our free
8. 0:16UI ux Playbook with practical design
9. 0:19tips and tricks
10. 0:21alright let's get started we already
11. 0:24have a website design in figma if you
12. 0:27want to follow along you can find the
13. 0:29free source file in the description
14. 0:30below this video to get started select
15. 0:34the frame and open the figma to Dora
16. 0:36plugin now copy the layers to your
17. 0:39clipboard and head over to dora.run
18. 0:43Dora is awesome for Designing and
19. 0:45Publishing 3D and animated sites all
20. 0:48without a code if you don't have an
21. 0:50account yet go ahead and register for
22. 0:52free now
23. 0:53let's create a new project when you do
24. 0:56you'll notice a desktop size frame is
25. 0:59automatically created let's change that
26. 1:02to a Macbook 16 inch before we go any
27. 1:05further it's important to match our
28. 1:07frame height in Dora to the one we have
29. 1:09in figma for us it's
30. 1:135772 pixels
31. 1:15now we're going to paste our layers into
32. 1:18this new frame
33. 1:19this part might take a few seconds or
34. 1:22even a couple of minutes a quick tip
35. 1:25try unselecting the frame while it's
36. 1:27processing
37. 1:29I found that this often speeds things up
38. 1:31a bit once your design is in Dora you
39. 1:34might notice that some elements look a
40. 1:36bit off
41. 1:37feel free to adjust their position
42. 1:38delete them or even recreate them
43. 1:41directly in Dora
44. 1:44now let's enhance our design by
45. 1:47incorporating 3D models
46. 1:49head over to sketchfab.com a great
47. 1:52resource for both free and paid 3D
48. 1:55models I'm going to search for ocean
49. 1:57animals and set filters to show only
50. 2:00downloadable and animated models that
51. 2:02are free but feel free to look for any
52. 2:05specific animal you like
53. 2:10once you've found a model you like go
54. 2:13ahead and download it in glb format
55. 2:20now that we've got our 3D model it's
56. 2:23time to bring it into Dora find the 3D
57. 2:26icon in the top bar and click and drag
58. 2:28to create a 3D widget
59. 2:30once that's set up import the 3D model
60. 2:33you just downloaded every 3D widget in
61. 2:36Dora contains a built-in default camera
62. 2:39to zoom in or out just use your mouse
63. 2:42wheel if you want to rotate the model
64. 2:44left click and drag and if you want to
65. 2:47move it around simply right click and
66. 2:49drag if you prefer you can also adjust
67. 2:53the values in the right sidebar to see
68. 2:56the animation
69. 2:57select the layer right below the 3D
70. 2:59scene and toggle it on
71. 3:02next let's make sure our design looks
72. 3:05good on different screen sizes to do
73. 3:07that adjust the 3D widget frame width to
74. 3:11100 viewport width
75. 3:13now for the main attraction on this page
76. 3:15I'll be using a 3D model of a sea turtle
77. 3:19there are some free options out there
78. 3:21but for this tutorial I'm using a paid
79. 3:24one I'll include links to the 3D models
80. 3:27in the description along with some free
81. 3:30Alternatives once you've picked your 3D
82. 3:32model download it and bring it into Dora
83. 3:35just like before set the width to 100
84. 3:38viewport width and connect the 3D widget
85. 3:41with the viewport top
86. 3:42[Music]
87. 3:44now when you open the keyframe panel and
88. 3:47move the viewport your sea turtle should
89. 3:49move along with it
90. 3:51fantastic we're now ready to bring the
91. 3:54sea turtle to life
92. 3:55so first things first let's select the
93. 3:58default camera
94. 3:59add your first keyframe when the handle
95. 4:01is at zero now
96. 4:03Slide the handle over to 32 and add a
97. 4:06second keyframe here's where we get a
98. 4:09little precise adjust the values in the
99. 4:11right sidebar according to the settings
100. 4:13I'm using
101. 4:15this way you can get the same animation
102. 4:17I've got down to the Last Detail
103. 4:20next move your handle to 88 and add
104. 4:24another keyframe and tweak the values
105. 4:26again
106. 4:28[Music]
107. 4:32at 120 add your next keyframe and fine
108. 4:36tune the values these incremental
109. 4:38changes are what's going to make your
110. 4:40animation smooth and eye-catching
111. 4:45alright move the handle to 170 and yes
112. 4:50you guessed it
113. 4:51another keyframe and another round of
114. 4:54adjustments it might seem like a lot of
115. 4:56steps but the final effect will be worth
116. 4:59it
117. 5:00let's keep going move the handle to 235
118. 5:04add a keyframe and adjust the values
119. 5:08almost there
120. 5:10slide to 280 and adjust the values
121. 5:22lastly move the handle to 310 and adjust
122. 5:26the values one more time
123. 5:30[Music]
124. 5:33that's it
125. 5:34let's check out how all this effort pays
126. 5:37off
127. 5:38thank you
128. 5:40the animated sea turtle really brings
129. 5:43the design to life
130. 5:44this kind of dynamic element is not just
131. 5:47eye-catching it's also on Trend in the
132. 5:50design World offering an immersive
133. 5:52experience to your users
134. 5:54before we wrap up there's one more
135. 5:56crucial tip
136. 5:58to make your entire website responsive
137. 6:00don't forget to add constraints to your
138. 6:03elements directly in Dora this ensures
139. 6:05that your design adjusts beautifully on
140. 6:08different screen sizes
141. 6:10it's worth mentioning that Dora is still
142. 6:12evolving
143. 6:13while it's pretty awesome already you
144. 6:16might run into some limitations
145. 6:17especially when it comes to
146. 6:19responsiveness
147. 6:20but the good news is that the platform
148. 6:22is getting better all the time so keep
149. 6:25an eye out for updates as it's likely to
150. 6:27offer an even better experience in the
151. 6:30near future
152. 6:32to get your website live just hit
153. 6:34publish and that's it
154. 6:36you've transformed your static figma
155. 6:39design into a vibrant animated 3D
156. 6:42website
157. 6:43see you in the next video