Figma carousel animation in 5 minutes

carousels are super popular design but in order for us to show clients how they work we need to animate them in this video we'll take on the challenge of animating this Carousel in under five minutes we're gonna use a special technique to do this so make sure you watch the whole way through so that you don't miss any details here also if you want to follow along we have the figma file in the description below now let's start the timer and get going alright so we're in figma and we have these five steps to complete in five minutes so let's waste no time the first thing we want to do is to create some sort of a card and I have this image here that I will call my card so it's an image fill I have a linear gradient stroke on it to make it look a bit more fancy that's all I'll take this drag it onto the next step here where I will duplicate it two times I will then take these colors here and apply them to my cards I will take all of those items hit shift a to create an auto layout make them a bit tighter call this container and there we have our Auto layout we have our stack of cards okay bring it to the next one where we're going to put it inside of a frame then we're going to duplicate that frame two times again and we're going to change the position of the cards so I'll go here I'll hit a to create a frame like this send it to the back take this container copy paste it inside of this Frame I can give it a new color like that call this carousel now we have this Frame I'm gonna actually Center this so that it's always centered so if I change the size of this everything stays centered I'll take this Carousel frame duplicate it twice I'll change the position of the cards like this so that we have all of the different states of this carousel so there we go we have all of the different states which brings us to the next point which is to create a component set and then add drag interactions to it so we'll Target all of these or select all of these go up here click create component set and once that's done now we can start adding interactions and the interactions are going to be from these Auto layouts so hit this go to prototype and then from here I can hit the plus I just drag it to the second state or the second variation here change from on click to on drag and then just have this smart animate animation with ease out so that's to the right State I also want to have the ability to drag it to the left State here so I'll change this to on drag as well so now we can go from the center to the left and the center to the right but we need to be able to go back from the right here to the center so I'll add an interaction back to the center on drag the exact same thing same from this one the left back to the center on drag just like that we don't really need to add an interaction from this piece for example down to this piece because you can't really go from the far right to the far left in one swipe you're always going to have to go back to the center piece so that's why we don't add drag interactions from this one to the bottom one or from this one to the middle one here anyways so we have our Carousel here now I'll create an iPhone frame I'll change the color of it like this I'll grab our first component here drag it inside here I'll change the size of it so that it fits Center it I'll add a flow starting point we can call it iPhone prototype I'll hit play let it load and there we have our Carousel if you want more tutorials like this let us know in the comments below until the next one have a great life we'll talk soon ciao [Music] thank you

Channel: Flux Academy

Views: 83,742

Keywords: become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: 4YFRYho3vuM

Length: 5min 8sec (308 seconds)

Published: Fri Feb 17 2023