How to build a fancy Scroll/ carousel interaction in Figma [Sneaker app]
Вставка
- Опубліковано 28 лип 2024
- 🔗 Source File for the fixed interaction: yakash91.gumroad.com/l/Sneake...
🚨 The interaction shown in this video may not work for all users due to some recent changes by Figma on the interactive components side. Please find the Fixed video is here • [ FIXED] How to build ...
👉 Follow me on my socials for more:
/ akashy
/ kash__91
dribbble.com/akashy
👉 My UA-cam setup gear:
Canon M50: amzn.to/2Xv6LP3
Tripod: amzn.to/30xluel
Boya shotgun mic: amzn.to/2XuZOxc - Наука та технологія
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.
Awesome, clear tutorial. Thank you so much!
Thank you! (also for the alternative method) you're great at explaining.
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.
awesome video with great explanation! thank you!
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?
This was awesome, thanks for sharing 😊
Great stuff Akash! Thanks for sharing. ^^
you're a life saver 😭🙏🏻
you are great and explain very well. thank you🙏
looks great and awesome explain man..😍
Bro this video is really helpful for me
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
You earned a subscriber ✨
On prototyping frame 2& 3 they run in between 2 &3
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
Thank you for this
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.
when adding these animation in middle of the page and after scrolling the page come from top i mean the scroll bar position resets
when animation move by reverse it only switch bet last two products only , do u know how to fix ?
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 :/
Thanks
I do the same but clip content doesn't work?
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'am stug if swipe from photo 3 to 2 to 1
if i swipe photo 2 to 1 i can't
Bro I love you!
thanks man
PLEASE ALSO TELL SHORTCUTS FOR WINDOWS MR.MACBOOK PRO USER
4:20 to 4:23 i don't get what i need to do to create carousels. Help pls
I do the same as the tutorial and the drag doesn't work to return, it only works in one way.... help please
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
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 :)
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 :)
does not work, it does not let me move to the right. Can someone help me?
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 !!
thank you for this tutorial, but I'm stuck at 7:00 what is the 'command key'?
Press v before trying to move
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?
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 :)
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
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
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.
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 🙂
where to get thhose images from like such product perfect
These images are from Nike’s own website. These are the real product images :)
Let me like first tomorrow i will try❤️👁👄👁
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
Only 2 images showing. Otherwise everything perfect. Please solve the issue
Hit command mean which button...
CMD on mac, CTRL on windows.
ggwp👍
I am stuck At 7:00
Please hindi video upload
maybe just take the vid down?