3D Animated Hamburger Website Figma Tutorial Smart Animate Scroll Effect — Transcript

Full transcript

1. 0:00Hey guys, today I'm going to show you
2. 0:02how to create and design this super
3. 0:05awesome premium animated carousel inside
4. 0:07Figma. There's no plugins, no fancy
5. 0:10tools needed. A while ago, we posted a
6. 0:13short of this carousel in action, and
7. 0:15you guys loved it. So, the comments from
8. 0:17you were absolutely amazing. So, we
9. 0:20decided to create a full step-by-step
10. 0:22tutorial so that you can learn how to
11. 0:24build something similar yourself. Now,
12. 0:26the best part is it's really easy to
13. 0:28follow, even if you're a complete
14. 0:30beginner. We'll go step by step from a
15. 0:33blank canvas all the way to a smooth
16. 0:36working prototype. You'll learn how to
17. 0:38design it, animate it, and make it look
18. 0:40clean and fun to use. And if you want
19. 0:43access to the source file of this entire
20. 0:45design along with extra bonus tutorial
21. 0:48and extra tips, it's all available for
22. 0:50our Patreon members. The link's in the
23. 0:52description if you want to check that
24. 0:54out. And hey, I'd seriously love to see
25. 0:57what you create with this. So, if you
26. 0:59post your version anywhere on social
27. 1:01media, just tag us so that we can check
28. 1:03it out and share some love. All right, I
29. 1:06am super excited. So, let's not waste
30. 1:08any more time and let's get into it. All
31. 1:10right, before we jump into the actual
32. 1:12design, we're going to prep everything.
33. 1:14Our typography, colors, icons, and
34. 1:16images. It might feel like a small step,
35. 1:19but this will actually make the whole
36. 1:20process way faster and smoother. We'll
37. 1:23be using two fonts for this project.
38. 1:25Oswald and Inter. Both are Google fonts.
39. 1:28So if you don't have them, you can just
40. 1:30download them for free.
41. 1:32Now, we aim to have a bold yet luxurious
42. 1:35feel. So for the headings, we'll be
43. 1:37using a font called Oswald in all caps.
44. 1:40We're going to follow a simple naming
45. 1:42style for all our text like heading XL,
46. 1:45heading LG, and heading medium just to
47. 1:48keep things clean and consistent. So the
48. 1:51first one is heading XL font size 148
49. 1:54pixels and weight semibold.
50. 2:03Next heading LG. We'll set this to 70
51. 2:05pixels also semibold.
52. 2:19And here's heading medium. Same Oswald
53. 2:21font, but this time the weight is
54. 2:23medium, size 24 pixels. And we'll
55. 2:26increase the letter spacing to 4%.
56. 2:37Cool. All right, those are our heading
57. 2:39styles. Now on to the body text. Now
58. 2:42here we're switching to enter and we'll
59. 2:44keep the letter case as type.
60. 2:49So letter spacing is 0%.
61. 2:59We'll call this style body XL regular.
62. 3:07Font size is 28 pixels
63. 3:10and line height 160%.
64. 3:20font weight semi- bold.
65. 3:25[Music]
66. 3:29Actually, since we're using semi-bold
67. 3:31weight here, let's rename that to body
68. 3:33XL semi bold just to keep the naming
69. 3:36consistent.
70. 3:38Now, let's finish setting up the rest of
71. 3:39our body textiles. Starting with body
72. 3:42LG, we'll make one with regular weight
73. 3:44at 20 pixels.
74. 3:52Then we'll create a second version of
75. 3:54Body LG, but this time with medium
76. 3:56weight.
77. 4:05And next is body MD.
78. 4:08But first, we'll set one with regular
79. 4:10weight and a smaller size with a font
80. 4:13size of 18 pixels.
81. 4:16Then we'll duplicate that and create a
82. 4:19semi-bold version. And let's also add a
83. 4:21medium weight version just to keep it
84. 4:23flexible.
85. 4:44Lastly, we've got body SM. Font size 16
86. 4:48pixels with both regular and semi-bold
87. 4:51weights.
88. 4:56Awesome.
89. 5:07All right, we have the typography now.
90. 5:10All done. Everything styled, named, and
91. 5:13ready to roll.
92. 5:19Now, let's add some flavor. It's color
93. 5:21time. So, let's set up our color
94. 5:23palette. I'm going to create a circle
95. 5:25for each color that we'll be using.
96. 5:33[Music]
97. 5:47Starting with our darkest primary color.
98. 5:49Now, this will be used for the
99. 5:50background to give everything that
100. 5:52luxury high-end feel. So, next I'm going
101. 5:56to add a neutral gray. We'll use this
102. 5:59for borders and outlines on some of the
103. 6:01UI elements.
104. 6:04All right. Now, for a light gray, which
105. 6:06we'll mostly use for the copy and small
106. 6:08labels.
107. 6:23All right. Now, let's add in our bold
108. 6:25red. This is going to be the main color
109. 6:28for for our buttons, excuse me.
110. 6:39And I'll also add two creamy colors. One
111. 6:42of them will be used for button
112. 6:44backgrounds and the other one for
113. 6:45headings.
114. 6:59Cool. All right. Now, let's move on to
115. 7:01our complimentary colors. Now, first a
116. 7:04light green. We're going to use this to
117. 7:05highlight a few feature sections.
118. 7:14Then a light red again mainly for
119. 7:16accents or uh decorative elements.
120. 7:29Next is a pastel yellow
121. 7:39and then a slightly softer yellow just
122. 7:42to give us uh some flexibility in tones.
123. 8:01Adding a light pink here as well.
124. 8:05And let's do one more. A nice soft light
125. 8:08orange to round out the palette.
126. 8:14Perfect. Awesome. All right. Cool. So,
127. 8:16we got our colors in place and ready to
128. 8:19use. Let's move on to images.
129. 8:36I'm going to add in a floating hamburger
130. 8:38image here. This is the one we're going
131. 8:40to animate later. All right, just so you
132. 8:42know, you can find similar images on
133. 8:44Freepick or Invato. just search for
134. 8:47floating burger or burger layers. But if
135. 8:50you want to use the exact same image
136. 8:51here that I'm using, so there's a free
137. 8:53download in the description, just scroll
138. 8:55down and grab it.
139. 8:58Now I'll drop the layered hamburger in
140. 9:00the frame.
141. 9:11As you can see, this image has all the
142. 9:13layers separated. the bun, meat,
143. 9:15lettuce, tomato, everything is in its
144. 9:17own layer. Now, that's going to be
145. 9:20really important for the animation
146. 9:21later. So, make sure your burger is
147. 9:23layered, too. If you're using an image
148. 9:26that is not layered, we've included a
149. 9:28bonus Photoshop tutorial for our Patreon
150. 9:31members showing you exactly how to
151. 9:34separate layers easily. Plus, you'll get
152. 9:36this full project file and a detailed
153. 9:38tutorial on how we generated this kind
154. 9:41of image using chat GPT prompts. Now, if
155. 9:44you haven't grabbed your image yet, feel
156. 9:45free to pause here and either find one
157. 9:47online or download the one from the
158. 9:49link. All right,
159. 9:52cool. So, now that we've got our images
160. 9:54in place, the last thing to prep is our
161. 9:56icons.
162. 10:01Now, for this project, we are grabbing
163. 10:03all of our icons from Phosphor Icons. It
164. 10:06is a great free site where you can
165. 10:08customize the style, size, and color. So
166. 10:13let's start with the first one. We'll
167. 10:14search for fire.
168. 10:19We are choosing the filled style,
169. 10:21setting the size to 24 pixels,
170. 10:26and clicking copy to clipboard.
171. 10:30Then we'll head over to Figma and paste
172. 10:32it right in.
173. 10:40Now we'll repeat this same process for
174. 10:42each icon we need in the design.
175. 11:56[Music]
176. 12:36And here's the last one grain. Same
177. 12:39deal. Copy and drop it into the frame.
178. 12:46And that is it. Our typography, our
179. 12:48colors, our images, and icons are all
180. 12:52ready to go. The next move is a pro tip
181. 12:56that is actually going to save you
182. 12:57hours. Trust me on that. So, we're
183. 12:59setting up text styles and color styles
184. 13:01so that you can update your designs in
185. 13:03seconds, not hours. So, watch this.
186. 13:07I'm selecting our first heading. Now,
187. 13:09over in the text panel, click on the
188. 13:11style icon, these four little dots here.
189. 13:14Then, hit the plus button. Name it
190. 13:16heading XL or whatever you want to call
191. 13:18it, and click create style. Boom. That's
192. 13:23now a reusable text style, and it shows
193. 13:26up in the design panel, too. Now, we'll
194. 13:29do this for every text style that we've
195. 13:31created. Heading LG, body, XL, you get
196. 13:34the idea.
197. 14:03[Music]
198. 14:54and here's why this matters. So, say you
199. 14:56decide to change your font later. If you
200. 15:00set this up right, you can only change
201. 15:02it once. And Figma updates every single
202. 15:05instance in your design. So there's no
203. 15:08more clicking through every screen. It's
204. 15:10fast. It's clean. And honestly, it's
205. 15:13it's how real designers work. And last
206. 15:16one here. And then we are done with
207. 15:18textiles.
208. 15:35All right. Now, let's do the exact same
209. 15:38thing for our colors.
210. 15:42Select each color, click on the style
211. 15:44icon, hit plus, and name them whatever
212. 15:48works for you, like primary, secondary,
213. 15:50or something more specific.
214. 16:00And done.
215. 16:11[Music]
216. 16:29Having
217. 16:59these color styles uh set up will
218. 17:01actually make things faster later on.
219. 17:03And I promise it'll save you more than
220. 17:04once.
221. 17:44and done. So, we've got them all saved
222. 17:48as color styles. Now you'll see them all
223. 17:50nicely listed in the right panel. Clean
224. 17:53and organized. Looks super professional.
225. 17:56And all right, we can finally start
226. 17:57designing our first screen. Now I'm
227. 18:00hitting the frame tool and selecting the
228. 18:03MacBook 16in preset.
229. 18:13Now, you don't have to do this part, but
230. 18:15I'm changing the height to 992 pixels.
231. 18:18just so everything fits nicely on my
232. 18:20screen when I present later. All right,
233. 18:23let's set the mood. I'm applying our
234. 18:25pure black from the color styles as the
235. 18:27background. Now, I'll hit T for text and
236. 18:30type out our main heading, Crown Burger.
237. 18:40So, for this, I'm using our larger text
238. 18:42style heading XL and aligning it to the
239. 18:45center of the frame. So, let's give it
240. 18:47some contrast. I'm applying our light
241. 18:49cream as the text color.
242. 18:56And now, just above that, I'm adding a
243. 18:58smaller heading, this week's favorite.
244. 19:06Now, this one uses the heading medium
245. 19:08style with a light gray color.
246. 19:14And below our main heading, I'm dropping
247. 19:16in a quick value prop.
248. 19:23A premium burger that delivers all the
249. 19:26flavor you crave.
250. 19:29Made with healthier ingredients you can
251. 19:31trust.
252. 19:42Cool. Sounds good. Clean and clear. It's
253. 19:44what we're going for.
254. 19:48And now I'm going to select all three
255. 19:50text layers and apply an auto layout
256. 19:52using shift + a.
257. 19:59So let's set a 12 pixel gap between the
258. 20:01main heading and the paragraph.
259. 20:04And that is it. Cool. The hero section
260. 20:08is is starting to take shape. So now
261. 20:10let's build out the navigation for our
262. 20:12website.
263. 20:21For the menu items, I'm using our body
264. 20:23medium textile with a medium weight
265. 20:26[Music]
266. 20:31and applying our light gray as the text
267. 20:34color. And the first nav item is order.
268. 20:38Then find restaurant
269. 20:42offers
270. 20:46menu
271. 20:53delivery
272. 20:58and more.
273. 21:00I'll select the last three items and
274. 21:02apply auto layout and then set the
275. 21:06spacing to 54 pixels.
276. 21:09I'll do the same for the first three on
277. 21:11the left.
278. 21:13Now, let's make space in the middle for
279. 21:15our logo.
280. 21:19I'm going to create um something a bit
281. 21:21custom here. So, I'll type out BKG using
282. 21:24odd oswald, excuse me.
283. 21:35and set the size to 18 pixels.
284. 21:45Then what I'll do is I'll draw a
285. 21:47horizontal line with round edges.
286. 22:04rounded edges just like that. Yep.
287. 22:12And letter spacing to zero. Font weight
288. 22:15to semi-bold.
289. 22:28Now I'll bring in the fire icon we
290. 22:30downloaded earlier and give it our bold
291. 22:33red color to just spice it up.
292. 22:37Cool. I'll wrap the whole logo in an
293. 22:40auto layout and add some padding.
294. 22:56Heat. Hey, Heat.
295. 23:24and set the corner radius to 16 pixels.
296. 23:44Let me just tweak that spacing a bit.
297. 24:27All
298. 24:38right, cool.
299. 24:40Yeah, that looks nice. Cool. I'll align
300. 24:44it with the menu items and apply auto
301. 24:47layout to the full nav row.
302. 25:06To make sure the logo stays perfectly
303. 25:08centered, we need to match the width to
304. 25:11the sorry, we need to match the width of
305. 25:13the left and right menu sections. And
306. 25:15once that's balanced, we can center line
307. 25:18everything nice and cleanly.
308. 25:30Now, let's build our buttons. One for
309. 25:32signup and one for the shopping cart.
310. 25:43For both, I'm using a semi-bold font,
311. 25:47wrapping them in auto layout, and
312. 25:48setting the padding to 24 pixels
313. 25:50horizontally and 12 pixels vertically.
314. 25:55The first button gets a primary red
315. 25:58fill, and I'll set the text color to our
316. 26:02secondary cream. I'll also give it a
317. 26:05nice rounded look with a 50 pixel corner
318. 26:09radius.
319. 26:11Yep.
320. 26:12Now for the second button. So for the
321. 26:14second button, we'll use the cream color
322. 26:16fill. And I'll drop in our shopping cart
323. 26:18icon next to the text.
324. 26:40All right, I'll apply an auto layout
325. 26:42with 24 pixel spacing between the icon
326. 26:44and text
327. 26:50and align it with the rest of the
328. 26:52navigation.
329. 26:55And that's our navbar. There we go.
330. 26:58Clean, balanced, and ready.
331. 27:01So, let's just nudge our main heading
332. 27:04and supporting text a little higher just
333. 27:05to give it just give that layout more
334. 27:07breathing room.
335. 27:25And now I'll add just a a subtle spark
336. 27:28graphic just right here. Just a small
337. 27:30touch, but it adds a bit of personality
338. 27:32and motion to the uh hero section.
339. 27:44That's looking slick already. Cool.
340. 27:48All right.
341. 27:50All right. Now, the fun part. Let's
342. 27:52bring in our delicious hamburger. So,
343. 27:55I'm dragging it into the frame. And
344. 27:57since all layers are separated, we can
345. 27:59animate and style them individually.
346. 28:21So, first I'll go layer by layer and
347. 28:23apply a soft drop shadow to each one.
348. 28:27Now, this adds depth to make the burger
349. 28:29feel more real. Now, I'm not being too
350. 28:31precise with the values here. I'm just
351. 28:33tweaking it until it feels right.
352. 28:35And honestly, that's the beauty of it.
353. 28:37So just trust your eye and adjust until
354. 28:39it has the weight and the vibe that you
355. 28:41want.
356. 28:57[Music]
357. 29:20Hey.
358. 29:28Hey. Hey.
359. 30:30Now, let's give the whole burger a bit
360. 30:32more spacing. I want it to feel open and
361. 30:34stacked, but not squished.
362. 31:05[Music]
363. 31:09I'll group all the layers just for a
364. 31:11second so that I can center align the
365. 31:13burger in the frame. Then ungroup them
366. 31:15again. It's important that the layers
367. 31:18stay ungrouped since we'll animate each
368. 31:20part individually later. So, next I'm
369. 31:23dropping in a light effect over the
370. 31:25burger. This is just um a subtle
371. 31:28highlight to make it glow a little bit
372. 31:30and feel more polished. So, I won't
373. 31:32create it from scratch here, but this
374. 31:33will be available to our Patreon members
375. 31:35in that source file.
376. 31:45And that soft shine makes a huge
377. 31:48difference. The burger already feels
378. 31:49more dynamic and alive, which is great.
379. 31:52Okay, the next thing we will create is a
380. 31:54scrollable bar. So, let's draw a
381. 31:57rectangle. This will be used for
382. 31:59scrolling and animating the design.
383. 32:05Let's do it with 8 pixels and a height
384. 32:07of 660
385. 32:10pixels.
386. 32:21We'll add a creamy color and reduce the
387. 32:23opacity to 14%.
388. 32:26Now we'll position the bar to the edge
389. 32:28of the screen. 8 pixels of distance
390. 32:31should be good.
391. 32:37Let's actually increase the opacity to
392. 32:3818% to make it more visible. All right.
393. 32:41And that's better.
394. 32:46So, we'll grab the existing bar, copy
395. 32:48and paste to create a smaller one. We'll
396. 32:51reduce the width to 4 and height to 218
397. 32:55pixels.
398. 32:56And we'll also make it round. For the
399. 32:59color, we'll select secondary cream.
400. 33:03We'll place that inside our main bar,
401. 33:04which we will also make round.
402. 33:12Fantastic.
403. 33:15And there it is. Our first screen is
404. 33:18done. If you made it this far,
405. 33:20seriously, that is a win. You built
406. 33:22something clean, custom, and full of
407. 33:26personality. But we're not stopping
408. 33:28here. And by the way, if you are
409. 33:30enjoying this tutorial so far and you're
410. 33:32thinking, "Wow, this looks amazing, but
411. 33:35how do I actually get good at making
412. 33:37things like this on my own?" Well, then
413. 33:40let me save you a ton of time and
414. 33:42frustration. Our UI UX playbook was made
415. 33:45for exactly this. For people who want to
416. 33:48learn how to build modern, clean UI
417. 33:51without second-guessing every layout,
418. 33:54every font, or spacing decision, over
419. 33:5720,000 designers, developers, and
420. 33:59marketers have downloaded it already,
421. 34:01and it's rated five stars because it
422. 34:04actually helps. We've received some some
423. 34:06really awesome great reviews on Trust
424. 34:09Pilot, so feel free to check them out
425. 34:11and see what our students are saying.
426. 34:13It's packed with top UX and UI design
427. 34:16tips from senior product designers, all
428. 34:18broken down in a way that is super easy
429. 34:21to apply. There's a link in the
430. 34:23description, so go ahead and grab it now
431. 34:25and uh you can keep following along with
432. 34:27this tutorial knowing that you have the
433. 34:30solid design foundation behind you ready
434. 34:32to go. So, let's get into the second
435. 34:34screen.
436. 34:36Now, truly, this is where the magic
437. 34:38happens. This is the way the the
438. 34:40animation actually works. And it's
439. 34:42actually super simple. When the same
440. 34:44element exists on both frames, but its
441. 34:47position or opacity changes, then Figma
442. 34:51animates between them. So, let's test
443. 34:53that.
444. 34:55So, on the first screen, we have our
445. 34:56title centered at 100% opacity. On the
446. 35:00second screen, I'll move it slightly and
447. 35:01reduce the opacity.
448. 35:03And that's it. When we prototype, Figma
449. 35:05will handle the animation between those
450. 35:08two states. But of course, we will still
451. 35:10need to set that animation.
452. 35:20[Music]
453. 35:27Next, we want to animate the scroll bar,
454. 35:29but also set the touch points that when
455. 35:31dragged on will trigger the animation.
456. 35:34So, I'll copy the scroll bar from screen
457. 35:36one, paste it into screen two.
458. 35:42Now, we'll create an artificial frame.
459. 35:45This will be the touch target. In the
460. 35:47prototype tab, I'll drag the connection
461. 35:50to the second screen. Then, set the
462. 35:53trigger to on drag. Animation type smart
463. 35:56animate. Easing set to ease in and ease
464. 36:00out. and duration to 800 milliseconds.
465. 36:05Next, let's prepare the horizontal
466. 36:07scroll effect. So, on the second screen,
467. 36:10I'll take the inner bar and shift it to
468. 36:13the center. That gives us space for
469. 36:15three horizontally scrolling sections.
470. 36:18So, what I'll do is I'll also add a
471. 36:20second artificial frame on the top half
472. 36:22of screen 2, just like before, and apply
473. 36:26the exact same prototype settings.
474. 36:38And let's preview that.
475. 36:42So, the titles sliding and fading. The
476. 36:44scroll bar moves smoothly. This is
477. 36:47actually looking real juicy. I like
478. 36:48this. Um, so now let's bring the
479. 36:51hamburger to life. So I'll start by
480. 36:54taking the bun layer and moving it up
481. 36:56the navigation bar.
482. 37:03Then grab the salad layer, place it
483. 37:06below the bun with a nice amount of
484. 37:08space.
485. 37:20Yeah, we'll fine tune that later.
486. 37:28[Music]
487. 37:31Repeat that for each layer. Tomato,
488. 37:34cheese, patty.
489. 37:47Spacing them vertically so that the
490. 37:49stack feels balanced.
491. 38:00And let's scale the entire burger up a
492. 38:03bit to make it pop.
493. 38:12Cool. So, I'll select all the layers,
494. 38:14increase the size just slightly, and
495. 38:16tweak the spacing just to make it feel
496. 38:18open and natural.
497. 38:46Now I'll move the whole burger stack to
498. 38:48be roughly centered vertically. Okay.
499. 39:09Let's preview that.
500. 39:16Perfect.
501. 39:18Now, now for the shine effect. So, just
502. 39:20a subtle highlight to make everything
503. 39:23feel more premium. I'll select the shine
504. 39:26layer on screen two. Move it slightly up
505. 39:29and to the side. Just enough to catch
506. 39:31the eye.
507. 39:33Preview that.
508. 39:36[Music]
509. 39:39Nice. Awesome. Yeah, just a little
510. 39:41movement, but it just adds so much for
511. 39:43that. Now, let's add a soft base under
512. 39:45the burger to anchor it visually.
513. 39:55I'll grab a circle, stretch it to 620
514. 40:00pixels wide by 62 pixels high, and place
515. 40:04it just below the burger.
516. 40:14Then I'll hit that to send it behind.
517. 40:25Set opacity to 13%.
518. 40:28And center align it.
519. 40:32Now I just realized that the burger is
520. 40:34not perfectly centered. So that's no
521. 40:35problem. What I'll do is I'll group all
522. 40:37the layers. align horizontally
523. 40:40and ungroup immediately. Now, that's
524. 40:42important because the animations won't
525. 40:44work with groups.
526. 40:46So, let's also add a slight shadow under
527. 40:49the burger to add some of the subtle
528. 40:51depth.
529. 41:05Cool.
530. 41:14Love that.
531. 41:19Now I'll copy that ellipse to the first
532. 41:21screen. Shrink it down.
533. 41:31Send it to the back.
534. 41:38Set its opacity to zero
535. 41:44and push it a bit lower using the arrow
536. 41:46keys.
537. 41:51Shrink it down.
538. 41:55Now, this way when we animate, it'll
539. 41:57fade and scale into view.
540. 42:05So, let's preview again.
541. 42:09Yeah, that's looking amazing. Cool.
542. 42:13Yeah, the shadow, the shine, the stack.
543. 42:15Cool. It all just works. It's great.
544. 42:26Last step for this section. Let's bring
545. 42:28it home. We are going to bring in some
546. 42:30decorative elements to really make this
547. 42:33layout shine. So, I'm grabbing our
548. 42:35tomato and basil graphics and I'm going
549. 42:37to be placing them around the burger.
550. 42:41And these little details add movement
551. 42:43and give the whole composition more
552. 42:45personality. I'll flip a few of them and
553. 42:48resize others. So, just to break that
554. 42:50symmetry and add some variation. Now,
555. 42:53that way the layout feels more natural
556. 42:55and dynamic. You can really get creative
557. 42:57here. Try different leaves. Try
558. 42:59different ingredients or whatever fits
559. 43:01your own theme.
560. 43:15Now, let's take it up a notch with a
561. 43:17blur effect. So, a few of these elements
562. 43:19will be blurred slightly just to create
563. 43:22some depth and make the burger feel like
564. 43:24it's popping off the screen. So once
565. 43:26everything looks good, I'll select the
566. 43:28elements and copy them back into the
567. 43:31first frame.
568. 43:44Now, here is where the animation magic
569. 43:46kicks in. So I'm going to rotate each of
570. 43:49these elements in the first frame and
571. 43:51reduce their opacity to zero. So that
572. 43:54way when we transition between screens,
573. 43:57they'll fade and rotate into place.
574. 43:59Subtle, but it's really effective.
575. 44:08So let's preview that.
576. 44:11Beautiful.
577. 44:13Awesome. Yeah, they're rotating in
578. 44:14cleanly. Uh but we're not done yet. So
579. 44:17now I'll just adjust their position in
580. 44:19the first frame, pushing them further
581. 44:21out from the center. So that extra
582. 44:24movement just gives them more travel
583. 44:25space during the animation, which makes
584. 44:27the entrance feel more natural and
585. 44:29impactful
586. 44:39and let's preview again.
587. 44:42Wow, that adds that adds so much depth
588. 44:45and energy. So the whole scene feels
589. 44:47really alive right now. So, let's let's
590. 44:51now highlight some of the premium
591. 44:52qualities of this burger. What we're
592. 44:54going to do is create ingredient
593. 44:56highlight pills. They're little floating
594. 44:58callouts to that actually explain what
595. 45:01makes this burger so special.
596. 45:07The first one, organic sesame seed bun.
597. 45:12Now, that tells our users this isn't
598. 45:14just any bun. It's made from healthy
599. 45:16organic ingredients. I'll wrap the text
600. 45:19in an auto layout and give the pill a
601. 45:23fully rounded shape. Setting the corner
602. 45:25radius to 55 pixels.
603. 45:28For the fill, I'll start with our light
604. 45:30cream color, but convert it to a linear
605. 45:33ingredient. Sorry, linear gradient to
606. 45:36give it uh depth.
607. 45:50And I'll lower the opacity
608. 45:53to 16% so that it's visible but soft.
609. 45:57Then I'll adjust the gradient direction
610. 45:59until it feels right.
611. 46:03[Music]
612. 46:10Next, I'll add uh just a soft stroke,
613. 46:13also using a gradient, and play with the
614. 46:15opacity until it blends just right.
615. 47:07And final touch, I'll add padding 16
616. 47:10pixels on all sides.
617. 47:24Now I'll bring in our bun icon. I'm
618. 47:27going to place it in the pill and set
619. 47:29its color to our light orange.
620. 47:53I'll also change the pill text color to
621. 47:55secondary cream to keep it consistent.
622. 47:59Great. Awesome. Now I will duplicate
623. 48:01this pill to create a second one.
624. 48:06[Music]
625. 48:23So for the highlights, I'll change the
626. 48:25font style to body large medium just to
627. 48:29make it slightly bigger. Then I'll
628. 48:31repeat the same process for a third
629. 48:33highlight.
630. 49:39and and
631. 49:42all right. Now that we've got all three,
632. 49:44I'll wrap them in auto layout and copy
633. 49:46the group on the right side of the
634. 49:48burger.
635. 50:01We'll make sure everything is center
636. 50:03aligned on both sides.
637. 50:14[Music]
638. 50:34For the middle pill, we need to set it
639. 50:37to hug content and apply the same
640. 50:39setting to the parent auto layout as
641. 50:41well.
642. 51:40Once all the pills are placed and
643. 51:42aligned, then I'll check the positioning
644. 51:44to make sure both sides are balanced.
645. 52:05Then I'll select all the pills, copy
646. 52:07them over to the first frame, and send
647. 52:10them to the back by pressing this a few
648. 52:14times.
649. 52:16I'll make them smaller just to give them
650. 52:18some some motion in the transition.
651. 52:22[Music]
652. 52:32I'll group them quickly, align them to
653. 52:34center, and then ungroup right after.
654. 52:42So, finally, I'll reduce their opacity
655. 52:44to zero in the first screen so that they
656. 52:46fade in during the animation.
657. 52:49All right, and let's preview what we've
658. 52:51got so far.
659. 52:54All right, everything's working
660. 52:56beautifully. The highlight pills fade
661. 52:58and scale in. That's great. Gives the
662. 53:00whole burger a sense of of quality. So,
663. 53:03this is the kind of detail that makes
664. 53:04the design feel really premium. All
665. 53:07right. Now, let's set up the final
666. 53:10screen.
667. 53:26So, first we'll fold the hamburger
668. 53:28layers back to the original stacked
669. 53:29position. Then shift the whole burger
670. 53:32toward the corner to make space for
671. 53:34content.
672. 54:06I'll move the ingredient highlights too.
673. 54:08shrink them down and drop the opacity to
674. 54:110% so that they'll so that they'll
675. 54:14animate out cleanly.
676. 54:23Now, let's set up the touch point for
677. 54:26dragging. On the second screen here,
678. 54:28I'll create a drag area that will
679. 54:30trigger the transition to screen three.
680. 54:33[Music]
681. 54:45In the prototype tab, I'll connect it to
682. 54:47the third screen using the same
683. 54:49animation settings. Smart animate, ease
684. 54:51in and out, 800 milliseconds. And on the
685. 54:54third screen, I'll set the arrow I'll
686. 54:58set the back arrow to link back to the
687. 54:59second. Again, keeping the same
688. 55:01animation style.
689. 55:15Let's drop the scroll bar in. I'll move
690. 55:18it to the bottom of the main bar so that
691. 55:20it fits the layout.
692. 55:43Quick preview.
693. 55:52A, that looks smooth.
694. 56:01And next up, let's animate the floating
695. 56:03veggies.
696. 56:04I'll rotate them slightly, move them
697. 56:07closer to the screen edges.
698. 56:23and drop their opacity to 0% in the
699. 56:27screen.
700. 56:29Preview again.
701. 56:31Perfect. Smooth, clean, and adds just
702. 56:34just the right amount of movement on
703. 56:36that. That's great. And now let's add
704. 56:38the final screen content. I'll start
705. 56:41with the title using our large text
706. 56:44style. Setting the width to
707. 57:12482 pixels.
708. 57:26123% to keep it neat.
709. 57:39We'll go with the secondary cream color
710. 57:40for that. Below that, I'll drop in some
711. 57:44catchy supporting copy.
712. 58:40and then show off the reviews.
713. 58:45I'll add five stars using a new color.
714. 58:48Let's call it vivid orange. Something
715. 58:50that really just pops against the
716. 58:52background.
717. 58:54Heat. Heat.
718. 59:29and then I'll drop in the rating score
719. 59:31and number of reviews right next to it.
720. 59:35Oops.
721. 59:39And
722. 1:00:40Now let's add our two call to action
723. 1:00:42buttons, one for add to basket and one
724. 1:00:46for order now.
725. 1:00:52[Music]
726. 1:01:05All
727. 1:01:27right, I'll use auto layout to align and
728. 1:01:29space everything properly so that it
729. 1:01:31feels really balanced.
730. 1:01:47Down.
731. 1:01:53Hey.
732. 1:02:04And let next let's bring in the pricing
733. 1:02:07using a larger font style to make it
734. 1:02:10stand out.
735. 1:02:26And below that, the calorie count, of
736. 1:02:28course, just to give the user a sense of
737. 1:02:30what they're ordering.
738. 1:02:42And I'll wrap the whole info block in
739. 1:02:45some extra spacing
740. 1:02:47and add a soft stroke to frame the
741. 1:02:50section without making it too heavy.
742. 1:03:00[Music]
743. 1:04:00last alignment check and everything
744. 1:04:02should be nicely centered.
745. 1:04:04Awesome.
746. 1:04:53Now I'll copy this entire content box to
747. 1:04:56the second screen, send it to the back,
748. 1:04:58make it smaller, and reduce its opacity
749. 1:05:02to 0%. So that way it fades in
750. 1:05:05beautifully during the final transition.
751. 1:05:12[Music]
752. 1:05:47One more detail. I will change the
753. 1:05:49stroke color from light gray to dark
754. 1:05:52gray for just a bit more contrast.
755. 1:05:56Quick preview.
756. 1:06:00Ah, that looks smooth.
757. 1:06:10And we'll reposition the light so that
758. 1:06:12it sits directly above the burger,
759. 1:06:14giving that nice balanced glow.
760. 1:06:51All right, let's preview the full
761. 1:06:53experience from start to finish.
762. 1:06:59Wow,
763. 1:07:01this is looking absolutely amazing.
764. 1:07:04Yes. Awesome. Cool. Great job everyone
765. 1:07:08who has made it so far. This tutorial uh
766. 1:07:11took a lot of work. So if you enjoyed it
767. 1:07:13then support us on Patreon. grab the
768. 1:07:16source files and unlock even more
769. 1:07:18behindthe-scenes content. And again, I
770. 1:07:21would love to see what you create. So,
771. 1:07:23if you post your version, then tag us
772. 1:07:26because seriously, it means the world.
773. 1:07:28Drop some love in the comments and let
774. 1:07:30me know what you'd like to see next.
775. 1:07:32Thanks so much for watching and we'll
776. 1:07:34see you in the next one. Thanks, guys.