Create a SWIPEABLE IMAGE CAROUSEL in Figma (Tutorial)

Рет қаралды 117,382

Жыл бұрын

Get the SOURCE FILES for this project ($1.99): payhip.com/b/1TPaI
Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Download FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
Mobile App UI Design Playlist: • FREE Figma Mobile UI D...
In this Figma prototyping tutorial, we'll take a look at designing an interactive and swipeable image / object carousel for your mobile or web apps. Using smart animation prototyping and a smart component structure, we'll be able to get a result where individual photos change sizes as they are being swiped through. It also serves as an image gallery, nicely presenting all images in an understandable and interactive way.
How to create / design build an interactive swipeable image gallery slider / carousel component in figma (step by step explanation tutorial with source files available for download)
Topics: figma image carousel slider, figma interactive components, ux ui prototype, browse through images figma, image preview component
--------
© 2022 Mavi Design

Пікірлер: 84

@andreic048 Жыл бұрын

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

@andiyas 8 ай бұрын

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 5 ай бұрын

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!!

@gracewee266 Жыл бұрын

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

@xsomerandomchick69 4 ай бұрын

Thank you so much for this!! it works so well on mobile and sometimes thats hard to come by! I followed all the steps and it worked amazingly!

@oozecloud4511 2 ай бұрын

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

@grahamh9404 Жыл бұрын

Thanks so much! Really clear and helpful tutorial!

@HariHaran-wm3os Жыл бұрын

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

@sofiamontes6307 Жыл бұрын

Thank you! I used it for the final project

@guaraferreira797 Жыл бұрын

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

@emanuelb.2715 Жыл бұрын

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

@bowbowbow123 11 ай бұрын

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

@taneshawalker Жыл бұрын

Thank you for such a helpful tutorial.

@sarahlisa8290 2 ай бұрын

So clear and useful, thank you so much!

@joellethompson6682 11 ай бұрын

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!

@kelvinator131 Жыл бұрын

Great explanation! Thanks a lot!

@kanikasharma9467 Жыл бұрын

you maked it so easy, thank you so much

@tanyash.5353 Жыл бұрын

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

@Storiesbyhomes 10 ай бұрын

figured it out in the end, thank you

@bryanyovera122 7 күн бұрын

Thanks for tutorial 💡

@azzamrasyiqel-faraby2056 Жыл бұрын

Super helpfull and interesting, Thankyou!!

@MaxCipicchia Жыл бұрын

Very helpful!

@ordago3100 Жыл бұрын

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

@user-oi1yw1hb7s 7 ай бұрын

OMG Thank u soooo Much!

@bestekoltuk1738 Жыл бұрын

Thanks a lot! 😊

@thanhminh7336 11 ай бұрын

you are very good, i love it

@Charmyng_and_Chubby 5 ай бұрын

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.

@tugayungor9229 Жыл бұрын

Teşekkürler dostum!

@niho721 11 ай бұрын

oh my god...this is so useful

@ashokpujari4702 3 ай бұрын

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?

@user-qp3wo7hn1p Жыл бұрын

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

@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!

@user-uh9st1xz9r Жыл бұрын

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

@michellebettschen5758 3 ай бұрын

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

@gabeestrada8854 Жыл бұрын

Can this work for text boxes too?

@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?

@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.

@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!

@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 4 ай бұрын

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

@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 :)

@DenzellHarris 11 ай бұрын

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

@winnetouch 3 ай бұрын

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 6 күн бұрын

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

@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 4 ай бұрын

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

@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

@linolous-7983 Жыл бұрын

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

@mavidesign Жыл бұрын

I think that was automatic for me:)

@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.

@markjoncheff Жыл бұрын

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

@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 9 ай бұрын

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

@divyamanii 11 ай бұрын

❤❤❤

@InOrlando 2 ай бұрын

Jeez, this was complex.

@zend969 11 ай бұрын

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.

@ErlendSolberg 2 ай бұрын

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.