Create a SWIPEABLE IMAGE CAROUSEL in Figma (Tutorial)
Vložit
- čas přidán 10. 11. 2022
- 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 - Jak na to + styl
Wow, this is so complex. Thank you for this detailed tutorial! Hope I manage to make it work.
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.
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!!
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!
Most effective and concise tutorial on CZcams! Worth every second watching 👍Thank you so much for sharing this valuable knowledge! Subscribed!
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
Thanks so much! Really clear and helpful tutorial!
Thank you! I used it for the final project
Thank you very much for sharing this content. Very well explained!
This was super helpful. Thanks so much for sharing this information!
Thank you for such a helpful tutorial.
thank you for created this tutorial, it was really helpful!
you maked it so easy, thank you so much
Great explanation! Thanks a lot!
The way of your teach is so clear and understood. ☺😌
figured it out in the end, thank you
So clear and useful, thank you so much!
Thanks for tutorial 💡
Super helpfull and interesting, Thankyou!!
Very helpful!
OMG Thank u soooo Much!
Thank you for the tutorial. I was wondering what would be the fastest way to make another slider but using different photos?
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!
Thanks a lot! 😊
you are very good, i love it
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.
GREAT TUTORIAL! If we want to create Cards (combination of text and images) instead of just images, would this tutorial work?
oh my god...this is so useful
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?
Teşekkürler dostum!
How to give interaction to each image? I mean I want to open a pop/overlay on click on each image
wow thank you so so much😭😭😭😭😭😊😊😊😊😊
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 :)
Can this work for text boxes too?
this was so complex i almost died. but thank you tho :)
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!
This is such a good question! I'd like to know the answer too!
My text won't scale even when I set the scale constraints.
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
I have the same issue, hoping that someone can help us fix this one
@@jeriemeenidera143 I'm guessing you need to add additional prototype links in reverse to swipe backwards.
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?
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.
Same problem
If you carry out the prototyping path from the image and not from the container, it will work well.
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.
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
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
If you carry out the prototyping path from the image and not from the container, it will work well.
how did you get the round cursor when previewing the prototype?
I think that was automatic for me:)
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
You mean like a language change dropdown menu? Adding that to my queue:)
@@mavidesign yeah... I'll really appreciate it!
My question is have been trying hard to fit in a Picture in a Ellipse frame it's not copying in it?
Is it necessary to remove triangle cause my image isn't copying in the frame
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.
I would like to be able to do this too.
Makina a separate component of images with on click variant might work.
The drag direction does not go with my drag direction, it goes one direction only. and stuck at the first and second image
Same, did u find any solution?
@@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.
@@h.b.1315 Thank you so much 😭🙏
God bless
@@kriswayne7938 You're welcome. We're in this together, haha!
@@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?
Not sure how you got the on drag to move both directions, mine keeps moving to and fro the two same images... :(
You are placing the drag interaction on the entire component, not the image component (make sure to follow very closely from around 12:15)
@@tissoeh do u know why it functions in some components and does not in others? Even though i prototype with the child element
@kriswayne7938 did you find the solution? I am prototyping child component too but still not able to get through
❤❤❤
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.
This is where XD is so much better than Figma. The process of doing this in XD is a quarter of the effort.
Jeez, this was complex.
Forggotten this is Zoom efects in carrusel
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.
Too complex, Adobe xd have better functionality
The author make it look too complex
Dude! Way too much scrambling around.