Figma Carousel Animation in 8 Minutes

in today's episode I'm gonna show you how to design and animate the material design Carousel in figma let's dive in first things first I'm going to create a carousel item for that I'm going to create a frame I'm going to hit a on my keyboard and just draw a simple frame like this and I'm going to set its width to 56 and I want to make it completely rounded like what we see here so to do that we just need to increase the corner radius I'm going to increase it like this and I'm going to set its height to 240. all right this is going to be our Carousel item I'm going to rename it to item and now and now I'm going to duplicate this item and this second item is going to be a little bit larger so I'm going to increase its width just like this but here as you can see the corners are not looking good so we need to decrease the corner radius just like this I'm going to set the corner radius to something like 40 and also for this item I'm gonna set it to 40. now I'm gonna make it a little bit smaller and now we need the third item so we need to duplicate this one and the third item should be even larger so let's increase its width to something like 270 all right great now I'm going to select these three items and I'm gonna add an image to them so I'm gonna run the unsplash plugin and I'm just going to hit insert random there it is we have these random images and also we need to have a label for each item just like what you see here so let's create a text layer inside this one I'm going to type title I'm gonna increase the font size to 18 and also let's make it semi bold just like this all right great we can also add a dark overlay to this Frame but it's not needed now I just want to show you how to make it interactive so let me set the padding to 24 and 24 and I'm gonna copy this and paste it inside these two frames as well now I'm gonna select these three item frames and I'm gonna put them inside another other layout frame I'm going to hit shift and a and let's call it Carousel lovely now I'm going to decrease the spacing between these items inside this Frame let's decrease it to 16. all right now before we turn this carousel into a component we need to adjust the resizing option of its child elements why because in this Carousel we want two items to have a fixed width and the width of one item should be set to fill container why because here basically when the user drags these items around they shrink and they grow therefore one item should be fluid and it should take up the whole available space within its parent container which is this Carousel and two items should have a fixed width so let's see how we can do it I'm going to select all these items I'm going to select this Carousel hit enter to select these child items and just change the resizing option to fill container now let's suppose you want these two elements these two items to have a fixed width and the width of this one should be adjustable automatically so I'm going to select this one and just change its resizing option to fix width and just decrease its width to 56. now I'm going to select this one and just decrease its width as well like this and this item's width is automatically adjusted and that's exactly what we want now we can select this Carousel and just turn it into a component and add a variant to it to create a component set just like this and I'm gonna duplicate it once once again now it's time to make changes to these two variants let's select this item for this variant we want this item to have a fluid width and these two items to have a fixed width okay so what I'm going to do is select all of them again change the resizing option to fill container like this now these two items should have a fix with right so what I'm gonna do is Select this one and decrease its width to 56 like what we had here in the first variant and this one should be 168. I'm going to select it and just decrease its width to 168 and now we need to repeat the same thing for the third variant so for this one the middle item should have a fluid width and the items around it should have a fixed width so again I'm going to select all the items change the resizing option to fill container and now I'm gonna select this one and set its width to 56 like this and this one should be 168 and this one is fluid and that's exactly what we need now it's time to connect these variants together and make them interactive so here I'm going to select this one this first item I'm going to head over to the Prototype Tab and just connect it to this second variant and I'm going to change the trigger to on drag and the animation should be smart animate here I'm going to change the easing method to Gentle and also the duration can be set to 800 milliseconds now let's repeat the same thing for all these other items I'm going to select this one now and just connect it to this one the only thing we need to change is the trigger I'm going to change it to on drag now I'm going to select this item here in the second variant connected to the third variant and change the trigger to on drag now let's select this one connect it to the first variant change the trigger to unrank this one as well it should be connected to the first one like this now I'm going to select this one connect it to the second and one and let's change the trigger to on drag and I'm gonna select this one and connect it to this second one as well and change the trigger to unrank now let's give it a try and see whether it works or not we just need to create a simple frame like this and head over to the assets Tab and from here just drag and drop this Carousel component into this Frame let's just make our frame a little bit larger and align it to the center now I'm going to select this Frame and hit play to preview our prototype alright let's see whether it works or not I'm gonna drag this one nice but here we have a problem as you can see this item doesn't have any interaction so we need to fix that it's right here we just need to select it and connect it to one of these variants it doesn't matter which one I'm going to connect it to this one and just change the trigger to on drag and now let's see whether it works or not yes as you can see everything works per perfectly it's so smooth however there is one detailed thing we forgot to do if you take a look at this Carousel here as you can see these texts these labels fade in and Fade Out so let's see how we can achieve that kind of Animation basically what we need to do is select a label in the smallest item in each variant and just turn its opacity down to zero we just need to select this label turn its opacity down to zero right here I'm going to select this label here turn it down to zero again and this one as well I'm gonna turn it down to zero and now let's preview it once again all right as you can see it works perfectly but there is another issue here so here if we check this first variant as you can see this item has an interaction this one also has an interaction but this one doesn't have an interaction therefore I'm going to select it and I'm just gonna connect it to the second one now let's give it a try once again as you can see it works very well thank you so much for watching this video if you found it helpful please hit the like button and subscribe to my channel for More Design tutorials have a great day and see you soon

Channel: DesignWithArash

Views: 10,736

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, figma carousel

Id: M9oWnKkgBi4

Length: 8min 4sec (484 seconds)

Published: Tue May 30 2023