How to build a fancy Scroll/ carousel interaction in Figma [Sneaker app]

[@AkashYadavUX]

Those who are facing issue with the interactive components and the drag being not working properly can checkout this new video where I have proposed an alternative method : kzbin.info/www/bejne/rZ3EemCom9mne80

[@filiptopolovec9948]

Excellent tutorial 11:39 was the part I was missing in other KZbin tutorials on how to create basic carousels in Figma. Very clear explanation, ty.

[@SyndeSTTD]

Helloo can i ask where do you get the asset? like the HD shoes? thanks akash!

[@AkashYadavUX]

You can pick them from the Nike.com website.. just go to their site and right click save image :)

[@Mohamed-uk5xr]

when animation move by reverse it only switch bet last two products only , do u know how to fix ?

[@marcello511]

Hi! I followed your instructions but the image scrolls in the second and then, in whichever direction you scroll, it goes back to the first and then to the second indefinitely. Basically only 2 images scroll to each other, why?

[@AkashYadavUX]

Hey Marcello There seems to be an issue in the variants that started occuring after a Figma update. Figma seems to be changing a few things on the interaction front. It worked for me somehow. I will post a rectified video for the same, it's an easy fix though 🙂

[@rashanuseibeh1977]

Yes ! Me too !! Great video but it didn’t allow more than 2.

[@kakachihataki6877]

@@AkashYadavUX is it fixed ?

[@bvs455]

@@AkashYadavUX Amazing animation! I tried to implement that and I've got the exact same problem. Could you at least explain that easy fix for us?

[@steff162]

same thing is happening to mine. i'm guessing its the anchor points it keeps jumping to another point. have you fixed it in yours?

[@DankeAndre]

Please i did everything as shown in the video. but mine doesn't go forward and backward. the movement is just forward only, except for the last two. please help me with a solution, thanks

[@nicolasbrun9795]

When I select all the frames as in minute 5 of the video, the only thing that gets smaller is the frame, not the photos and the letters. How do you do it? I select all the elements and they don't all get smaller uniformly.

[@rocksworldng6519]

This tutorial is awesome and very explanatory, Thanks. My prototyping keeps snapping differently from where i pull it from... If i pull from the side it changes to the bottom... How can i fix that?

[@ashikmathewtharakan8146]

Great content as usual. Waiting for the rest of the videos from the principles of design playlist :)

[@AkashYadavUX]

Will upload soon after the design system series.. have started recording principle of design vids.

[@lub-czasopisma]

Thank you! (also for the alternative method) you're great at explaining.

[@Phoca_Vitulina]

Awesome, clear tutorial. Thank you so much!

[@REdbLACKI]

Your tutorial is as smooth as your app :) I love it! What if I have 100 or 1000 products, do I need to do each frame one by one for 1000 images?

[@AkashYadavUX]

unfortunately yes! currently there are no work arounds.

[@augustos.6641]

The usual is not to do that. Instead use it as a carousel with some featured products (no more than 5) and use some kind of tertiary button like "See all" above or on top of the carousel linked to the complete catalog.

[@dcrodpar9949]

I do the same as the tutorial and the drag doesn't work to return, it only works in one way.... help please

[@RaahiT-j2w]

awesome video with great explanation! thank you!

[@lamaghonaim1169]

you're a life saver 😭🙏🏻

[@aakashkumar4833]

This same was thought by Spata ser in after effects, but this is much much easier, i loved it

[@aakashkumar4833]

Also i have a connection with you on LinkedIn, i have sent DM too, pls see

[@Thonia_Roi]

thank you for this tutorial, but I'm stuck at 7:00 what is the 'command key'?

[@LHallam]

Press v before trying to move

[@Skepticastiel]

I do the same but clip content doesn't work?

[@nicolasbrun9795]

does not work, it does not let me move to the right. Can someone help me?

[@antonioedson1878]

Great! How can I get the source figma files please

[@AkashYadavUX]

Hey I will be posting a rectified video as the drag feature is not working properly for a lot of folks in the newer Figma versions. Will be posting the source file with the new video in a couple of days.

[@AbhinavKumar-qb5ce]

Bro this video is really helpful for me

[@praveenmanickam4942]

looks great and awesome explain man..😍

[@akanimerealm]

when adding these animation in middle of the page and after scrolling the page come from top i mean the scroll bar position resets

[@nicolasferney]

Great stuff Akash! Thanks for sharing. ^^

[@gmark247]

It drove me nuts why it kept dragging between the first and second only.. It is a shame figma changed things around, this is a cool animation

[@AkashYadavUX]

Totally agreed.Figma has changed a lot of things but they shouldn't remove existing functionalities.

[@sofiapaternocastello4124]

Is there any way to fix that?

[@gmark247]

@@sofiapaternocastello4124 yes, the link to the video is in the description 🙂

[@akratijain5643]

Hi Akash I’m trying the exact same instructions but my clip content is not working. What do I Do???

[@AkashYadavUX]

Hey! Due to recent figma updates. Drag is not working properly in component states. Have posted a fix video here [ FIXED] How to build a fancy Scroll/ carousel interaction in Figma kzbin.info/www/bejne/rZ3EemCom9mne80

[@colorblindcr]

For some reason, when I drag left, the cards are still moving right. I've linked them correctly (triple checked). What do you think I'm doing wrong?

[@AkashYadavUX]

Hey, Nothing wrong, in the newer versions , Figma has removed bi directional drag from interactive variants. A lot of folks are facing the issue. I will post rectified video for that. It's a simple fix.

[@colorblindcr]

@@AkashYadavUX awesome. Thank you. Ill be waiting

[@cjn2109]

Nice tutorial, but there is only one issue that i see not only i have :d This weird prototyping issue with variants not swiping up in the right way :/

[@arghavan8552]

you are great and explain very well. thank you🙏

[@ejay.u3373]

Hello amazing video! I tried to recreate this work but I have an issue, the on drag feature isn't working well. I can drag right but I can't drag left in prototype, please help! Thank you.

[@AkashYadavUX]

Hey! Seems like an issue with interactive variants on Figma, other people are facing the issue too. Will post a alternative video soon.

[@ejay.u3373]

@@AkashYadavUX thank you very much!! I will look forward to the video! You gained a subscriber!! 🙏🏾😁

[@rashanuseibeh1977]

@@AkashYadavUX can you please post the solution today as I have a submission coming up 🙏🏻 or please just type it in.

[@AkashYadavUX]

@@rashanuseibeh1977 hey One way to do it is to not create interactive variants. simply created artboards and do the exact same prototyping. Other way is to create a few more interactive variants and link the back drag to them.

[@rashanuseibeh1977]

@@AkashYadavUX amazing will try that now! Thanks !!

[@bungsu8149]

i'am stug if swipe from photo 3 to 2 to 1 if i swipe photo 2 to 1 i can't

[@sebastiannores415]

4:20 to 4:23 i don't get what i need to do to create carousels. Help pls

[@amolkoli3541]

Thanks for this awesome animation. I have tried to create the same, but I am facing one problem in my file back scroll animation not working.

[@AkashYadavUX]

Hmm that's odd. Figma has done some changes recently to interactive variants that could be creating the issues may be. Let me check if it's happening, will suggest an alternative if that's the case.

[@gauravw7]

same problem

[@AkashYadavUX]

Seems like an issue after recent updates of interactive variants. I will figure out a work around✌️

[@Do_DSGN]

​@@AkashYadavUX Awesome tutorial thank you. Did you find how to fix it please ? Back swap is not working for me too. Thx :)

[@NeoGiMedia]

Only 2 images showing. Otherwise everything perfect. Please solve the issue

[@kavyakommineni4421]

This was awesome, thanks for sharing 😊

[@shadil8452]

You earned a subscriber ✨

[@musicwithaman]

Hello sir have you shared the rectified version of this dragging problem ?

[@AkashYadavUX]

Hey I will be posting in a few days. Wasn't able to upload it due to sudden travel plans.

[@musicwithaman]

@@AkashYadavUX ok sir will wait

[@balabhaskergorpina]

On prototyping frame 2& 3 they run in between 2 &3

[@arunimapaul563]

At 8:13 how u are keeping "Big frame 2 " heading in same place and shifting frames

[@AkashYadavUX]

Hey I used the arrow keys on keyboard to move things around without shifting the parent frame :)

[@sagrikachauhan7554]

PLEASE ALSO TELL SHORTCUTS FOR WINDOWS MR.MACBOOK PRO USER

[@bakaamv9596]

where to get thhose images from like such product perfect

[@AkashYadavUX]

These images are from Nike’s own website. These are the real product images :)

[@NnekaOlisa]

Thank you for this

[@SyndeSTTD]

Let me like first tomorrow i will try❤️👁👄👁

[@aniketwakekar918]

Hit command mean which button...

[@AkashYadavUX]

CMD on mac, CTRL on windows.

[@iamdciax2]

Thanks

[@alejandroortiz3803]

Bro I love you!

[@AkashYadavUX]

thanks man

[@dizee5591]

I am stuck At 7:00

[@KathiyawadiMoz]

Please hindi video upload

[@enchantedtuber4169]

ggwp👍

[@Zeeko211]

maybe just take the vid down?