How to design Automatic Carousel/ Slider in @Figma
HTML-код
- Опубликовано: 10 сен 2024
- if you are wondering how to add a carousel using buttons and how to add carousel indicator dots, then here is the new video to follow: • Button controlled Scro...
enjoy🤩
Definitely follow me on Twitter for my upcoming NFT project, free giveaways guaranteed 🤓: / 0xakashy
Hey everyone, if you are wondering on how to add carousel using buttons and how to add crousel indicator dots, then here is the new video to follow: ruclips.net/video/oE0v0wfX2AQ/видео.html
enjoy🤩
At 1:37, please note to select the bigger frame by right clicking and choosing frame selection, only then the frame will get adjusted.
For those who come here recently, holding down CTRL makes it possible to directly drag the outer container frame
Thx you so much
bro saved my life with it everyone showing the outdated solution or to sacrifice with ur design
this video was really helpful for me, I had watched several carousel animation videos but you made the process look so easy and fast. Thank you so much for contributing to ui/ux community.
This video is so perfect. First time someone explained steps in figma this much. Great for beginners.
Images aren't moving at all
What might be the issue?
I’ve tried to follow this but can’t get the delay interactions to work once the frames have been made into a component.
They work in a frame but won’t allow ‘after delay’ to be selected from the interaction choices.
same, any help?
Thank you so much for helping us new designers!
This works perfectly and so easy to follow, thank you so much!
Thank you, I was looking to create this exact animation but I couldn't find a video on it. Your tutorial is clear and straight to the point, it really helped, cheers.
Very well explained and slow paced. I was able to follow and recreate, thanks!
Glad it helped 🤓
Thank youuu for the tutorial I learnt a lot❤
Doing some prototyping for school, this was so helpful - thank you
Short, crisp and very helpful! Thanks!
Thanks very much, made it super easy to mock something up for a project I'm working on!
Glad it helped!
Hello, i’d like to know why it just fades out and not actually slides like whats showing in the video. I did it step by step repetitively. I’d like to know if you tutorial requires the payed version to do what you did😊
Thanks for this video. It's understandable and precise.
In slider 2 while I want the second image to be at the first how do we do that it's not happening what arrow keys you've mentioned please tell
amazing, you're teaching skills are great, keep it up brother
You have no idea how many times I failed to do this until I got to your video! YOu are the best!
thank you very much, im so glad that now i know how to make a slider in figma
This was incredibly helpful and straight to the point, I subscribed!
thanks for this..straight to the point and easy to understand✨
thank god for people like you
Excellent tutorial man
Thanks. I wish you great success and happiness
Thanks for the tutorial! I had a little problem: my last frame (with thw last image) is linking to the first one but Figma is not allowing it to do it with "after delay". What can I do?
you did it in the easiest way to make understand. thanks a lot.
I think this method can't be done anymore because I've looked at it 3 times and done it but I can't do it, in the end figma shows me that there are 3 components and you and another person that I saw who did this procedure only one comes out, and When I put it in a frame to see if it works, it doesn't do anything.
this was so helpful thank you!!
I really like your voice, your way of explaination the pace too...just perfect. You got a new sub! Thanks a lot
Tysm akash for this wonderful tutorial.. it's a lifesaver for me . And i have included it in my prototype and it looks amazing 😊😊.. i follow ur tutorials and it's easy to understand and work along together 😁👍 tysm
Amazing tutorial, solved my problem so quickly! Very concise and good information Akash 😀
I appreciate the helpful demonstration! Is there a way to ensure that the final image in the slideshow doesn't swiftly transition back to the first image in a rushed manner, causing a blur of previous images? I'm looking for a smoother transition, where each image is presented nicely, and the return to the first image is seamless without any visible blending of former images.
Did you find out?
Thank you very much! I've been searching for it for eternity!!
Best video everyone else is going around in circles
Thankyou for this video, Akash!
The tutorial was so concise and clear. It was really helpful. :))
Muchas gracias, estuvo simple y concreta tu explicación, te felicito!
thanks, Akash struggled with it for days, but it's all solved now. Really appreciate it and look forward to more videos from you.
Most welcome!
Here again coz i forgot 😂😂
Buts its really helpful
Thanks 😊
This was so so helpful! Thank you!
Terima kasih atas tutorialnya karena aku sudah bisa membuat animasi carousel di aplikasi saya, saya bangga dan mengerti bagaimana mr akash menjadi hebat.
Hi, I am still not able to move the slider. On click is working but not the first option
Thankyou so much! It was a LOT of help!!
thanku so much Akash
this really helped me😃
Thanks so much man!!
SIR, YOU ARE A GODSEND!!
I was searching for this for my portfolio.. and here I got notification.
It works but it’s not showing well on my prototype. When I’m designing it it’s in the centre but when I go to prototype it barely shows and it’s driving me crazy
Nothing is happening with command key. Any other way to do the same?
Wow, another great video and well written. It was very concise and clear! Thank you again Akash!
My pleasure!😇😇
this tutorial is so good, thank you so much!
Along with it what if we also want to have a drag animation in it?
Great tutorial, easy to follow along with. Thanks!
thanks a lot for this. your explanation was simple and clear. finally i could so this :D
Saya memang masih pemula, tapi setelah mengikuti dengan cermat ternyata bisa 😁
Hi sir, i have a question like...can we write on that picture ? Like, i got a carousel on personality development and after watching this video i thought to use your idea and i need to add some of the words on the image for the course i'm working on
thank you. I successfully made it.
i love you
thank you
OMG i was going insane! THANK YOU!!
veery nicely explained thnkss
You are most welcome
I want the after delay to stop when clicking it, how do I do that?
Thanku for helping bro😊
Very helpful and easy to understand
Awesome..so easy to understand..
This video is so helpful! Thank you!
I found this very helpful on a project I am currently working on. Thank you
Glad it was helpful 😇
Sorry I couldn’t hear you properly, how did you put the 4 pictures in a frame?
Thank you ! Great tutorial.
Very helpful! Thanks!
Thxx man, it was really helpful
Thanks mate!
good job it's really help full
why used component set . insted of only image componanet
I don't understand why, I followed ur exact steps but it's not working, I did this 2 weeks ago and it worked, since then that animation has stopped working for no reason and I can't make a new one, I'm going slightly insane lol
3:41 how cant i move this part?
Thank u so much, u were a great help.
I found this video really helpful. Thank you and keep creating contents
Glad it was helpful!
Can i export a prototype as a website ? I know i am gonna love making them but will I be able to make it work easily ?
You're awesome my friend.
Hi Akash, i followed all the steps, but the animation not happening in "after delay"
Any idea how the prototype would be so that the carousel stops when mouse enters?
Gracias por el video, no me había dado cuenta de hacer este movimiento creando componentes
:)
Hey Akash,
thank you for the tutorial! the video was helpful and it really elevated my portfolio website. I was wondering how can i export this carousel into html?
Hey Akash, thanks for posting this video. It is very insightful. Is it possible to add href button's to each of the individual slides? Also are you able to make it loop instead of look like it is rewinding after each cycle? Thanks!
Hi Tim, yes it's possible to add separate buttons inside each slide. You just have to group image and button in one and then follow the same steps I have explained in the video.
You can make the slider cyclic as well, I have not done that as it requires a few more tricks and I didn't want to complicate this video.
But how to achieve cyclic scroll is something I have explained in my previous video here
ruclips.net/video/K97aa24WlKo/видео.html
@@AkashYadavUX Great, thanks. I added you on Twitter too.
@@AkashYadavUX i am interested in this
you can add an extra step on the component set of animation. Just make a new instance on the component set, add the first photo on the end of the carrousell, and then make the transition between those two identical instances instantaneous and you can't even tell that the animation got reset.
Thank you.
Thanks brother ❤❤
Hi Akash, thank you very much for this video. But my carousel is not working even though I followed the exact same steps. When I hit play, the image is not moving.
what do you press when you slide the photo?
Hey
I used Shift+ mouse to move the images quickly as this makes sure that images always stay in same line and doesn't move out of the frame. :)
Awesome. Thanks for this great lesson!
Your final frame move back to 1st one and seems odd. To avoid it. Do repeat the 1st frame to final and reduce the animation 1ms.
Thank you so much. It's working 👍
It's working amazing thank you so much
Thanks for this video, Akash!
There's a way to connect the dots to the images and select them to change the status? Or Scroll with the mouse and the dots change with the image?
Thank you!
Hi! Just wanna say thanks for this tutorial! It is very helpful!!
Thank you😇
Thanks!
I found this super useful, thank you
You're welcome!
Hi Akash im having issues to move the frame to the second image.
Thank you
Loved it. The first image looping from the last seems to have a rewind effect. Is there a way to make the loop go from right to left as well?
I think that if instead of directing the last image to the first, you direct it to the one before, and do the same with the remaining, that could work. But probably would need to try it first.
Hey Swapnil
To loop the animation you need to create an additional frame which should be same as the first frame and place this as last frame.
Connect second last frame to this additional frame via instant setting in prototyping, similarly connect this new frame to first frame again with instant.
You can check older video on mu channel around cyclic carousel. I have explained this bit in details :)
Thank you! How do you make the transition from the 4th image back to the 1st image to be similar to the others?
Hey Mark,
I have not explained that bit in this video to keep this video simple. The transition you are asking for requires a trick, i have explained that bit in my other video here: ruclips.net/video/K97aa24WlKo/видео.html
@@AkashYadavUX Thank you!