Create a SWIPEABLE IMAGE CAROUSEL in Figma (Tutorial)

[@oozecloud4511]

this is the best tutorial, the other tutorials has weaknesses it only works on three items, but not this one, thank you for saving my time

[@andreic048]

Wow, this is so complex. Thank you for this detailed tutorial! Hope I manage to make it work.

[@andiyas]

Thank you! I feel so accomplished. I was able to replicate what you did in the video. You walked through the steps very clearly. I had created some icons that I then converted to images and created a carousel of those images.

[@melodymegi2770]

I love your tutorials soo much, they´ve been helping me tremendously during my first web design project. Keep up the great work and thanks a lot!!

[@Charmyng_and_Chubby]

Thank you so much for this video, I am stuck, my carousel only dragging to the right but not back to the left. Each photo shows in prototype drag to; both the one to the left and the one to the right. What could I troubleshoot? Thanks again.

[@Karolina-u8s]

Hi! Your video is very helpful, although I keep having the same problem. The swiping works only between 1 and 2 image. I swipe right, it works, then i swipe right again and it returns to the first image. What am I missing?

[@HariHaran-wm3os]

The way of your teach is so clear and understood. ☺😌

[@tanyash.5353]

Thank you for the tutorial. I was wondering what would be the fastest way to make another slider but using different photos?

[@gracewee266]

Most effective and concise tutorial on KZbin! Worth every second watching 👍Thank you so much for sharing this valuable knowledge! Subscribed!

[@Sabrina-uh7fr]

The drag direction does not go with my drag direction, it goes one direction only. and stuck at the first and second image

[@kriswayne7938]

Same, did u find any solution?

[@h.b.1315]

@@kriswayne7938 Found it! I was stuck on the same issue for the last 3 hours *sobs*. Make sure you are selecting the image container and pulling nodes from the image container selection not the wider rectangle that includes the beginning and end of the images to each side. Pay very close attention to the layer he's selecting at 12:19.

[@kriswayne7938]

@@h.b.1315 Thank you so much 😭🙏 God bless

[@h.b.1315]

@@kriswayne7938 You're welcome. We're in this together, haha!

[@kriswayne7938]

​@@h.b.1315 Hey there, i have been facing the same issue again. It works on some components and not on others even though i select the child element for dragging. Any idea? R u facing this too?

[@joellethompson6682]

OMG I've been using Figma for over a year and this video just taught me about the plus and minus for the sizing ...I've been using a calculator this whole time! 🤦‍♀ Thank you! Would love a video going over little things like that it makes me wonder what small things I've missed. Btw are you Turkish? My husband is Turkish and we noticed your name. Anyways thank again!

[@winnetouch]

I did it like this and am having issues at the very last stage when prototyping. You set the interaction to drag in both directions except on the first and last image. So far so good, I understand why. But when I do it and go to test it out only the first two images keep switching. All the properties are set correctly and its set to smart animate. But no matter what direction I drag the image to (left or right) it just switches to the second image and then when I try to go to the third image it just switches back to the first one.

[@carolinamotta4640]

I'm strugling with the same thing. I think i am doing all correctly, but then in the prototype it gets stucked in the last two images. I can't go back to the first ones

[@RekhaVenkatesh-g3y]

How to give interaction to each image? I mean I want to open a pop/overlay on click on each image

[@sarahlisa8290]

So clear and useful, thank you so much!

[@Ernesto-z6f]

GREAT TUTORIAL! If we want to create Cards (combination of text and images) instead of just images, would this tutorial work?

[@PatriciaBarreda-e4j]

I started with figma literally yesterday and this was really really helpfull!! Thank u very much! I almost nail it but whe I ran the prototype I don´t know why I can just swipe between image 1 and 2 or when I reach the last image it wont go back... I have to figure it out what I did wrong! XD

[@ArthurStratDesign]

This is a great tutorial, thanks for sharing! Quick question: How do you make sure that your design gets exported to Webflow using the plugin Figma to Webflow without any issue? I have had issues with Auto Layout when using more than 3 images in my carousel so far, any words of advice? Thanks!

[@katyai.2369]

This is such a good question! I'd like to know the answer too!

[@grahamh9404]

Thanks so much! Really clear and helpful tutorial!

[@taneshawalker]

Thank you for such a helpful tutorial.

[@sofiamontes6307]

Thank you! I used it for the final project

[@Storiesbyhomes]

figured it out in the end, thank you

[@emanuelb.2715]

This was super helpful. Thanks so much for sharing this information!

[@andhika6591]

Thank you sir, have a nice day👍

[@Tetaliaful]

Thank you so much, this was so helpful.

[@guaraferreira797]

Thank you very much for sharing this content. Very well explained!

[@ashokpujari4702]

Hey Mavi i really Loved this Prototype and it Remind me of Hotstar Prototype so was basically need help with text too like how Disney hotstar prototype is so can you make one like that?

[@sfernandezponce]

Thanks for this tutorial. Any way to make this drag both ways? 😑 I am building a carousel that has items on both sides so you should be able to scroll in both directions. Any tips?

[@mavidesign]

I double-checked and it seems the carousel can scroll in both directions as shown in the tutorial process. Every slide (except for the first and last one) can be swiped in both directions.

[@RitikBharmoria]

Same problem

[@Icebaer66]

If you carry out the prototyping path from the image and not from the container, it will work well.

[@bryanyovera122]

Thanks for tutorial 💡

[@kanikasharma9467]

you maked it so easy, thank you so much

[@michellebettschen5758]

this was so complex i almost died. but thank you tho :)

[@paolafraga4442]

how can i export this proto animation to a GIF, lottie?

[@kelvinator131]

Great explanation! Thanks a lot!

[@riptide_w]

is it possible to make the last photo wrap around back to the first one? ill try to figure it out on my own but if anyone has ideas feel free to help me out :)

[@azzamrasyiqel-faraby2056]

Super helpfull and interesting, Thankyou!!

[@gabeestrada8854]

Can this work for text boxes too?

[@thanhminh7336]

you are very good, i love it

[@DenzellHarris]

My text won't scale even when I set the scale constraints.

[@kriswayne7938]

do u know why it functions in some components and does not in others? Even though i prototype with the child element. Like the drag functions in only 1 direction

[@Icebaer66]

If you carry out the prototyping path from the image and not from the container, it will work well.

[@zend969]

this video guide is good but had to follow too much steps.. someone has to rewatch the video for almost 1 hour.. i believe there has to be a simpler way to make these image sliders. 15m but have watched this video for almost one hour still not able to reproduce what is taught here.

[@idowutemivictor]

My question is have been trying hard to fit in a Picture in a Ellipse frame it's not copying in it?

[@idowutemivictor]

Is it necessary to remove triangle cause my image isn't copying in the frame

[@시니-l5l]

OMG Thank u soooo Much!

[@MaxCipicchia]

Very helpful!

[@niho721]

oh my god...this is so useful

[@ivonaneubeck9966]

Thank you for this, I was able to follow on my own project but got stuck on the launch part - photos are swiping smoothly from left to right, but when I get to the last photo, it only swipes to the left once, than stops at that photo and goes back and forth between the last photo and the photo next to it - so it won't let me go back. Any ideas what I am doing wrong? Thank you

[@jeriemeenidera143]

I have the same issue, hoping that someone can help us fix this one

[@tayloradams9320]

@@jeriemeenidera143 I'm guessing you need to add additional prototype links in reverse to swipe backwards.

[@tugayungor9229]

Teşekkürler dostum!

[@markjoncheff]

This is where XD is so much better than Figma. The process of doing this in XD is a quarter of the effort.

[@bestekoltuk1738]

Thanks a lot! 😊

[@linolous-7983]

how did you get the round cursor when previewing the prototype?

[@mavidesign]

I think that was automatic for me:)

[@carrotan896]

Not sure how you got the on drag to move both directions, mine keeps moving to and fro the two same images... :(

[@tissoeh]

You are placing the drag interaction on the entire component, not the image component (make sure to follow very closely from around 12:15)

[@kriswayne7938]

​@@tissoeh do u know why it functions in some components and does not in others? Even though i prototype with the child element

[@KanzaLiaquat]

​@kriswayne7938 did you find the solution? I am prototyping child component too but still not able to get through

[@sugapipe6797]

Hi mavi... Thanks for all gems you drop, can you make a video on how to make a mini country flag change seen on top of apps... After clicking a drop-down beside it

[@mavidesign]

You mean like a language change dropdown menu? Adding that to my queue:)

[@sugapipe6797]

@@mavidesign yeah... I'll really appreciate it!

[@wajatu123]

Hello! I was wondering if besides being able to add texts and figures to each picture on the slides, can you also add each picture to prototype? So that you can slide in the carrousel but also touch the images and it redirects you to a different screen? Thank you! New subscriber to your channel, from MX.

[@Babbitty]

I would like to be able to do this too.

[@kriswayne7938]

Makina a separate component of images with on click variant might work.

[@sakuyadaisukidayo]

wow thank you so so much😭😭😭😭😭😊😊😊😊😊

[@ErlendSolberg]

If Adobe did SOMETHING right, it was prototyping in XD. Much easier and much more understandable. This is just too complex for its own good - or rather the users good.

[@InOrlando]

Jeez, this was complex.

[@HugoEscutti-yj8mq]

Forggotten this is Zoom efects in carrusel

[@divyamanii]

❤❤❤

[@AnrideBeer]

Dude! Way too much scrambling around.

[@MrAshishdhengale]

Too complex, Adobe xd have better functionality

[@papykillme]

The author make it look too complex

[@Khang_Nguyen222.2]

confusing tutorial

[@fypyfyp]

thank you for created this tutorial, it was really helpful!