Speaker 1: I'm going to show you a simple and effective way to create the illusion of having a 3D rotating object right inside Figma without any plugins, videos or loaded animation. And the best part is it's super easy to do even for complete beginners. So without further ado let's jump into the video and I'll show you how. There are a couple of things we'll need to get first in order to make this all work and first off we need to find a realistic mock-up of a can or a bottle or any object that you want to 3d animate. I found mine on freepeak so let's go to freepeak let's type in a realistic can mockup and see if we can find something here. As you can see here there are a number of assets that you can use for free so if you can't afford a subscription just click free license here and then try to find a psd mockup because we'll be uploading this file to Photoshop and exporting this as a PNG. But you might as well go to a site like rays.bg and then upload your JPG image here like I did with the fruits here but we'll go back to that in just a second. Once you download your mock-ups you'll have to open them in Photoshop like I said or go to rays.bg, upload the JPG file here and then export a mock-up without the background. Next up we'll need a colorful label for our can mock-up. So let's type in fruit soda label and for this we'll need a vector. So let's click over to the vector files and try to find the label that you would like to use for your design. These are the mock-ups that I found. So I just replaced the fonts here, changed some colors and removed the background. So what I did, I just selected them all, command C, I went to Figma and then command V pasted them inside and just replaced the fonts like you can see here They didn't really change so we we might want to go over and then replace The fonts with the fonts that you want to use For your final design and lastly now that we have our labels and we have our mock-up We will need a number of fruits and for this you can go to free pick as well. Type in floating fruits and in our example we we went with the green pear, sweet apple and the exotic mix. So I tried to find these exact fruits. We used assets like the apples here, the passion fruit and the pears. So what I did is I removed the backgrounds, copy pasted single fruits and dropped them onto our Figma file. Right, so I ended up with three labels and a number of fruits that I put inside of a group, rotated them, switched them around to make them look like they're floating around our can, creating a nice composition which you will see in just a second. Right, so let's add a frame, click F, choose the desktop frame and place it right around here. And the first thing that we'll start with is our can mock-up. So let's go over to Photoshop and let's copy and paste our image. So that was my can. Let me just place it inside of here. We can resize it. What I'm doing here is I'm clicking command and just dragging with my mouse to resize the object here. And let's make it much smaller, maybe around 400 pixels of width will look just fine. And here's where the magic happens. To create an illusion of a 3D rotating can, we'll combine three different labels and place them in a row next to each other so that each label will span across the entire can and this will require a bit of adjusting, a bit of modifying and the size and the position of your labels on the can. Okay, so let's start by just placing all these labels into another frame. So let's hit option command NG, call it, we can call it labels, resize them a little bit because we'll need to leave some space on the sides and we also need to add some space on top and below our labels because the label will be sitting right around here but there will be also some space left on the bottom and on the top. Let's resize it, maybe I'll move it over here and let's add some rectangles. So what we might do is add a fill just so we know where's the bounding box of our frame. Let's add a rectangle place it behind option command square bracket and try to position it right on middle and let's change the fill and to change the fill you can click I and then pick a color from your label. Let's maybe go for something like this. Okay let's copy it over click I again, pick a color, we'll resize them in just a second and let's duplicate it again and pick a color from this fruit and let's try to resize our frames. Say we want to leave around 20 pixels on the left and on the right so that will be 424 and we'll do the same here, 424, 424, try to position our labels in the right place. Now let's group them and place them side by side and now we can resize our frame holding command and this way it should be working just fine. So to make this work we will need two layers of a mock-up can because we'll be creating a mask out of one of them. So let's hit command and G and D, sorry command and D. We might as well create a component out of these labels because if we need to resize them, change the colors, realign them, it's much easier to make some changes on the master component first and you will see the changes take place on your frames at the same time. You might want to resize them just a little bit. Now hit command and C, command and B. Select your labels and this duplicate can. Click on the users mask and now we'll need to resize our labels and make them fit just right. Let's say here and resize it. You know And what let's place it in the middle, but let's actually change the size of our background. Maybe we would want to add around 20 pixels to each side and then realign them, these labels inside of these rectangles and then resize our frame. It's a lot of manual work, just always like this. So it's a lot of testing, iterating, trying again. So let's select our labels and try to position them one more time. And this looks better. And what we need to do now is we need to go to the, make sure you have the label selected, go to the layer and change the layer to multiply. And this will make your label blend in with the background and the material of your can much better. you can see here there are some highlights visible on the label. So it looks like it's actually a part of this can. Now what we need is to finish our composition. Let's select the frame, pick the color from let's say from our cider, maybe even try to make it a little bit more vibrant, something like this. We can add a shadow below our can. So let's say we want to cast the shadow in that direction and this is a nice little trick of you know when you're creating shadows just go to the fill change the fill from solid to linear place your first point right below the can and the transparent point you know on the far end make it black place it below your two of your elements and and then add a slight layer blur, maybe like 20, maybe 15, and try to resize it. You can click Enter, and then maybe add a point just to make it more realistic. Play around with the position of your shadow and reduce the opacity by hitting keys on your keyboard, like let's say 40%. And let's say we are happy with that. we want to add a text in the background. Let's hit T on your keyboard, add a, let's say a text like Apple. Let's resize it just so it fits the entire frame. Maybe not the entire frame, right around here. And let's make the fill white. Push it all the way back and see if it feels right, if we want to change anything else, or we're happy with it. And we'll be adding some transitions later on. Right now, we just want to create the composition. So I had a header already created. I took one of the previous designs we made and just pasted it in here. And if you want to see how to create a responsive header, just watch one of those tutorials in the top right or top left or top right and top left. And yeah, watch it and see how I did it. And this is by no means the final design. It's not, we're not interested in UX. We're not interested in the functionality. This is just to show you what's possible inside of Figma and how you could create a 3D effect yourself. So if you're interested, if it's good UX, probably not. We would probably use a different design, but it's a nice little trick to add some life to your designs and to leave a lasting impression on your colleagues or maybe on your clients when you're presenting your work. Let's grab our fruits and paste them onto a design and rotate them slightly. And we can copy this shadow, modify it just slightly, change the opacity and make it feel like these apples are actually, you know, floating and are part of the composition. So this will be our first design. Now let's go over to the second one. This is the magic here. So let's select our mask group, go into labels and holding shift and space bar because we want to lock it in one place, drag it over. And you can see now that it looks like it's rotating, but it's not rotating. It's just, you know, we're just rotating it by, well, changing the position of your labels. And it's giving the illusion, the impression of it being rotated. So let's select our fill one more time. Let's pick a color. I'll just manually adjust the color here. Let's select our fruits, push them downward and let's select these passion fruits now. Paste them onto our design and let's go back to our first design because we need to have these fruits fly in and then drop below and these will be placed from the above. And lastly we will need to create our pairs. So let's copy our first design. One more time, go to the labels, hit shift and spacebar and rotate your can to the left. Fix your position, select your background, hit I on your keyboard and pick a color from your design and then manually change the fill, something different and let's push these apples up and let's grab our pears and paste them onto our design. We can also paste these pears here and then push them down and here we might also add the background sliding animation just so when you're rotating your cans, your background is sliding alongside with your cans, we need to create a frame. So let's hit F on our keyboard, go to the desktop and then duplicate it two times. And have these three frames placed side by side. And now let's pick colors from the first one, so from the pear, apple, passion fruit. Now select all of these frames, hit option command NG, let's call it background slider and resize it holding command and now clip your content. Select your background slider... seriously, we couldn't find a better time to do it. Okay, I'll try to make it... I'll try to make it fast. Select the slider, place it inside of your frame, position it in the center, place it all the way behind and then copy your background slider, paste it inside here, push it all the way back now click enter to go inside of pure frame and hit shift and spacebar and Push it to the left Let's do the same for the last one so paste it over push it all the way to the back Enter slide it so it fits right and at this point. There's only one thing left and that's our text so let's copy this Apple text from from this design and paste paste it and place it and right beside here. We can put it into auto layout for now and let's change the text from pear, pear, apple and the last one will be exotic fruit. We want to make each of those frames at least at the size of the biggest text layer because if we clip the content to a certain point then the text will cut off. Wrap all of these text layers into separate groups so option, command, ng option command ng option command ng and make sure that they are at least uh 14 12 pixels wide so one more time we can add auto layout now make sure they're placed right in the middle of of each frame and one more time option command ng to create a frame let's call it labels and clip the content to the longest text here so let's clip it and copy command and c We can now remove this text, command and V, place it all the way behind. So just one layer above the background slider, we can resize it, place it maybe right here and then copy it from this frame, paste it in here and now click enter, slide over just So we have the apple setting in the middle, and then do the same for our first design. Let's place it behind, click enter, and then slide it over until we see pair here. And let's prototype our transitions now and see what we're standing at. Actually, this will be our first frame, this will be our second frame, and this will be our third frame. So let's click over to the prototype and start selecting each frame. So let's connect the first one with the second one. We can change the trigger to on drag and the animation to smart animate. And let's use a custom Bezier a second and a half just so we can see all of the transitions taking place. That's right. Let's repeat the same for the second frame. So let's change the trigger to on drag. Okay, I forgot to change to grab these handles here so the animation will speed up, slow down, and then speed up again. And let's select this trigger. And connect back the third frame with the second frame, with the first frame. And let's call it 3D, 3D slider. Okay, now let's click on the play button here and watch our beautiful 3D rotating animation come to life. Well, hopefully. So here's the moment of truth. So I'm dragging to the right, I'm dragging to the right again and I'm dragging to the left. It's working perfectly fine. Now I hope you enjoyed this animation. As always, don't forget to download the free files in the description of this video. You'll get access to this exact Figma design so you can play around with the design yourself and then see the prototype come to life. And feel free to watch my other tutorials to level up your designing game. I hope you enjoyed this one and if you did make sure to hit that like button, subscribe to the channel and hit the notification bell to stay in the loop for future guides and tutorials. And if you want to learn something specific make sure to drop it in the comments below and I'll be sure to line it up for one of the future videos. Now guys if you'd like to see more short form tutorials from me you can also drop by my Instagram or my Twitter and the links are in the description of this video. And And if you need some more help with figuring out the basics and foundations of designing in Figma, feel free to check out my Figma Mastery course. It contains over 10 hours of content and ends on a fully responsive landing page design and an interactive prototype we designed together from the ground up. Okay, that's it for this video. Thank you so much for watching. Stay creative, stay curious, guys. This was your Adrian and I'll see you very, very soon.