Card swipes/ carousels in Figma

hey everyone what's up welcome back to the channel and in today's video we will be building these really simple card carousels in figma really simple but really fun and they can bring a lot of character in your boring uis and on top of it we'll also see how can you add a really simple bottom shield with a video trailer and some carousels in it so really simple to build both of these interactions let's see how can we do this entire thing in figma so let's get started so we're in figma right now and the first thing that we need is an artboard so I'll hit a on my keyboard and on the right we'll have the artboard presets and I'm going to pick an iPad Pro 11 inch I'm picking this artboard because I have an iPad Pro with me and I want to see the previews of my figma files on my iPad it looks really amazing but you can pick any artboard that you like this sort of interaction that we're building today is more suitable for a touch interface so make sense that you pick either a tablet UI or an or a mobile device UI it's totally up to you you can pick either an iPad Pro or a tablet or you can go with any of the phone uis that you like so I'm going to build a dark themed app so the background I need to be a little darker so I'll pick something like this okay I'm not picking the classic black I'm just picking a light navy blue dark blue sort of a color and the next thing that we need to do is I need to throw in some dummy Netflix UI on top of it okay so I've added a dummy UI on top of our artboard just a nav bar there and the next thing that we need to do is we need to figure out where to place our cards and how big the card should be and here I want to add and create an artboard let's quickly add a fill I think I want a little big of a card and I want a square card okay yeah I think this looks fine so we'll go with the 550 by 550 artboard let me add a rounded corner I'll probably add something like a 42 rounded corner to it so it looks really nice and rounded so now our card size is ready now let's start building our cards so I'll just drag it out for timing okay and I'll call it card one the first thing that we need we need an image so let's add an image here and we're going to build this like a movies tab so let's add a bunch of Movie images so let me just quickly add a movie image on top of this okay so I've added a movie image on top of this card now let's quickly add some UI details on this so I'll hit r on my keyboard and I'll create a rectangle and this rectangle will work like an overlay so I'm just going to give it a dark color for now and the next thing that we need to do is go to our effects panel and add a background blur okay so you need to add a background blur so that you can just blur things out and I'll uh I'm reducing the opacity here so that you can see a few things in the background so let's do it like 80 and let's increase the blur so if you see you don't you're not able to see anything behind it so I think we'll go with a really high blur here and I'll reduce the opacity a little bit more so that it looks really glass sort of effect here so I think um we'll go with the 50 blur and something like a 60 opacity for this and now let's quickly add our title some rating some dummy text about this some play button and across icon so let's quickly do that okay so now I have created my first card I have added some text um some ratings um release date timing and some text below which explains the movie I guess a little bit about the movie I've added a play button and a close uh cross icon on top of it so I've created one of the card like this so let's just duplicate it and create a bunch of cards so I want to create like five cards which we can swipe in between so let's just quickly change the image and text and let's create at least like three four more variants of this card okay so now our cards are ready I've created bunch of similar cards just change the image background image and the text here and now I have five cards with me the next thing that we need to do is we need to place these cards strategically on our artboard so let's quickly do that so this is my first card I want this card to be on top and the next thing that I want is this card okay but I want it to be behind the first card so I'll just move them up the layer and I want this card behind something like this let's do it for the other ones as well okay so now I have placed all of my cards on the artboard and I've just placed it one behind the other so that you can just get a sneak peek of the other cards behind it now the next thing that I want is to build a slightly more glamorous than this so the next thing I want to do is I just want to make these cards a little smaller so that you can get like a really simple stack effect so what we need to do is I'll just select the first card that is behind my main card so this is the card in the viewport I want this card to be little smaller this to be even smaller than that smaller and this will be the smallest card so now I'm going to select my second card which is behind the first card and I'm gonna hit K on my keyboard that will open the scale tool and we're going to use the scale tool and we're going to reduce the size the scaling of this second card so I'm just gonna hit point nine five which is slightly smaller than what we have okay so it looks like this it's gone a little smaller I'll select this and I want it to be smaller than the second card the third card okay so I'll again hit K on my keyboard similar process and I'll hit point nine so I'm just gonna do 0.5.5 reduction I'll select this hit K and we'll probably do 0.85 and we'll select this finally this and hit K on my keyboard the last card and we'll do point it so if you see we are now getting a really nice stack effect this is our main image this is our main card and the rest of the cards behind it are smaller in size all the way back to the last card now the next thing that you want to do is if you see it looks a little messy to read on the edges and this just this other cards which are not in the viewport are just making it really harder to focus on the first image so what we can do to tackle this is really simple I'll select all of my cards that I have in the background I'll come here and I'll select effects on my panel and the next thing I'm going to do is I'm just gonna do layer blur so I'll just select layer blur here I think tench is good so you're getting a preview of these things but you're also not maligning the overall focus and the view of this first image because that's the center image right so now if you see this looks really nice and when we move things out when we animate going forward you will see that uh this gives a really nice blur changing effect so our first card is ready now what we need to do is I'll select all of my cards here and this is a very crucial step and I'll hit option command G on my keyboard or alt Ctrl G for Windows users to Club this or to group this into a frame so option command G and now we are in a frame and I'm going to call this Frame as um scroll and what we need to do is we need to create states where this is the first image in one this is the second image that becomes the first image when you swipe so we have to create different swipe stages and since we have five images we'll create five stages so first one is done let's quickly do the second one okay and in this one what I have to do is I'll select the card first I'll go inside the frame and I'll select the card one and I'll move it out of the frame because you're swiping it on the right I'll just move it out and if you see here if I uncheck clip content you'll see the card is out of this Frame that you've already built the scroll frame and this is out okay still there inside the frame but it's moved out of the viewport and what we want to do is we want this card to be in the center so I'll just quickly move it okay and the rest of the cards needs to come a little closer and the next thing that you need to do is you need to make this card bigger as this card so if you see this card was slightly bigger you have to make this card bigger as well so what I'm going to do is we can either use the scale tool or what we can do is we can scale it manually to match the size I'm just going to scale it manually to match the size see so now it's as big as this rest of the cards I think you have to scale them as well so I'm just gonna manually scale them for a bit so that we get that expanding effect I'm just going to increase them a little bit little bit so that you get a really nice expanding effect got it awesome so now uh from here when I swipe right I get to this and this image becomes the main image and see if you see right now it's it has this blur because we have added a blur to it so I'm just gonna come here and I'll give a zero blur to it so that this image is now clear and you can add a blur to this outside image so that you'll also get a nice effect of blur when you move out so layer blur exactly the same layer blur here awesome now the next thing that you need to do is if you see here the scroll frame that we created which contains all these cards including this card the bounds of this card is still here which we don't want so we have to click this icon here little icon here which will resize the bounds of the frame so we're going to use drag animation and for drag it needs to understand that you have moved something so if you do this then only it'll feel like the frame has moved so that's what we are doing here from here to here the frame has a little movement okay so now the next thing that we need to do is follow the same step that we did here but now two of these cards will go out this card will go out and the third card will become the main card so let me just quickly do that so now I've created all the frames in the first frame our first image was in the center in the second one second in the center third one third is in the center fourth one fourth in the center and the fifth one the last card is in the center and if I just quickly show you uh unclip version of these if you see all the four cards are out in the last frame and this one three of them are out and this one two of them are out and one of them is out okay so this is how the steps looks like and now you have these different five frames ready the next thing that we need to do is a very simple step we need to just link them through prototyping so let's figure it out let's see how can we do it and just one thing that I explained earlier as well you have to make sure that the frame that contains all of these cards are also expanded so use this button so that you keep on changing the dimension of that frame so use this button to just resize to fit to all frames okay so what we need to do is I'll select the main scroll frame that we have created and I'll just hit this plus option and drag one arrow to the next artboard and instead of on tap we want on drag the next artboard and instead of all these options we have to do smart animate smart animate gentle 800 millisecond is what I'm choosing but you can work out different versions if you want if you want a little bouncy faster versions you can check between these different options I'm going to pick gentle and 800 milliseconds so when you swipe between the first image you get to the second one I'll select the second one now the second same scroll group and what I'm going to do is I'm just going to link the to the next frame on drag smart animate gently it has missing in perfect and we also want when I swipe back I should be able to get to this state so I'll also create a backflow and select here and similarly on drag gentle 800 millisecond everything Remains the Same so let's quickly link all of our artboards in the similar way okay so now I have linked all of my cards back and forth so first car to second second to third third to fourth fourth to Fifth and fifth to back and similarly backflow is also ready like so let's hit play and let's see how it looks like I swipe on the right amazing again amazing amazing and I can swipe back also in the reverse Direction and I'll get all of my cards back okay this is really awesome really cool this looks absolutely what we have designed and if you see we are also getting this nice scaling effect here when we move between the different images and different cards so this looks really nice so when we're creating this card we have added so many items on top of it we have a very high resolution image we have so much text and then we are moving between blurs so that might cause a little stuttering effect and the animation may not be really smooth for you so what you can do is you can select the card that you have created and we have to rasterize it basically remove all of these elements and create like an image so to do that and this is just for demonstration purpose create a copy of this interaction and then change this because once you rasterize it you won't be able to get back these things because you'll be creating this entire UI into a image so how to raster this entire frame so you have to select this Frame select this Frame one for example and go on top and here on the object panel you see rasterize selection once you raster it it changes into an image so then image is now really simple to handle because an image is a simple asset you don't have these moving UI parts so the image becomes really easy to handle so what you need to do is again this much simple trick to work these things out I'll first come and select all the other cards and let's first remove the blur so remove the blur first and the next thing that you need to do is you need to raster all of these cards and you need not to change the interaction because we are working on the cards that are inside okay so I'm just gonna rasterize all of these images basically rasterizing this will create everything into a simple image and now figma can easily work it out so this is only the case if you're feeling if you're seeing any stuttering effect on your files and the next thing that we need to do is so if you remember all of these ad blurs so I'll select all of the outers cards and I'll go to effect and now I'll apply the same blur and it just looks like the version that you have created and it works much smoother so now the next thing that I showed you in the preview was a little bit of extension of this basically when you click on this card you see a bottom sheet which had a player and which had a video playing on so let me quickly show you how to build that as well so I've created a small frame and I have given it a slide so this Frame is around this size so it covers around 70 of the height of this artboard so I've created this bottom sheet and this Frame I'm calling it as a bottom sheet and what I'm doing here is I've added this text again the same trailer preview some buttons some other text I've also added these images in a frame and I've simply added a horizontal scrolling to it so that you can scroll between them okay and in the background if you see I am using a video here so I've added a video in the background uh if you're on the free tier of figma you won't be able to add video because big videos is not available for free tier so if you're a paid user then you will be able to get to embed videos but it doesn't matter you can also use GIFs so just add a background video or a gif and this bottom sheet will be ready it's a very simple thing nothing fancy there if you want to learn how to create these carousels um you can check out my older videos but nothing much there is a frame which I have added some rounded corners on top left and right and there's a background video on GIF that you want to add and some text here so now what you need to do is what we want is when we click on the first card I should be able to get to this sort of view so what you need to do is select the first card go into your prototyping tab and what I'm going to do is I'm going to drag it to this card and on tap navigate to and it's from navigate to you want open overlay so it'll create a bottom sheet interaction automatically for you and you want it to be bottom center which is perfectly fine you want it to be laid down here so bottom center click when clicking outside so basically when you click outside of the bottom sheet it should close that's perfectly fine then also add a background overlay so just add a background so that you don't see the background here so it'll add automatically a black overlay on top of it with 80 opacity and the animation that you want is move in so this is the important part you want it to move in from bottom to top so it should just move in from here to here okay so move in gentle 800 milliseconds this looks absolutely fine and the next thing that you need to build is when I click on this cross I should be able to go back to this previous screen I should be able to close this model so I'll just link it back on tap navigate to and you want it move out now okay here you don't have to select overlay because you've already selected a overlay there invoking is through and overlay but closing you don't need an overlay option so just simply navigate to move out and you want moving out to be top to down because it was entering bottom to top then top to down should be our moving out animation and again same gently 10 milliseconds and smart animate matching layers perfectly fine so now this is done let's see how this looks like so here is our card and I'll go back to our first card and I'll click it and if you see a really nice interaction happening and a background video playing and you have this UI which you can scroll and this looks absolutely amazing you can now click outside and it'll close or if you want you can click this cross button and it will close so this looks absolutely gorgeous I hope you guys like this video give me a thumbs up let me know what you felt about this tutorial and I'll see you in my next video take care [Music]

Channel: Akash Yadav

Views: 41,344

Keywords: UI, UX, DESIGN, INTERACTION, ux design, User experience, figma, sketch, prototyping, basics, scroll, carousel, figma tutorial, user interface design, ui design, slider, interactive slider, swipe

Id: OQwstzYc0-Q

Length: 18min 40sec (1120 seconds)

Published: Sun Jan 22 2023