How to make an Image Carousel in Figma (Easy)

thank you let's make this simple image Carousel in figma first open up figma and add a frame we're going to change the width to 245 and then turn off the link and around our Corners to 20 and add an effect of a drop shadow gonna make it the same blue as the background but darker adjust the opacity and the X and Y values and then give it some blur now we're going to take our frame and duplicate it and change this width to 100. scooch that over grab both of them and turn it into an auto layout duplicate your second frame and let's name the auto layout photos now let's make our progress bars add a small rectangle change the width to 50 and the height to 12. we're going to round the corners to 20 and let's change the color to Blue we'll make it a darker blue [Music] option drag to duplicate it and put it into an auto layout shift a [Music] change the width of this one to 20. we're going to name our frame bars but it really should be called progress bars I'm a liar adjust your padding for the auto layout to 12 and then command D to duplicate so now we have three progress bars that represent our three photos select everything and frame selection [Music] we're going to use the plugin unsplash to pick three photos for our photo frames I'm going to speed this up so you can't see my ADHD once you have your photos you're going to duplicate your frame we're going to change the width of this photo to 100 and the width of the second photo to 245. and we're going to change the width of the progress bar to 20. and the second one to 50. now we're going to duplicate this Frame by clicking option and drag we're going to change the second photo to 100 and the third photo to 245. and change our progress bars the middle one to twenty and the last one to 50. select everything and create a component set once you've created your component set we're going to switch to the Prototype panel and Link our progress bars and images to the correct ones grab this one and connect it to this Frame our prototype settings are going to be set to on click smart animate gentle 800 milliseconds link all of your photos and progress bars to the corresponding photo frames I'm going to speed this up so you don't uh die of boredom let's now make a frame to house our asset close all of your layers by clicking option l go to your assets panel and move your component onto your frame let's play your animation here listen to some shitty elevator music if you like this video and want to see more tutorials please like And subscribe thanks guys [Music]

Channel: Shmelt studios

Views: 10,198

Keywords: Figma, ui, ux, animation, tutorial, webdesign, adobe, design, speed art, beginners, advanced, auto layout, diy, figmatips, web flow, project, how to, prototype, plugins, learn, logo, wireframe, shmelt studios, Free, menu, course, componets

Id: ZBKS7stXSio

Length: 4min 21sec (261 seconds)

Published: Fri Dec 09 2022