Create an Animated Image Carousel | Figma Tutorial

in this video I'm gonna show you how to create an animated image Carousel in figma so if you're ready let's dive in here as you can see I already prepared a few Apple watch images and also a text group that includes a title and a subtitle the first thing we need to do is to create a frame I'm going to hit a on my keyboard and I'm going to create a custom size frame let's set the width and height to 500 pixels just like that and now I'm gonna select all these images and put them inside this Frame let me move them down just like this but the point is we should only see one watch at the time so I'm gonna select this Frame 1 here and I'm going to make sure that this clip content checkbox is selected otherwise we will be able to see these watches so make sure to check this check marks okay I think we can move this image up a little bit whenever you want to move this image up you need to make sure to select all other images as well okay so I'm gonna select them all and move them up what do we need here right under this image we need to have this indicator and you may think we need to have a few circles and one rectangle but that's wrong why because look what happens here when I drag this image you see what happens this first indicator becomes a circle and this second one becomes a rectangle to create such an indicator we need to use a rectangle from the beginning we don't need any Circle so let me create a rectangle here just like this make it very small maybe 28 by 8 something like that and make it completely rounded I'm gonna put it right here and then I'm gonna duplicate it hit Ctrl D or command D move it to the right side and now this one should be a circle to do that we just need to make sure that the width and height are the same so I'm going to decrease the width to 8 all right and now I'm gonna duplicate it once again and put it right there okay now I'm gonna select them all and I'm going to add other layout to them so hit shift and a there we go let me rename it to indicator just like this and this first one the selected one should be a little bit darker so I'm gonna make it a little bit darker as well just like this and our indicator is also ready let me align it to the center I can move it up a little bit and the next thing we need is the text layers so I'm going to bring them down here let's align it to the center and I'm gonna move it up a little bit so we created our main frame now it's time to animate this Frame and to do that we are going to use variance and interactive components as usual I'm going to select this Frame one and I'm going to turn it into a component and I'm going to add one variant to it just like this let me select this component set and change the property name to slide and this first variant is going to be one the second one is going to be two we will add another one in a few seconds but first let's see what we need to do here so if I just preview this Carousel you can see that when I drag this image to the left side it starts to rotate just like this and then the next watch enters the frame rotating as well right just like this so here's what we need to do we have our starting point here and it's fine for this second variant I'm going to select all these images even those that are outside this Frame and I'm gonna hold down the shift key and using the arrow keys I'm going to move them to the left side just like this until we see our second watch okay next I'm gonna select this one align it to the center horizontally good but now we just move them without any rotation to make that rotation effect happen I'm gonna select this first one and I'm gonna rotate it by 30 degrees so hold down the shift key and try to rotate it here by 30 degrees alternatively you can just specify the value here okay but what about this one here as you can see when I try to drag it to the left side the pink watch also rotates right so to make that happen I need to head over to my first variant here I'm going to select the second one which is our pink watch and I'm gonna rotate it to minus 30 degrees just like this so our first and second variants are ready now we need one more variant I'm gonna select the second one and hit this plus button to add one more variant and this one is going to be number three okay and I'm going to repeat the same thing I'm gonna select all these images just like that hold down the shift key and move them to the left side there we go now I'm going to select this yellow watch and align it to the center select this pink watch here number two and rotate it by 30 degrees just like that as you can see here we have 30 and in the second variant we should also rotate this Third Watch we need to rotate it to minus 30 degrees alright but what about our indicator the first one is already done I'm gonna zoom in here and for the second one what I'm gonna do is this we cannot simply move this one to the right side why because here as you can see when I try to drag this watch to the left side just like that this indicator the first one transforms to a circle I'm not changing their position here and that's exactly what we need to do I'm gonna select the second one I'm gonna go to design and I'm gonna set its width to 28 just like what we have here and I'm gonna change its color to this dark gray and then I'm going to select this one the first one and set its width to 8 okay and change its color to this light gray and we need to do the same thing here as well so I'm gonna select this indicator and I'm gonna select this third one increase the width to 28 just like that change its color to dark gray select this one set its width to 8 and just change its color back to light gray all right cool for this example I'm not going to change these text layers such as color it's going to be so simple you can just set it to pink green and yellow the main point you need to learn here is how to animate this watch and also this indicator and in case you face difficulties moving these watches around especially when you cannot see these watches outside what you can do is this you can hit shift and O to enter the outline View and now as you can see even these watches outside this Frame are visible to you and it's going to be so helpful when you want to move them around okay and to get back to the normal mode you can hit shift o again alright but what about the connections so here is what you need to do many people when they want to create this drag animation make a very common mistake they select their variant here for example this one variant 1 and then they try to connect it to the next one and they just change the trigger to drag that's not gonna work if you just connect these two variants like that the drag animation won't work as you expected so instead you need to select this image this one and then try to create a connection between these two so now I'm gonna set the Trigger 2 on drag it's gonna be smart animate 300 milliseconds it looks fine let's do the same thing here I'm gonna select this one connect it back to the first variant it's going to be on drag again and let's connect this one to the third one on drag and the third one to the second one it's gonna be on drag and we are basically done let's give it a try and see how it looks I'm going to create a custom size frame here 500 by 500 pixels just like this and from assets I'm going to look for animated image Carousel and drag and drop this into this Frame and line it both horizontally and vertically you can go ahead and put it inside any frame you want but for this example I prefer to put it inside this Frame and just preview it alright let's see if it works there we go it works just fine our indicator is animated and also we have this rotation effect here for these watches in case you want to use this image carousel on a mobile phone what you can do is this you can create a mobile phone frame here for example iPhone 14 just like that and then just drag and drop it inside and simply hit K and scale it down just like this and it would work perfectly if I just select this mobile frame and preview it you can see that it works just fine that's the beauty of using interactive components if you want to level up your UI design skills you might also want to check out this video on the screen thanks for watching and don't forget to hit the like button and subscribe to my channel for more tutorials like this have an awesome day and see you next time

Channel: DesignWithArash

Views: 9,207

Keywords: ui/ux design, ux design, user experience design, ui/ux design india, how to become a ui/ux designer, become a ui/ux designer, web design, figma, figma tutorial, figma design, figma tutorial for beginners, ux, ui, design, ui design, uxui design, uxui, learn ux, ux course, design course, designcourse, beginner ux, junior ux, junior designer, junior ux designer, entry level ux, how to learn ux, learning ux, user experience, user interface, carousel figma

Id: bQ9DS4G9FB8

Length: 9min 32sec (572 seconds)

Published: Tue Feb 14 2023