Create Awesome Carousels with Interactive Components in Figma

hey guys in this video i'm going to share or teach you guys how to actually create some awesome carousels and we're going to be doing these carousels with interactive components obviously so yeah i mean without further ado let's just get into it the first thing that you actually need to do is you need to create a frame with the size of the container that you basically want these carousels to fit into i'm going to since i'm making these carousels for a mobile device i'm basically going to create a frame that's going to be equal to the width of the mobile device which is 375. i'm going to create just name this component a carousel inside of it i'm going to create another frame and i'm just basically going to give this well let's for now just give it a fill which is just gray or whatever right so now that i have that particular fill applied i'm also going to go ahead and i am just going to pretty much basically position this image so imagine i want this carousel obviously it can completely stick to the top and let's just actually go ahead and apply an image so we can see how it looks right so i'm going to go to my unsplash and i'm going to pick the abstract category for the image i'm going to choose this image so here we have the image let's just give this a border radius as well so by default it's going to be an image like this then let's just go ahead and actually create multiple images so i'm going to say that there's going to be an image on the right as well first of all what i'm going to do is i'm going to remove the clip content so if there's an image on the left on the right or the left i can see it so here we are going to we're going to have images like this which are basically going to come from the right to the left so this is going to be our default image i think the size looks fine though i think on the left hand side the spacing should be maybe 32 pixels and on the right of the container it should also be 32 so let's just make sure that that spacing is even in both cases we can also keep it uneven if we want a glimpse of the other image to be shown so we can do that too so let's say that this is our carousel item one thing i'm gonna do is i actually need two states for the carousel item so the first state is going to be the active state so for example when the carousel item is active i want it like really big and the opacity should be zero or like hundred percent so i'm going to say this is going to be our carousel item and this is going to be active so and then i'm going to click the plus button on the variant and i'm going to say this is going to be inactive or i can say this is false this is true and i'm going to rename this property to be active okay so this one is act this one is true this one is false and the false state i'm going to say that the opacity of this carousel is just of this carousel item is going to be really light maybe 60 and the width is also going to be really small as well so maybe 220 pixels or something so now that i have these items i'm basically going to go ahead and i'm going to replace this item in my carousel with it and let's just go ahead and see what happens now i'm basically going to duplicate this item i'm going to place it on the side and i'm going to make it inactive now one easy way to actually position all of your items is just to use an auto layout so i'm going to create an auto layout around these items these are going to be our items and i'm basically just going to duplicate these items i can say that these items inside my auto layout container should be centered so basically they should be like this and i think most of our setup is basically done so i'm basically going to grab this carousel and move it to the right so we can experiment with it here and i'm now going to go ahead and i'm going to change the images on all three of them so i'm going to go to my abstract again i'm going to say the second images can probably be this one the third image can be this one and the fourth image maybe can be this one or this one maybe okay so here we have our images and this is going to be the first movement of our carousel so i'm going to add a variant and i'm going to say this is this is the second one i'm also going to go ahead and i'm going to remove the clip content here so we can see the things that are overlapping so what clip content does it it clips the content if it exceeds the width of the container that you have selected so i've removed them so now we can see all of the items so in this case as we can see we have the first item in the second case we have this item that's going to be active and the previous one is going to be small i'm going to duplicate this this is going to be our third image you're going to select this one i'm going to say this is not going to be active and this one is going to be active again i'm using the tab key to switch to the children's so i'm going to make this active going to press tab to go to the previous child and then say inactive okay so here we have our carousel items i think most of it is practically done now what we want to do is we want to add some interaction to it so i'm going to say that if i drag this particular this first component and let me just actually give some spacing in between them so i've applied the auto layout to the carousel component as well the whole uh variant component so i can just manually add spacing in between them and basically what i'm saying here is when i basically click on or when i try to drag this particular element uh then i want you to change to the second element so that's what happens now it's changing to the second element we're going to say it's going to smart animate with an ease and an ease out of 500 milliseconds and that's fine similarly i'm going to go here and i'm going to drag it here i'm going to say once i drag the same effect is going to be applied i think that's fine similarly here i'm going to say when i drag this uh to basically on the left or the right or whatever it is you don't have to figure that out you can just drag it and you can see it's going to smart anyway to the next one similarly here i'm going to say if i drag this it's going to go there and if i drag it on the other direction it's going to go to the last one similarly i'm going to say if i drag this it's basically going to go to the first or to the third one and i think this should practically work one thing obviously which is not working fine is i haven't moved these items so obviously the item that's active should be in the in the particular location so in in this frame it should be in the selected position so i'm basically going to move this here and let's just zoom in to make sure the spacing is correct i'm going to move this item here and in this last case i'm basically going to move this item here and that should be done so let's just refresh and as we can see it's working i can go completely on the far right on the far left and i can easily import this into multiple screens and similarly if i wanted i maybe i want to say i want to have some different images i can just go here and i can choose these images i can tweak them and then i can let's say include this other carousel as well so imagine i wanted to tweak this first image in a particular case i can say that i want architecture images and i want to say these are going to be architecture images this one is going to be another architecture maybe this one similarly in this case it's going to be something different and in this case it's also going to be something a bit different maybe this one and let's just make this first one colored as well since i like a bit of color so here we have it and i'm just going to rename this carousel too let's see for some reason i think this particular sorry i'm actually copying the whole component which is obviously something i shouldn't do and now we have it here so i'm just basically going to refresh it and as we can see we have this item moving this one is moving without necessarily connecting it to the previous one and i can basically keep on animating these without necessarily both of these being connected so a lot of the times on youtube i'm actually seeing a lot of people doing it with frames and duplicating them and then animating it to the other one and the problem with that is if you actually want two or three carousels in a single screen that work um independently of one another you have to do it with interactive components otherwise it's going to be a lot of interaction and a lot of frames in order to make it work so a lot of people who may not be familiar with interactive components or who aren't doing with interactive components aren't really making uh your components that are or carousels that are really scalable so this is really something that you should start doing and start adopting and not go for the easy way out so yeah that's going to be pretty much it do subscribe to hit the bell icon and i'll see you in the next video take care bye

Channel: AM Design

Views: 958

Keywords: UI, UX, DESIGN, INTERACTION, ux design, User experience, figma, sketch, prototyping, basics, scroll, carousel, figma tutorial, user interface design, ui design, interactive components figma, asaad mahmood, asaadmahmood

Id: rAqJ-uA9W_8

Length: 8min 48sec (528 seconds)

Published: Sun Nov 07 2021