Create image slider in Figma || Carousel slider in Figma

today we will design this carousel animation and sigma now we have two type of animation first one is changing automatically in every two seconds i make changes automatically but in the second one we can use this buttons to change it we can go forward and backward in this i have created carousel so five images you can increase or decrease this number as per your requirement but we minimum required two images for this okay so let's start first of all you have to create a new file then we will be having an empty canvas area then we will press f1 keyboard and we will draw a frame and change the height and width to 400 pixels greater than 300 pixels high you can use any other dimension if you want but i am using these dimensions let's decrease it a bit more 260 pixels will be good okay now it's good and now we will use a plug-in column splash stream import images for that i will press ctrl t on keyboard and simply type splash run the plugin and insert a random image you can import your design images if you want and now close it now we will draw a rectangle do this and give it a width of 400 pixels and center align it and bottom align and increase the height to up to like 110 okay now this one is good type the export 0 and hit enter then go to this fill option chooses to linear and then you see this this one simply select this and drag it here select this and drag it the front and now it's ready now close this select this one change the border to 12 pixels and now we will type that text simply click here and simply place it here i'm using the font enter you can use any font you want and i will change the font width to semi bold and also the font size 24 pixels and i will duplicate it by holding alt or option can simply click and drag and i will type this is description i will change the font size to 14 pixels and this weight to medium and press 5 on keyboard to change the opacity to 50 now select both of them by holding shift and simply choose this left align now group them and you see this option here the spacing should be four pixels and from and now if you hold down alt key and hover or option key you will see the spacing from all the four directions from here it's 41 pixels from whatever 79 from left and bottom it will be 24 pixels so i will change it with the arrow keys okay now it's 24 pixel knowledge you can design these according to your need but for our purpose we will use this now we will duplicate it here and this one will be for the arrow buttons simply choose the pen tool by pressing pn click hold down shift then click again click again or you can import icons from the library you are using or you can use any plugin now please enter align it click this option simply right click it and choose frame selection now from the layers panel simply click on this icon and select the vector give the constraint send to the left you can change the constraints from here or you can change it from outside now select the frame change the width and height to 24 pixels so that it's a bit clickable and move it aside the spacing will be 12 pixels from the right and center align it you can now duplicate it here the spacing again will be 12 pixels and now press shift h to flip it horizontally okay now i will select both of them and hold down alt key and duplicate it five times okay now it's good let's decrease it to three so that tutorial will be short okay now this one is for the button arousal now select this one and this one and simply press ctrl p and then run the plugin again and splash and import another image select this one and import another image now you have to select all of these and the spacing between these will be 32 pixels select these and do the same thing 32 pixels and right click and choose frame selection and now hold down control and alt key and then you will be able to move it the flame resize it but if you leave the control key then this will not resize as we want it to be so it's not a good idea so make sure that hold on alt and control key do the same with this right click frame selection and then hold on control alt resize it the frame size should be equal to these you can see the width and height is same as the inner card now i will select the frame let's resize it okay now select this and let's rename it by pressing ctrl r command r to auto slides and buttons okay let's move it aside and make sure that this clip content option is unchecked for now otherwise the content will be done and you will not be able to see other things select both of these duplicate them three times select the first one press enter and hold down shift and move it to the right and make sure that it is snapped perfectly and also the option these options these two options pixel grid and snap the pixel should be turned on otherwise there will be some problems and now if you zoom in a bit you can see this this is perfectly aligned with this okay and we will select this one from the layers panel you can check you have selected the parent frame or not hit enter and move it to the left okay now it is perfectly aligned we will do the same thing with these and now select all of these and and press shift enter it will take you to the parent frame if you have selected another frame by mistake and choose this clip content option do the same with this select these and press shift enter many times and simply click clip content and after selecting all of these go to this component option and choose create component set do the same with this create component set let's move it here now i will go to prototype select this first one you see this plus can simply click it and drag it here and it this will add a prototype and you see this option change it to after delay so that it will change automatically you can give time here in milliseconds 1000 milliseconds equals to one second i'm giving it 1.5 seconds which is 1500 and changes to smart animate by default it is instant you have to change it to smart anymore and this is the time period in which the animation will occur like how long it should take to change one image and you can use this option each in and out do the same with this change it to after delay and select the last image and drag the prototype to the first one and change it again to after today now i will animate the buttons for that i will select the button simply just click and click and go inside the frame and select the button simply drag a prototype here and this will be on click and you can change this to smart animate do the same with this leave as it is for this drag it to the first one now i will animate this drag it here again for this one we will navigate it to the last one now we will draw a frame to test all of these we go to design tab again press f on keyboard and draw a frame and simply select this and copy it by holding alt do the same with this okay let's enter align it and now you simply have to play it and now our carousel is ready the images are changing automatically this is changing in 1.5 seconds and i can change it by pressing button okay and now you know how to create a carousel in sigma thanks for watching and see you next time [Music] you

Channel: Dezinx - Kirtanya

Views: 25,843

Keywords: figma, ui, ux, uiux, uidesign, dailyui, learn, course, onlinecourse, learnfigma, getstarted, beginners, started, get, learn ui design for free

Id: u2hhq5QwbbY

Length: 8min 8sec (488 seconds)

Published: Sun Apr 03 2022