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

Поділитися
Вставка
  • Опубліковано 30 лис 2024

КОМЕНТАРІ • 84

  • @filiptopolovec9948
    @filiptopolovec9948 Рік тому +1

    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.

  • @Mohamed-uk5xr
    @Mohamed-uk5xr Рік тому +1

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

  • @John-117-u7b
    @John-117-u7b 2 роки тому +9

    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
      @AkashYadavUX  2 роки тому +2

      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
      @rashanuseibeh1977 2 роки тому +1

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

    • @kakachihataki6877
      @kakachihataki6877 Рік тому

      @@AkashYadavUX is it fixed ?

    • @bvs455
      @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
      @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?

  • @lub-czasopisma
    @lub-czasopisma Рік тому

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

  • @lamaghonaim1169
    @lamaghonaim1169 Рік тому

    you're a life saver 😭🙏🏻

  • @ashikmathewtharakan8146
    @ashikmathewtharakan8146 2 роки тому +1

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

    • @AkashYadavUX
      @AkashYadavUX  2 роки тому +1

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

  • @Phoca_Vitulina
    @Phoca_Vitulina 2 роки тому +2

    Awesome, clear tutorial. Thank you so much!

  • @praveenmanickam4942
    @praveenmanickam4942 11 місяців тому

    looks great and awesome explain man..😍

  • @RaahiT-j2w
    @RaahiT-j2w Рік тому

    awesome video with great explanation! thank you!

  • @nicolasferney
    @nicolasferney Рік тому

    Great stuff Akash! Thanks for sharing. ^^

  • @DankeAndre
    @DankeAndre 9 місяців тому

    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
    @nicolasbrun9795 9 місяців тому

    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.

  • @AbhinavKumar-qb5ce
    @AbhinavKumar-qb5ce Рік тому

    Bro this video is really helpful for me

  • @dcrodpar9949
    @dcrodpar9949 Рік тому

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

  • @rocksworldng6519
    @rocksworldng6519 2 роки тому

    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?

  • @shadil8452
    @shadil8452 Рік тому

    You earned a subscriber ✨

  • @akanimerealm
    @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

  • @arghavan8552
    @arghavan8552 Рік тому

    you are great and explain very well. thank you🙏

  • @REdbLACKI
    @REdbLACKI 2 роки тому +2

    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
      @AkashYadavUX  2 роки тому

      unfortunately yes! currently there are no work arounds.

    • @augustos.6641
      @augustos.6641 2 роки тому

      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.

  • @Thonia_Roi
    @Thonia_Roi 2 роки тому +2

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

    • @LHallam
      @LHallam 2 роки тому +1

      Press v before trying to move

  • @aakashkumar4833
    @aakashkumar4833 2 роки тому

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

    • @aakashkumar4833
      @aakashkumar4833 2 роки тому

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

  • @SyndeSTTD
    @SyndeSTTD 2 роки тому +1

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

    • @AkashYadavUX
      @AkashYadavUX  2 роки тому

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

  • @nicolasbrun9795
    @nicolasbrun9795 9 місяців тому

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

  • @ejay.u3373
    @ejay.u3373 2 роки тому +1

    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
      @AkashYadavUX  2 роки тому +2

      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
      @ejay.u3373 2 роки тому

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

    • @rashanuseibeh1977
      @rashanuseibeh1977 2 роки тому

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

    • @AkashYadavUX
      @AkashYadavUX  2 роки тому +2

      @@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
      @rashanuseibeh1977 2 роки тому

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

  • @kavyakommineni4421
    @kavyakommineni4421 Рік тому

    This was awesome, thanks for sharing 😊

  • @colorblindcr
    @colorblindcr 2 роки тому

    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
      @AkashYadavUX  2 роки тому +2

      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
      @colorblindcr 2 роки тому

      @@AkashYadavUX awesome. Thank you. Ill be waiting

  • @Skepticastiel
    @Skepticastiel Рік тому

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

  • @gmark247
    @gmark247 Рік тому +1

    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
      @AkashYadavUX  Рік тому +1

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

    • @sofiapaternocastello4124
      @sofiapaternocastello4124 Рік тому

      Is there any way to fix that?

    • @gmark247
      @gmark247 Рік тому

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

  • @akratijain5643
    @akratijain5643 Рік тому

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

    • @AkashYadavUX
      @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
      ua-cam.com/video/wlaI-rfttEk/v-deo.html

  • @bungsu8149
    @bungsu8149 Рік тому

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

  • @antonioedson1878
    @antonioedson1878 2 роки тому +1

    Great! How can I get the source figma files please

    • @AkashYadavUX
      @AkashYadavUX  Рік тому +1

      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.

  • @arunimapaul563
    @arunimapaul563 Рік тому

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

    • @AkashYadavUX
      @AkashYadavUX  Рік тому

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

  • @balabhaskergorpina
    @balabhaskergorpina 2 роки тому

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

  • @musicwithaman
    @musicwithaman Рік тому

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

    • @AkashYadavUX
      @AkashYadavUX  Рік тому +1

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

    • @musicwithaman
      @musicwithaman Рік тому

      @@AkashYadavUX ok sir will wait

  • @sebastiannores415
    @sebastiannores415 2 роки тому

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

  • @amolkoli3541
    @amolkoli3541 2 роки тому

    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
      @AkashYadavUX  2 роки тому

      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
      @gauravw7 2 роки тому

      same problem

    • @AkashYadavUX
      @AkashYadavUX  2 роки тому +1

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

    • @Do_DSGN
      @Do_DSGN 2 роки тому

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

  • @NeoGiMedia
    @NeoGiMedia Рік тому

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

  • @cjn2109
    @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 :/

  • @bakaamv9596
    @bakaamv9596 2 роки тому

    where to get thhose images from like such product perfect

    • @AkashYadavUX
      @AkashYadavUX  2 роки тому

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

  • @sagrikachauhan7554
    @sagrikachauhan7554 Рік тому

    PLEASE ALSO TELL SHORTCUTS FOR WINDOWS MR.MACBOOK PRO USER

  • @NnekaOlisa
    @NnekaOlisa Рік тому

    Thank you for this

  • @SyndeSTTD
    @SyndeSTTD 2 роки тому

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

  • @iamdciax2
    @iamdciax2 Рік тому

    Thanks

  • @alejandroortiz3803
    @alejandroortiz3803 Рік тому

    Bro I love you!

  • @aniketwakekar918
    @aniketwakekar918 Рік тому

    Hit command mean which button...

  • @dizee5591
    @dizee5591 2 роки тому +1

    I am stuck At 7:00

  • @AkashYadavUX
    @AkashYadavUX  Рік тому +4

    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

  • @KathiyawadiMoz
    @KathiyawadiMoz Рік тому

    Please hindi video upload

  • @enchantedtuber4169
    @enchantedtuber4169 2 роки тому

    ggwp👍

  • @Zeeko211
    @Zeeko211 Рік тому

    maybe just take the vid down?