Create An Infinite Scrolling Carousel: Figma Tutorial

okay on today's tutorial we're going to make an infinite scrolling carousel as you can see the other cards are peeking out but as you scroll through we have three cards and they Loop and at any point you can go any direction so an infinite scrolling Carousel all right let's uh get into it so I've already gone ahead and I've just created my Carousel items so I basically I created each of these cards to be uh because this is 390 so I created them to be 330 to give me a little bit of padding and for the next cards to stick out this is just an auto layout with 20 pixel padding and I've created an arrow button other than that that's all you need to do to get set up so to create the actual carousel the nice thing about having the carousel items is a component and recreate the actual carousel we are going to create it out of these so we can take this create an instance of that now we're going to need a couple instances of this for this to work properly so we're going to want one on the end here to repeat and we're actually going to want one on this end as well so we'll grab all those throw those shift a into an auto layout set them to 20. and we'll call this um [Music] container or let's just call this item container probably better okay so now we have an item container now I'm going to hit freeze of of creating a new frame I'm just going to hit shift a call this Carousel container I'm going to get rid of the auto layout okay and then what I'm going to do is I'm going to set the width of it because I know the width of my screen is going to be 390 I'm going to set that to 390. all right so that's kind of where that needs to be but our items we want actually this deer is going to be the first item so we're just going to click on our item container I'm just going to hit Center it and then I actually pushes the bear into the middle so that's fine we'll just take this I'm going to clip the content for now and we'll just shove this over there we go okay so there's our Carousel container okay now we want to add our buttons in so what did I call it I called it an arrow button there we are so drag that in it automatically puts it in here but that's okay let me just pull that out Center left to line uh duplicate [Music] and just send it to a line right and rotate that 90 degrees that's it that's going to be our carousel okay so I know it looks a little wonky a little one-sided but you'll you'll see why so we'll make that a component and then we're going to first thing we're going to do is add a variance we'll just call yeah we'll add a variant okay and we're going to call this bear you don't necessarily need to name the variance on this but it helps so for Bear we're just going to grab our item container and we're going to be going to the right for this so I'm going to slide all this over there we go there's our bear pretty easy stuff click on that variant add a new one we're going to call this one wolf again we're just going to slide it all over okay now this is where we get into a couple extra frames for the in order to make it infinite so I'm going to duplicate this guy again I'm going to slide this back over so that our we're back on our deer and then what we're going to do is we're going to take our deer from up here and we're gonna add a variant based on that one and we're going to take our item container we're going to go the other way to get the wolf so basically this allows us to go backwards from the first variant without it sliding all the way to the end and you'll kind of see how this is going to work so once we start prototyping it we will do the easy stuff first we'll go in the direction we intended so right so we'll just take this drag that to that one smart animate easy all right right arrow goes to the wolf perfect and then the wolf goes to the deer okay and then the wolf back goes to the bear the bear back goes to the deer and what we're going to do is we're going to go the deer back goes all the way to the wolf okay now in order to make this work this last deer one we are going to add we're gonna drag from that deer to the first deer and we're gonna say after delay oh one instant so basically as soon as this deer slides in it's going to flip back to this one so that basically puts you back at the beginning of the loop so if this shifts over to that one that's just over that one that shifts to that one it goes back here so that we can actually create a loop and that's why we created this last one this um this wolf because what we're going to do is we're going to go here and we're going to select this wolf variant and we're going to drag it to this wolf and we're going to pick after delay of one instance so the same thing when you hit Arrow here it's going to animate back to this wolf and then it's going to instantly change to this one so we're in the middle of the loop again that may sound confusing but it'll you'll you'll see it'll work and then that's it you've done your your Carousel so now you can grab an instance of it oh not the whole thing just kidding grab an instance you can drop it in your container you can hit play and now when I hit the arrow it goes to the bear goes to the wolf goes to the deer bear wolf deer and if I hit back we go wolf back to the deer back to the wolf back to the bear and now we've got an infinite scrolling carousel pretty easy but there's a couple little tricks in there to make it actually infinite hopefully this was helpful if you have any questions or comments or a better way of doing it leave them in the comment section like subscribe check out my patreon and thanks for watching we'll see you next time

Channel: Darren Northcott - Figma, UX & UI

Views: 6,523

Keywords: figma tutorial, user interface design, ui design, carousel figma

Id: SvvM6XNqAE0

Length: 8min 13sec (493 seconds)

Published: Fri May 05 2023