How to design Automatic Carousel/ Slider in @Figma

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ธ.ค. 2024

ความคิดเห็น • 258

  • @nehatripathi9662
    @nehatripathi9662 ปีที่แล้ว +25

    At 1:37, please note to select the bigger frame by right clicking and choosing frame selection, only then the frame will get adjusted.

    • @xkandah
      @xkandah ปีที่แล้ว +3

      For those who come here recently, holding down CTRL makes it possible to directly drag the outer container frame

    • @vyavahareaditya5936
      @vyavahareaditya5936 ปีที่แล้ว

      Thx you so much

  • @_VeonAlmeida
    @_VeonAlmeida 2 ปีที่แล้ว +5

    bro saved my life with it everyone showing the outdated solution or to sacrifice with ur design

  • @shreyandixit3902
    @shreyandixit3902 ปีที่แล้ว +10

    this video was really helpful for me, I had watched several carousel animation videos but you made the process look so easy and fast. Thank you so much for contributing to ui/ux community.

  • @TusharVasishta
    @TusharVasishta 2 ปีที่แล้ว +10

    Images aren't moving at all
    What might be the issue?

  • @martagomez8562
    @martagomez8562 หลายเดือนก่อน

    I mean... thank you so much. After many videos, you are the only one who has explained this perfectly. Thanks a ton :D

  • @cecerip1080
    @cecerip1080 8 หลายเดือนก่อน

    Doing some prototyping for school, this was so helpful - thank you

  • @PrernaGujar-h7k
    @PrernaGujar-h7k 4 หลายเดือนก่อน

    This video is so perfect. First time someone explained steps in figma this much. Great for beginners.

  • @Billionaireshome1111
    @Billionaireshome1111 ปีที่แล้ว +1

    Thank you so much for helping us new designers!

  • @nicolaslevy3943
    @nicolaslevy3943 ปีที่แล้ว

    You have no idea how many times I failed to do this until I got to your video! YOu are the best!

  • @antarakarmakar2928
    @antarakarmakar2928 29 วันที่ผ่านมา

    Thank you so much...this tutorial is a real life saver

  • @jessicaz6678
    @jessicaz6678 10 หลายเดือนก่อน

    Thank you, I was looking to create this exact animation but I couldn't find a video on it. Your tutorial is clear and straight to the point, it really helped, cheers.

  • @deusanoaram
    @deusanoaram ปีที่แล้ว

    thank you very much, im so glad that now i know how to make a slider in figma

  • @deipty222
    @deipty222 ปีที่แล้ว +2

    Very well explained and slow paced. I was able to follow and recreate, thanks!

  • @vishwanathghanekar1606
    @vishwanathghanekar1606 ปีที่แล้ว +2

    Short, crisp and very helpful! Thanks!

  • @garrydurbin6542
    @garrydurbin6542 ปีที่แล้ว +3

    I’ve tried to follow this but can’t get the delay interactions to work once the frames have been made into a component.
    They work in a frame but won’t allow ‘after delay’ to be selected from the interaction choices.

    • @badnewsforya-
      @badnewsforya- ปีที่แล้ว

      same, any help?

    • @greenblue980
      @greenblue980 3 หลายเดือนก่อน +1

      i think you should make it component set, buy tapping component slider 1,2,3 to get component set.
      my problem was to detach it doesnt want to

  • @1997tangmo
    @1997tangmo 4 หลายเดือนก่อน

    This works perfectly and so easy to follow, thank you so much!

  • @kingjames2036
    @kingjames2036 ปีที่แล้ว

    Best video everyone else is going around in circles

  • @indranin6300
    @indranin6300 ปีที่แล้ว

    I really like your voice, your way of explaination the pace too...just perfect. You got a new sub! Thanks a lot

  • @wtv144
    @wtv144 2 หลายเดือนก่อน

    Great tutorial, thanks Akash!

  • @ShabanKhan-i2w
    @ShabanKhan-i2w ปีที่แล้ว

    you did it in the easiest way to make understand. thanks a lot.

  • @Kj-gr9fv
    @Kj-gr9fv 2 ปีที่แล้ว +3

    Thanks very much, made it super easy to mock something up for a project I'm working on!

  • @bhagyalakshmi-gv2hg
    @bhagyalakshmi-gv2hg 7 หลายเดือนก่อน

    thanks for this..straight to the point and easy to understand✨

  • @busayoak_
    @busayoak_ 8 หลายเดือนก่อน

    This was incredibly helpful and straight to the point, I subscribed!

  • @andrearechtfertig3887
    @andrearechtfertig3887 ปีที่แล้ว +3

    I appreciate the helpful demonstration! Is there a way to ensure that the final image in the slideshow doesn't swiftly transition back to the first image in a rushed manner, causing a blur of previous images? I'm looking for a smoother transition, where each image is presented nicely, and the return to the first image is seamless without any visible blending of former images.

    • @rashmir5731
      @rashmir5731 8 หลายเดือนก่อน

      Did you find out?

  • @AkashYadavUX
    @AkashYadavUX  2 ปีที่แล้ว +4

    Hey everyone, if you are wondering on how to add carousel using buttons and how to add crousel indicator dots, then here is the new video to follow: th-cam.com/video/oE0v0wfX2AQ/w-d-xo.html
    enjoy🤩

  • @FeliciaOmotayo
    @FeliciaOmotayo ปีที่แล้ว +2

    Thanks for this video. It's understandable and precise.

  • @gmblrvms
    @gmblrvms 8 หลายเดือนก่อน

    thank god for people like you

  • @TwoWheelTales2024
    @TwoWheelTales2024 หลายเดือนก่อน

    Super. I just srarted having fun. It works perfect. Thanks. 😊

  • @mrbeats6042
    @mrbeats6042 4 หลายเดือนก่อน

    amazing, you're teaching skills are great, keep it up brother

  • @khushboosingh8646
    @khushboosingh8646 7 หลายเดือนก่อน

    thanku so much Akash
    this really helped me😃

  • @freedbek7773
    @freedbek7773 2 ปีที่แล้ว +1

    Thanks. I wish you great success and happiness

  • @다밍-w1q
    @다밍-w1q ปีที่แล้ว

    Thankyou so much! It was a LOT of help!!

  • @claroquepoggi
    @claroquepoggi ปีที่แล้ว +1

    Thanks for the tutorial! I had a little problem: my last frame (with thw last image) is linking to the first one but Figma is not allowing it to do it with "after delay". What can I do?

  • @БаленсиагаФешн
    @БаленсиагаФешн 2 ปีที่แล้ว

    Thank you very much! I've been searching for it for eternity!!

  • @muhammadhelmy2401
    @muhammadhelmy2401 24 วันที่ผ่านมา

    thx man really help me a lot

  • @alixminiw
    @alixminiw 6 หลายเดือนก่อน

    This was so so helpful! Thank you!

  • @nammiepam
    @nammiepam ปีที่แล้ว

    SIR, YOU ARE A GODSEND!!

  • @heyniel4561
    @heyniel4561 2 ปีที่แล้ว

    I was searching for this for my portfolio.. and here I got notification.

  • @rimjhimbhardwaj6858
    @rimjhimbhardwaj6858 2 ปีที่แล้ว +1

    Thankyou for this video, Akash!
    The tutorial was so concise and clear. It was really helpful. :))

  • @oluwakayodechristopher8607
    @oluwakayodechristopher8607 2 ปีที่แล้ว

    thanks, Akash struggled with it for days, but it's all solved now. Really appreciate it and look forward to more videos from you.

  • @MantashaKhan-dc7rg
    @MantashaKhan-dc7rg ปีที่แล้ว +1

    veery nicely explained thnkss

  • @prajwalsharma2794
    @prajwalsharma2794 6 หลายเดือนก่อน

    Along with it what if we also want to have a drag animation in it?

  • @theurelita
    @theurelita ปีที่แล้ว

    this tutorial is so good, thank you so much!

  • @ellabustamante
    @ellabustamante ปีที่แล้ว

    i love you
    thank you
    OMG i was going insane! THANK YOU!!

  • @loomonda18
    @loomonda18 9 หลายเดือนก่อน +1

    Thanks so much man!!

  • @varunsinghrathore653
    @varunsinghrathore653 ปีที่แล้ว

    Thxx man, it was really helpful

  • @Yeuxdebichette
    @Yeuxdebichette 8 หลายเดือนก่อน

    Helped me so much, thanks !

  • @ragragrec1
    @ragragrec1 4 หลายเดือนก่อน

    Excellent tutorial man

  • @ichigo968
    @ichigo968 ปีที่แล้ว

    Here again coz i forgot 😂😂
    Buts its really helpful
    Thanks 😊

  • @PuspitaB-f7d
    @PuspitaB-f7d 11 หลายเดือนก่อน

    Awesome..so easy to understand..

  • @ezinnenwaokike9095
    @ezinnenwaokike9095 ปีที่แล้ว

    I found this video really helpful. Thank you and keep creating contents

  • @TheSultonOfTheFuckingWaves
    @TheSultonOfTheFuckingWaves ปีที่แล้ว

    Great tutorial, easy to follow along with. Thanks!

  • @melvinasogu1315
    @melvinasogu1315 2 ปีที่แล้ว

    Sorry I couldn’t hear you properly, how did you put the 4 pictures in a frame?

  • @ayushisonam1109
    @ayushisonam1109 5 หลายเดือนก่อน

    In slider 2 while I want the second image to be at the first how do we do that it's not happening what arrow keys you've mentioned please tell

  • @shardulmeshram8839
    @shardulmeshram8839 ปีที่แล้ว

    Very helpful and easy to understand

  • @Paulineisspooky
    @Paulineisspooky 7 หลายเดือนก่อน

    Hello, i’d like to know why it just fades out and not actually slides like whats showing in the video. I did it step by step repetitively. I’d like to know if you tutorial requires the payed version to do what you did😊

  • @ParthipBVC
    @ParthipBVC 2 หลายเดือนก่อน

    how to solve that last picture jumping effect?

  • @zaynhashym6606
    @zaynhashym6606 ปีที่แล้ว

    Hey Akash!
    Great and a simple tutorial. But how do we so it along with the texts? ie: if all the images had their respective texts?

  • @athenamntlls
    @athenamntlls 7 หลายเดือนก่อน +1

    3:41 how cant i move this part?

  • @morenoaddam3261
    @morenoaddam3261 2 ปีที่แล้ว +1

    what do you press when you slide the photo?

    • @AkashYadavUX
      @AkashYadavUX  2 ปีที่แล้ว

      Hey
      I used Shift+ mouse to move the images quickly as this makes sure that images always stay in same line and doesn't move out of the frame. :)

  • @agarsrish
    @agarsrish 2 ปีที่แล้ว +4

    Amazing tutorial, solved my problem so quickly! Very concise and good information Akash 😀

  • @saverine4087
    @saverine4087 2 ปีที่แล้ว

    Terima kasih atas tutorialnya karena aku sudah bisa membuat animasi carousel di aplikasi saya, saya bangga dan mengerti bagaimana mr akash menjadi hebat.

  • @mkremer6
    @mkremer6 2 ปีที่แล้ว +2

    Thank you! How do you make the transition from the 4th image back to the 1st image to be similar to the others?

    • @AkashYadavUX
      @AkashYadavUX  2 ปีที่แล้ว

      Hey Mark,
      I have not explained that bit in this video to keep this video simple. The transition you are asking for requires a trick, i have explained that bit in my other video here: th-cam.com/video/K97aa24WlKo/w-d-xo.html

    • @mkremer6
      @mkremer6 2 ปีที่แล้ว

      @@AkashYadavUX Thank you!

  • @snowycrunch016
    @snowycrunch016 2 หลายเดือนก่อน

    Is it possible to make an endless carousel, but in such a way that when you hover the mouse over a photo, it stops?

  • @moeenHaider-wc7iz
    @moeenHaider-wc7iz 8 หลายเดือนก่อน

    Very helpful! Thanks!

  • @supahmariostyle
    @supahmariostyle 11 หลายเดือนก่อน

    You're awesome my friend.

  • @gautamiprabhu1008
    @gautamiprabhu1008 2 ปีที่แล้ว +1

    Tysm akash for this wonderful tutorial.. it's a lifesaver for me . And i have included it in my prototype and it looks amazing 😊😊.. i follow ur tutorials and it's easy to understand and work along together 😁👍 tysm

  • @user_unknown_1103
    @user_unknown_1103 ปีที่แล้ว

    Hi sir, i have a question like...can we write on that picture ? Like, i got a carousel on personality development and after watching this video i thought to use your idea and i need to add some of the words on the image for the course i'm working on

  • @Sunlightmeditation-rz3do
    @Sunlightmeditation-rz3do 8 หลายเดือนก่อน

    good job it's really help full

  • @kmim80
    @kmim80 2 ปีที่แล้ว

    This was very helpful. Thank you!

  • @jadapeters7757
    @jadapeters7757 ปีที่แล้ว

    Thank you ! Great tutorial.

  • @darrenlouisuyangurin
    @darrenlouisuyangurin 11 หลายเดือนก่อน

    I want the after delay to stop when clicking it, how do I do that?

  • @world8601
    @world8601 ปีที่แล้ว

    Thank you so much! Very well explained ✨

  • @jyotirawat1728
    @jyotirawat1728 4 หลายเดือนก่อน

    Thanku for helping bro😊

  • @ayoolaidris7262
    @ayoolaidris7262 2 ปีที่แล้ว

    I found this very helpful on a project I am currently working on. Thank you

    • @AkashYadavUX
      @AkashYadavUX  2 ปีที่แล้ว

      Glad it was helpful 😇

  • @swapnilmukherjee8001
    @swapnilmukherjee8001 2 ปีที่แล้ว +2

    Loved it. The first image looping from the last seems to have a rewind effect. Is there a way to make the loop go from right to left as well?

    • @carobacort
      @carobacort 2 ปีที่แล้ว

      I think that if instead of directing the last image to the first, you direct it to the one before, and do the same with the remaining, that could work. But probably would need to try it first.

    • @AkashYadavUX
      @AkashYadavUX  2 ปีที่แล้ว +4

      Hey Swapnil
      To loop the animation you need to create an additional frame which should be same as the first frame and place this as last frame.
      Connect second last frame to this additional frame via instant setting in prototyping, similarly connect this new frame to first frame again with instant.
      You can check older video on mu channel around cyclic carousel. I have explained this bit in details :)

  • @5280mike
    @5280mike ปีที่แล้ว

    Great tutorial!

  • @karannegi7199
    @karannegi7199 2 ปีที่แล้ว

    Hi Akash im having issues to move the frame to the second image.

  • @Sihammohamed4455
    @Sihammohamed4455 2 ปีที่แล้ว

    Thank u so much, u were a great help.

  • @FilipBO-t4x
    @FilipBO-t4x ปีที่แล้ว

    Any idea how the prototype would be so that the carousel stops when mouse enters?

  • @sashanarlie2832
    @sashanarlie2832 2 ปีที่แล้ว +3

    Wow, another great video and well written. It was very concise and clear! Thank you again Akash!

  • @victoriacococopopko7194
    @victoriacococopopko7194 2 ปีที่แล้ว

    Thanks for the video. It's very useful! 🥰

  • @feliciags
    @feliciags 2 ปีที่แล้ว

    Hi! Just wanna say thanks for this tutorial! It is very helpful!!

  • @janeeffanga5946
    @janeeffanga5946 2 ปีที่แล้ว

    I found this super useful, thank you

  • @galaxyguesthouse9271
    @galaxyguesthouse9271 ปีที่แล้ว

    why used component set . insted of only image componanet

  • @vchowta9685
    @vchowta9685 ปีที่แล้ว

    great video!! however is it possible for the images to slide in the same direction , like just cycle back to the first image after the last one in the same direction and not go back in reverse !! i want the images to loop and but its going back in reverse after the last image back to image 1

    • @AkashYadavUX
      @AkashYadavUX  ปีที่แล้ว

      Yup, explained it here in my other video. You can implement both the techniques to get the desired effect
      th-cam.com/video/K97aa24WlKo/w-d-xo.html

  • @vipproducts2975
    @vipproducts2975 ปีที่แล้ว

    also tell us that when you hide the component , the pictures will not change

  • @nolkiv
    @nolkiv ปีที่แล้ว

    Thanks for great tutorial! Is there a way to loop the gallery without moving back through all the photos?

    • @AkashYadavUX
      @AkashYadavUX  ปีที่แล้ว +1

      I have explained that in another video here
      Figma| How to make Endless scroll/slider
      th-cam.com/video/K97aa24WlKo/w-d-xo.html

    • @nolkiv
      @nolkiv ปีที่แล้ว

      @@AkashYadavUX Thank you!

  • @DaniDingo-f3e
    @DaniDingo-f3e ปีที่แล้ว

    Helpful! Thanks!💗

  • @KratiGupta-sf2go
    @KratiGupta-sf2go 9 หลายเดือนก่อน

    thank you. I successfully made it.

  • @cismeo
    @cismeo 2 ปีที่แล้ว

    Can i export a prototype as a website ? I know i am gonna love making them but will I be able to make it work easily ?

  • @SAGE1991
    @SAGE1991 ปีที่แล้ว

    Amazing tutorial man, hey if you are still reading the comments after an year of upload it. I have a question if you are reading this please reply it would be a big help. So suppose I want to go to 1st slide from 4th slide. I mean from last to start. but I don't want it to go through the 3rd, 2nd or all the slides in between like in your tutorial it did. 4th to 1st but through 3rd and 2nd back. What if I want it to go straight from 4th to 1st to show a smoother transition. How can we do that. ? is there any prototyping command which I don't know. Thanks

  • @yudharuddin665
    @yudharuddin665 ปีที่แล้ว

    Saya memang masih pemula, tapi setelah mengikuti dengan cermat ternyata bisa 😁

  • @margaret_Bobby_Tembo
    @margaret_Bobby_Tembo 2 ปีที่แล้ว

    Love the video👌🏾❤️

  • @wolfoxnitido6369
    @wolfoxnitido6369 4 หลายเดือนก่อน

    I think this method can't be done anymore because I've looked at it 3 times and done it but I can't do it, in the end figma shows me that there are 3 components and you and another person that I saw who did this procedure only one comes out, and When I put it in a frame to see if it works, it doesn't do anything.

  • @ektasharma1923
    @ektasharma1923 ปีที่แล้ว

    Nothing is happening with command key. Any other way to do the same?

  • @segikhorguani4716
    @segikhorguani4716 ปีที่แล้ว

    Thank really helpful♥

  • @rimialbatarni
    @rimialbatarni ปีที่แล้ว

    Hi Akash, thank you for this! I'm trying to follow this but I'm not able to select after delay. Do you know why?

    • @AkashYadavUX
      @AkashYadavUX  ปีที่แล้ว

      After delay only works when you link main artboards. Make sure you are not linking inside elements mistakenly and only connecting two artboards.

    • @rimialbatarni
      @rimialbatarni ปีที่แล้ว

      @@AkashYadavUX Thank you for your immediate response! so they are all one component correct? I'm not able to see the individual frame names when I select an image to link

  • @madhusudhananmukundarajan
    @madhusudhananmukundarajan ปีที่แล้ว

    Hi Akash, i followed all the steps, but the animation not happening in "after delay"

  • @suryad6824
    @suryad6824 ปีที่แล้ว

    Thanks brother ❤❤