Figma carousel animation in 5 minutes

[@maricarmenriveraaguero3165]

OH MY FUCKING GOD, I swear to god i spent the last 3 days watching like 20 hour long tutorials and i just could not get it to work. You saved my entire proyect in 5 minutes. Just... insane. Thank you so so much.

[@Am_ro12]

I am just discovering the vast abilities of Figma and Im obsessed. So much so that I am angry at all my other Adobe apps haha.

[@Izzakgamerszone]

watch your tone kids come here to you know

[@Izzakgamerszone]

i get your happiness though

[@Sir_Ojimaojo]

Dude... your FUCKING GOD? Like funking??? 😂😂😂

[@xobk]

At 4:15 "I'll grab our first component here." What happened? Copy/Paste? I feel like I missed something and that's why it didn't work in the end for me.

[@fularareginamusa8773]

Me too🥺

[@beredan8321]

Press ALT while dragging it into the frame and it should work.

[@alliesofcode]

@@beredan8321 This saved me a lot, thanks Beredan

[@alliesofcode]

It all happened so fast 😂

[@fernandoseverinoalmeida7320]

Thanks ❤

[@ramireddygayathri]

Definitely,we want animation like this and many more

[@dafnikes5471]

I spent literally 2 hours trynna do a carousel on another "famous" tutorial here, only to do everything right and then have "gaps" and troubles in the prototyping stage, and FOR REAL man, the stage in your video where you did the prototype is the most easy to understand and correct one I've found! 💙💯💯💯💯

[@FluxAcademy]

Great to hear, thanks

[@R1Custom]

This is by far the best 👌 video on this. Highly recommended. Straight to the point and beautiful animation.

[@lizannedsouza1838]

This was really easy to do, thanks Tim & Flux :)

[@andreareyes5359]

This is not working for me at the end, the drag interaction is not doing anything, did i do something wrong or is it a bug? I've tried dragging in every direction and it's not working

[@luisnickshaw_new]

same

[@Biyodmr]

same here

[@odionjoshua5581]

thanks alot man, saved a life tho my interactions were a bit complicated, this actually did the trick

[@jackjack44181]

This was so useful!! The only helpful video!

[@shaealexx]

Thank you for the tutorial! Super easy to follow ☺

[@mattgib711]

Great tutorial, but man, how has Figma not made this easier yet?

[@jyothishmu-v4r]

thank you

[@franceslim9561]

Hi, I am wondering why we don't just frame and use horizontal scrolling. is there any different?

[@Idfkwhyy]

Me too, this looks too complicated for a simple carousel

[@TimGabe]

that's also a valid option, but then you won't have the "snapping" effect where the cards stops exactly in the middle on a drag interaction 😊

[@muratguler2882]

The cards wont snap when you use horizontal scrolling. They scroll endlessly

[@matsbjnnes366]

This is great! I got the effect working, but would love some way to make it seamlessly loop. I’ve tried adding extra on drag actions and I’ve tried duplicating the end pictures on each opposite end, but the best I’ve gotten is having it rewind back to start when changing one of the drag actions to a click action. I’d love some help!

[@KarinaPrado1111]

Thank you! I would love to see more. 🥰

[@alliesofcode]

Love this work 😇

[@hbshrvd]

thank you so much!

[@theunknown7381]

U made it so easy!

[@j.p.3513]

Thank you so. For me simple and understandable. And yes it wiould be fantastic to see more simply tips like that one.

[@syahmi_amin_]

Very useful, thanks!

[@TimGabe]

happy you liked it, Syahmi! 😃

[@abhaysarkar6991]

My 'change to' action is disabled for some reason. Can anyone please help me out?

[@ECMofficial]

Awesome tutorial! Need more

[@R1Custom]

If you don't have it already, can you make a video on coding design from figma to flutter. 😊

[@vinme123]

did you manage to find any good resource for this?

[@R1Custom]

@@vinme123 not really.

[@LiterallyJustMyThoughts]

For some reason it isn't working for me. idk what im doing wrong ughhhhh. Gonna keep trying though

[@juanp.5364]

Keep it up 👍

[@wilddestroyer8927]

Mine didn’t work 🙃

[@rainakareem7509]

Mine didn't work either

[@maostudio6430]

doesn't work for me

[@juliamarzec7119]

Same

[@carolabenitez1649]

yes please, more like this 🫶

[@finnross5360]

I would love to see more Hero Carousels.

[@shone1505]

Is it possible to have two clickable arrow buttons and when clicking on them moves carousel left or right?

[@anthonywelcher5036]

I am just starting out as a UX Designer. (I am a loser with no skills and many failures in life). But you def earned a sub with this one. A how to video on Figma that gets right to the point? Must be my lucky day! Thanks!!!

[@TfL1901]

Please dont speak about yourself that way.

[@mahrukhimran5486]

Hello. How to export a file like this so that it can be played out of Figma?

[@deegrafikera]

Hi. Thanks for sharing this. I have a question when I present using the iPhone, it's not centered, it's at the top of the device. I hope you can help me. - D

[@fularareginamusa8773]

I followed u step by step, but after playing it, it didn't slide like urs🥺

[@someonelastname8175]

Figma doesn't allow you to animate a single component with start/stop state, trigger and animation function. Which other design tools do. The need to duplicate controls is quite clunky to say the least.

[@uthmanosuolale6833]

Thank you @fluxacademy, this is Super helpful 👍

[@juanpablobartolome7264]

mine only slides to one side... help?

[@Ibibiofame]

Hi. amazing video first of all and thank you for all the tutotials. i am following along with my own images but at the prototype stage, selecting on drag doesn't give me the smart animate option. what could i possibly be doing wrong?

[@TheViomode]

step 2 is not clear, how you group theme in frame !!! i don't have the same icon whene i frame theme

[@sagarkrishnamurthy]

The way to group them into the frame as you said, he used Auto Layout. But Autolayout is a little bit more than just grouping. You should look into it. To use autolayout shortcut - Shift + A or you can also use the '+' icon beside autolayout on the right side menu.

[@lavelclaytorsProjectswPurpose]

Great video, very interesting. Can this be used for a mug? With the label going from one side to the other and the image is changing as you slide?

[@Product-designer23]

Thanks for this video, it explanation and as a beginner it helps please I would like to ask if we can get website animation tutorial also.

[@amh2762]

Thanks for the tutorial man, just that when I do one with the carrousel starting from the far left, once when I want to go back form reaching the far right, when I stop at the middle, the interaction from the middle one takes me back to the one from th efar right, I think I need to duplicate the one in the middle just to go back from it but I'm having this issue.

[@preranabaruah4029]

thankyou

[@WilgoPengel]

I try to do it but it is not working can any body help me?

[@zographiaa]

Link is expired

[@idostuff5766]

Dosent work for me 😢

[@samduss4193]

I feel strange not to have to specifically say if right or left .

[@pardesco_]

I followed this exactly and it didn't work

[@ranjith-u6l]

how to make a carousels like you showed in the intro,0:02

[@TemitopeFanawopo-q6w]

The connections were a bit confusing.

[@vamboo8918]

tq

[@mohammad6529]

Doesn't work😢:)

[@jc-iz8lp]

Framer did this long ago and way better

[@TimGabe]

appreciate the comment, JC! 😃 big fan of Framer and I make tutorials about that software on my channel, but my personal opinion is that Figma and Framer are still two very different kinds of software and can't really be compared at this stage. Figma is still the go to tool for pure design work, while Framer is becoming the standard for designers when it comes to web development! 👌

[@drivedata2964]

it was quite good, but it was not auto carousel

[@evanmanni2723]

Sad how XD can do this in a heartbeat. In less than 1 minute

[@rust5427]

this guy is really hot

[@DiegoGutierrez-p3u]

i need help lol

[@floyd1411]

You mean ADOBE Figma carousel animation. :P

[@BenjaminKwaku]

your teaching style is confusing