How to create amazing carousels using components | Figma [part 1]
Вставка
- Опубліковано 9 лип 2024
- In this video I will show you how to create carousels in Figma using purely components and variants. It is the first part of a series of two videos where in the second part I will be creating a slightly more advanced carousel.
Make sure you learn components, variants and smart animation well before moving on to the next part.
![How to build a fancy Scroll/ carousel interaction in Figma [Sneaker app]](http://i.ytimg.com/vi/9cVSZpJimk8/mqdefault.jpg)
You saved my life. I spent 5 hours watching different tutorials, trying, but was not able to create exact this carousel. But now I have it. Thanks!
You are welcome! This comment made my day.
The best! Easy-peasy! Thanks!
Great easy to do video!!
The best one on this subject for sure...thanks!
Wow, thanks!
This tutorial is perfection. Thank you so much for a valuable lesson with incredibly simple steps.
Glad it was helpful!
Hey thanks so much! Is there a way to make these after delay so that it can be an automatic carrousel? thanks!
amazing! thanks
You are very good! Again, a great video with super simple and easy to follow instructions
Thank you so much!
thanks! is possible to do it with 100 images without having to bind an animation for each?
Great tutorial! Thanks a lot!
Glad it was helpful!
YOU ARE LEGEND!!!
the best one!!!! !! thank you so much. your video helped me with my school project
You're very welcome!
The page indicator doesn't work for me, when I pull out as a component. The buttons don't expand, only the color changes
Love your tutorials... but would love to see more ProtoPie!
More to come! Thank you.
ty so much, the effect is awesome,
Glad you like it!
What do yo udo if you have 4 or more elements in the carousel? Then you can't just center align.
amazing 🤩
Thank you! Cheers 🙌
This video Was educative and simple to understand. Keep it up ❤
Glad you liked it!
This only works if your carousel has 3 options. What happens if you need more than 5? Working on it but not sure if the same structure can work
same to me i want to use 4 options and more
doesnt seem to work if I put it into a group... am I missing something?
thank you for the video. but how do i change the images?
Hey there, nice tutorial. Helped me to start with but I do have a doubt. I tried the same method but on 5 images instead of 3. Now since there are only 3 Aligning positions in auto layout I.e. left, center & right, how will I apply this effect to the 2nd and 4th images of my carousel out of total 5 images? A solution would be much appreciated. Thank-you.
Remove the auto layout and adjust the frame manually 👌
Hey amazing tutorial! but i have one question. How would I change images? the carousel you showed consists of one image. How do I add multiple images to it?
also curious about this @ProductSensei77
This is AMAZING. Thank you so much!!
Also, I think you are stressing the wrong syllables and mispronouncing "Variant"... but that's just me listening as an American English speaker/English teacher... 😬
thanks you
very helpful. thank you
I'm glad you found it helpful! Thank you for you comment.
Hello Good morning I currently watched your Tutorial and I enjoyed and I was able to understand the process it’s really nice …. But I encountered a difficulty while prototyping I was unable to drag to display the last image rather it keeps going to back to the first image I’m not able to view the last image …. Please kindly help if there’s anything I can do or maybe I made a mistake
Thank you so much
Same problem. Did you find the solution?
@@KanzaLiaquat not all
Thanks a Lot Man 👍👍👍👍👍👍
Welcome 👍
I didn't understand the concept of Property and value. What are they? what difference . in which cases we need to rename them? I m super new at figma
you are awesome bro
Thank you so much 😀
Hey @Product Sensei, does this carousel only work for 3 images?
And if so, How do you change the positioning of the dots
is there a plugin?
I have tried using 4 cards but after created component it is not in shape
why i can't do. i try make same with you tutorial. i stug if swipe from photo 2 to back photo 1
same with me
Amazing stuff you’re doing, my brother. I just stumbled upon your channel. I have an issue in locating the “variant value” in input Yes&No, mine shows “component configuration”. Please help. Thank you.
Thanks for the sub!
all that work for nothing. @ 7:35 when I try to drag my connection to the second picture in the middle it auto snaps changing my hotspot. I can't connect the two.
I'm so frustrated. I have watch this video over and over and the carousel doesn't work. First my image doesn't want to resize on my frame and even if I just create a box and put the image and then make it a frame; It doesn't work. Can anyone can point me in the right direction?
Update. I finally did it! It is not perfect but it works. Now my questions is how do I make the image clickable to the product page?
Saved
adad
savedd
This is a good tutorial but does it work with more than 3 images ?
Saved t
It's too complex.
This's too frustrating for me, i have watched this video countless time but it's not working me.
Please pronounce Var-iant not Va-ra-iant, Nice tutorial by the way. Thanks!
My bad. Thanks for the tip!
No, Va-ra-iant sounds cool. I m gonna pronounce like this always.
Difficult to follow you there is any reason for not clearly explain it ??
not good explaning
This video doesnt go into depth on how to do it correctly and you don't answer any questions in your comments section. You're not helpful.