How to design Automatic Carousel/ Slider in @Figma

Поділитися
Вставка
  • Опубліковано 5 січ 2025

КОМЕНТАРІ • 258

  • @_VeonAlmeida
    @_VeonAlmeida 2 роки тому +7

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

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

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

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

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

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

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

  • @deipty222
    @deipty222 Рік тому +2

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

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

    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.

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

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

  • @vishwanathghanekar1606
    @vishwanathghanekar1606 Рік тому +2

    Short, crisp and very helpful! Thanks!

  • @busayoak_
    @busayoak_ 8 місяців тому

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

  • @mrbeats6042
    @mrbeats6042 4 місяці тому

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

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

  • @wtv144
    @wtv144 2 місяці тому

    Great tutorial, thanks Akash!

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

  • @1997tangmo
    @1997tangmo 5 місяців тому

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

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

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

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

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

  • @bhagyalakshmi-gv2hg
    @bhagyalakshmi-gv2hg 7 місяців тому

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

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

  • @Kj-gr9fv
    @Kj-gr9fv 2 роки тому +3

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

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

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

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

  • @antarakarmakar2928
    @antarakarmakar2928 Місяць тому

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

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

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

  • @prajwalsharma2794
    @prajwalsharma2794 7 місяців тому

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

  • @TwoWheelTales2024
    @TwoWheelTales2024 Місяць тому

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

  • @БаленсиагаФешн
    @БаленсиагаФешн 2 роки тому

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

  • @khushboosingh8646
    @khushboosingh8646 7 місяців тому

    thanku so much Akash
    this really helped me😃

  • @agarsrish
    @agarsrish 2 роки тому +4

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

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

    Best video everyone else is going around in circles

  • @ParthipBVC
    @ParthipBVC 2 місяці тому

    how to solve that last picture jumping effect?

  • @gmblrvms
    @gmblrvms 8 місяців тому

    thank god for people like you

  • @ShabanKhan-i2w
    @ShabanKhan-i2w Рік тому

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

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

    SIR, YOU ARE A GODSEND!!

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

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

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

  • @ragragrec1
    @ragragrec1 5 місяців тому

    Excellent tutorial man

  • @MantashaKhan-dc7rg
    @MantashaKhan-dc7rg Рік тому +1

    veery nicely explained thnkss

  • @sashanarlie2832
    @sashanarlie2832 2 роки тому +3

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

  • @다밍-w1q
    @다밍-w1q Рік тому

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

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

    Thanks. I wish you great success and happiness

  • @alixminiw
    @alixminiw 6 місяців тому

    This was so so helpful! Thank you!

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

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

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

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

  • @athenamntlls
    @athenamntlls 7 місяців тому +1

    3:41 how cant i move this part?

  • @snowycrunch016
    @snowycrunch016 3 місяці тому

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

  • @muhammadhelmy2401
    @muhammadhelmy2401 Місяць тому

    thx man really help me a lot

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

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

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

    why used component set . insted of only image componanet

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

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

    this tutorial is so good, thank you so much!

  • @wolfoxnitido6369
    @wolfoxnitido6369 5 місяців тому

    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.

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

    It works but it’s not showing well on my prototype. When I’m designing it it’s in the centre but when I go to prototype it barely shows and it’s driving me crazy

  • @PuspitaB-f7d
    @PuspitaB-f7d Рік тому

    Awesome..so easy to understand..

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

    Thxx man, it was really helpful

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

    Can you tell me how to export a file with animation in fingms

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

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

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

    You're awesome my friend.

  • @FilipBO-t4x
    @FilipBO-t4x Рік тому

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

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

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

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

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

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

    Very helpful and easy to understand

  • @Yeuxdebichette
    @Yeuxdebichette 8 місяців тому

    Helped me so much, thanks !

  • @jyotirawat1728
    @jyotirawat1728 5 місяців тому

    Thanku for helping bro😊

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

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

  • @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: ua-cam.com/video/K97aa24WlKo/v-deo.html

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

      @@AkashYadavUX Thank you!

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

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

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

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

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

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

    Your final frame move back to 1st one and seems odd. To avoid it. Do repeat the 1st frame to final and reduce the animation 1ms.

  • @loomonda18
    @loomonda18 9 місяців тому +1

    Thanks so much man!!

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

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

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

    This was very helpful. Thank you!

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

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

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

    Thank you so much! Very well explained ✨

  • @5280mike
    @5280mike Рік тому

    Great tutorial!

  • @sabrinaleanez8645
    @sabrinaleanez8645 Рік тому +2

    Muchas gracias, estuvo simple y concreta tu explicación, te felicito!

  • @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. :)

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

    why i cant select after delay?

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

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

    nice video akash. It really help me in my work .thank you

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

    I found this super useful, thank you

  • @moeenHaider-wc7iz
    @moeenHaider-wc7iz 8 місяців тому

    Very helpful! Thanks!

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

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

    Love the video👌🏾❤️

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

    Thanks brother ❤❤

  • @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 :)

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

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

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

    Thank you ! Great tutorial.

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

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

    Thank really helpful♥

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

    so wonderful.💕💕