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 : ua-cam.com/video/wlaI-rfttEk/v-deo.html
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?
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 🙂
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.
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.
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?
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.
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
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.
@@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.
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.
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.
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 ua-cam.com/video/wlaI-rfttEk/v-deo.html
![How to create amazing carousels using components | Figma [part 1]](/img/n.gif)
Excellent tutorial 11:39 was the part I was missing in other UA-cam tutorials on how to create basic carousels in Figma. Very clear explanation, ty.
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 : ua-cam.com/video/wlaI-rfttEk/v-deo.html
Helloo can i ask where do you get the asset? like the HD shoes? thanks akash!
You can pick them from the Nike.com website.. just go to their site and right click save image :)
Great content as usual. Waiting for the rest of the videos from the principles of design playlist :)
Will upload soon after the design system series.. have started recording principle of design vids.
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?
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 🙂
Yes ! Me too !! Great video but it didn’t allow more than 2.
@@AkashYadavUX is it fixed ?
@@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?
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?
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?
unfortunately yes! currently there are no work arounds.
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.
Thank you! (also for the alternative method) you're great at explaining.
Awesome, clear tutorial. Thank you so much!
thank you for this tutorial, but I'm stuck at 7:00 what is the 'command key'?
Press v before trying to move
when animation move by reverse it only switch bet last two products only , do u know how to fix ?
looks great and awesome explain man..😍
you're a life saver 😭🙏🏻
This same was thought by Spata ser in after effects, but this is much much easier, i loved it
Also i have a connection with you on LinkedIn, i have sent DM too, pls see
awesome video with great explanation! thank you!
Bro this video is really helpful for me
Great stuff Akash! Thanks for sharing. ^^
At 8:13 how u are keeping "Big frame 2 " heading in same place and shifting frames
Hey I used the arrow keys on keyboard to move things around without shifting the parent frame :)
You earned a subscriber ✨
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.
I do the same but clip content doesn't work?
4:20 to 4:23 i don't get what i need to do to create carousels. Help pls
On prototyping frame 2& 3 they run in between 2 &3
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
Totally agreed.Figma has changed a lot of things but they shouldn't remove existing functionalities.
Is there any way to fix that?
@@sofiapaternocastello4124 yes, the link to the video is in the description 🙂
I do the same as the tutorial and the drag doesn't work to return, it only works in one way.... help please
you are great and explain very well. thank you🙏
when adding these animation in middle of the page and after scrolling the page come from top i mean the scroll bar position resets
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?
Great! How can I get the source figma files please
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.
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
This was awesome, thanks for sharing 😊
does not work, it does not let me move to the right. Can someone help me?
i'am stug if swipe from photo 3 to 2 to 1
if i swipe photo 2 to 1 i can't
Hello sir have you shared the rectified version of this dragging problem ?
Hey I will be posting in a few days. Wasn't able to upload it due to sudden travel plans.
@@AkashYadavUX ok sir will wait
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.
Hey!
Seems like an issue with interactive variants on Figma, other people are facing the issue too. Will post a alternative video soon.
@@AkashYadavUX thank you very much!! I will look forward to the video! You gained a subscriber!! 🙏🏾😁
@@AkashYadavUX can you please post the solution today as I have a submission coming up 🙏🏻 or please just type it in.
@@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.
@@AkashYadavUX amazing will try that now! Thanks !!
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 :/
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?
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.
@@AkashYadavUX awesome. Thank you. Ill be waiting
PLEASE ALSO TELL SHORTCUTS FOR WINDOWS MR.MACBOOK PRO USER
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.
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.
same problem
Seems like an issue after recent updates of interactive variants. I will figure out a work around✌️
@@AkashYadavUX Awesome tutorial thank you. Did you find how to fix it please ? Back swap is not working for me too. Thx :)
where to get thhose images from like such product perfect
These images are from Nike’s own website. These are the real product images :)
Hi Akash I’m trying the exact same instructions but my clip content is not working. What do I Do???
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
ua-cam.com/video/wlaI-rfttEk/v-deo.html
Hit command mean which button...
CMD on mac, CTRL on windows.
I am stuck At 7:00
Thank you for this
Only 2 images showing. Otherwise everything perfect. Please solve the issue
Bro I love you!
thanks man
Thanks
Let me like first tomorrow i will try❤️👁👄👁
Please hindi video upload
ggwp👍
maybe just take the vid down?