Create a SWIPEABLE IMAGE CAROUSEL in Figma (Tutorial)

hi everyone and welcome to another figma prototyping tutorial in this video we're going to take a look at creating an image Carousel that is swipeable and works as an image gallery for your mobile or web apps this is the final result this is what we are creating today if you'd like to reuse this in your own projects as usual make sure to check the link in the description that will take you to my store and now let's get started the first thing I'm gonna do here is select the frame tool which means pressing F on my keyboard and then I'm gonna look for under phone I will choose iPhone 13 Pro or whichever one you'd like I'm gonna name this green and then duplicate this Frame just so that we have something we can base the width of our elements on I'll also go to prototype settings and make sure that this device right here is enabled and that means when you actually launch a prototype when you launch the preview you're going to see a phone around this you know around your screen so that's better for visualizing the final result since we know that our screen is 390 pixels wide we're gonna make sure that our photo takes up you know most of the screen but not more than the screen which means that you know we want to aim for like um let's say 280 when the photo is expanded and maybe a bit less when it's when it's smaller so these are the sizes we should be you know looking at approximately speaking and that means 280 for the width on the main one and then 230 or something like that for the smaller one I'm gonna move them over here too at them as a guide and here I have five photos I downloaded from pixabay I think and we're gonna use these as images in our salary so for our main photo for our expanded big photo we will we will go let's go for 270 by 380. so a vertical format like this I'll actually create a frame around this like this and then remove the rectangle and name this Frame photo we will use just one photo for now and I'm gonna copy this then paste it here within this photo frame resize this and position it let's say like this and then I'm gonna turn this to a component so we have a component called photo then I'm going to duplicate this which means I'm going to create an instance of this component and instance is basically a copy of the component where whenever you make changes to your component it is being reflected in your instance if you'd like to learn more about components and instances by the way make sure to go and check out my channel I did a tutorial on components and instances so we have this instance of a photo component right here and we're going to do one thing we're gonna again create another component from this so this is going to be a component that will contain an instance of another component you'll soon see why I will name this component photo container photo container I'm going to click this icon over here at the top which will add a variant this variant is going to be called small and this variant the first one is going to be called Big I will also then select the whole component and rename this property to size size and of course you want to make sure that the small one is actually small which means I will select the photo instance within the photo container component right so you can see that I'm selecting the variant and then the photo inside actually right that's very important and then I will select the Gale tool by pressing key on my keyboard you can see the icon changes right here and then I'm gonna scale this to a dimension that we mentioned previously would be good for the small version of the photo this is around 230 so let's let's go for like something bigger than 180 I think we could do like 210 right so you can see we have a photo that is smaller than the container which is the variant and we're going to change that we will go over here to the frame section and then click resize to fit this will wrap the frame around the contents which in this case means adjusting it to the smaller size right so notice how when I make a change here it's going to be reflected here but also what's going to be reflected is the size right so because we change the size it's gonna be reflected right so we have the photo we have the photo container and the next step would be using the photo container component right here so um you have to be careful to be using the proper component right now you can see that I have two identical images so go for photo container right not photo I'll then duplicate this so that we get five copies move it like this right so we have five photos right I think we're gonna switch the size of all of these two small so you can see that changes the size that's not surprising and then we will select all of these and press shift a to add an auto layout around this around all of these photos I'm going to name this Auto layout and for now I'm gonna move it over here and now actually let me show you why we needed this component structure so I will select the photo component and then add a variant and this variant is going to be two I will keep this there into one three four and five so we have three four and five and I'm gonna select the second image we have right here command C select the image within this component this second variant delete that select frame and then paste that inside right so we essentially change the photo right I will do something similar here with the third photo remove and paste and then the fourth remove paste like this and fit copy remove paste right I will select the we'll go over here to the photos Auto layout and then in the photo container under photo right so we are here I'm going to change this to two similarly here three and then here that would be four and the last one again select the photo component within the photo container component and then select five so we get five different photos and now when I select the photo container and change the size from small to big you can see that we get you know it expands like this and then we also want to make sure that all these photos so I'm just gonna press command and then click on each of these so that I select photos directly under constraints they are set to scale and scale right so that this means that these images are gonna scale down with these variants you're gonna see everything you see here is going to be reflected here as well because if we don't set this to scale we keep this at Center Center for example you can see that this right rock is being cut off and we want to make this you know you know all visible right so just make sure this is set to scale now the next step would be again creating a frame using the frame tool and the dimensions of this Frame will be 390 so 390 by 380. so let's do that 390 by 380. so almost a square right I'm gonna name this image curl cell or image slider no let's say image curl cell slider and then I'm gonna copy this or actually command X and then paste that here I will Center this vertically and then just move it over here and set the constraints to Center and Center also I'm gonna select the first container the first uh the first photo container and then change the size from small to big so that's the first that's the first photo right and also you can see that these photos are being moved to the top we obviously don't want that we want to keep them at the center so I'm gonna select under Auto layout I'm gonna change the alignment to left center right so now you can see that all these are in the middle I will also remove the background from this just make it almost invisible for now so just just very slightly opaque and then I'm just gonna make sure they this photo is centered so that would mean moving it so that distances are identical so two more pixels to the right and that would be center right 60 and 60. cool and then we have this image corrosive slider and now we're just gonna turn this to a component here an image crucial slider component I'm gonna uncheck clip content just so that we can see all the photos and then I'm gonna create a variant and then three more so we get five variants in total again let's go for props naming so for one on the first one two three and so on four and then I'm gonna also uncheck clip content that you can see the contents and I will select the second variant and then under the photo container I'm just going to click through a few times and I'm going to change the big component property to small right and then I'm going to select the whole photos all the layout and just move it like this select the second one of course and turn that to the big version I will then also make sure these are aligned precisely you can see they are aligned now and and you'll probably can guess where this is going and just a small trick I can think of right now is actually to calculate the amount by which you have to move these photos all the way out take a look at the the x value here and then the x value here you can see that here it's 60 whereas here it says 174 minus 174 that is so the difference is 234 so now when in the third variant we select the photos Auto layout and just add 234 or actually subtract 234 so minus minus 234 and then minus 234 again 234 now when we turn this to a small version and this one too big it should be the same right because it moves by the same amount dimensions are identical and therefore you can use this for your calculations so again I can select the next one and then just keep subtracting 234 until I get to the correct position at 234 and also change variance over here and a similar here minus 234 minus 2 4 minus 234 and minus 234 and this one would be big whereas this one will be small right so all of these are now positioned correctly which means we are ready for prototyping let's select the photo first photo container then go to prototype and connect this to the second variant and we're going to say on drag change to property one two and this is going to be smart animate and it's going to be 300 milliseconds 300 milliseconds then again I'm gonna select this photo container and now I can actually click and drag both here to the first version right so on drag but also I can click and drag or tap and drag or swipe I guess to another variant again on drag then similarly here if I click on the photo container of this photo connect that to this version again on drag and on drag and then here on drag and here on drag make sure everywhere it says smart animate right and finally in the last one you can only drag back to the previous version so on drag and now the final thing we do is actually select the image curls or slider component and press enter and then check clip content so that everything is kind of masked by the variants then we will just remove the fill from these variants and go over here to assets and search for image Crystal slider drag and drop that on to our screen we're gonna Center this and we're going to launch the Prototype and see kind of test our result and see if this is good to go which means clicking on I'm going to launch the Prototype now and this is the final result when I click and drag you can see that I'm swiping through these photos they change sizes and I can go back and forth except for the very first and very last images but I can just navigate through this very smoothly if for example you you'd like to change you know appearance of these photos for example you'd want to make these Corners around it you can just select this this photo container add some rounding let's say like 16 pixels press clip content and you can see the change is going to be reflected across cross everywhere right you can now even reuse this multiple times like um like for example when I do one more here you can see that it's being shown here of course because we have the scrolling disabled when we enable vertical scrolling you can see that you now have two sliders that you can swipe through and navigate through and it also goes without saying that you can actually modify these individual photos for example let's just say I want to put a circle on this photo a red circle for some reason whichever reason you'd like I'm gonna also set this to scale and scale you can see that it's going to be reflected here and then also when I go through these photos you know any changes I make on these variants with these photos they are also going to be reflected right here and that's it that's how to create a slider like this figma and animated interactive slider as usual if you'd like to reuse this in your own Project Check the link in the description thank you for watching I would appreciate you leaving a like if this video helped you and also even subscribing if you enjoyed this type of stuff and if you'd like to learn more about figma ux and UI design and about design in general thanks for tuning in and I will see you in the next one

Channel: Mavi Design

Views: 44,017

Keywords:

Id: g6L2xdX-TXc

Length: 15min 43sec (943 seconds)

Published: Fri Nov 11 2022