3D Carousel in Figma Using Smart Animate | Prototyping Tutorial

Поделиться
HTML-код
  • Опубликовано: 25 ноя 2024

Комментарии •

  • @Drop_cat
    @Drop_cat Год назад +36

    This tutorial is amazing! I'm a data scientist who recently trying to get into the world of UX/UI and your videos are exactly what i need! Thank you so much!! Keep up with the good work!

    • @uxpeak
      @uxpeak  Год назад +3

      Hi there! 😊 Wow, your words truly made our day! It's so exciting to hear that a data scientist like you is venturing into the world of UX/UI and finding our tutorials useful. Stay tuned for more.

    • @mdgolamrabby156
      @mdgolamrabby156 11 месяцев назад +3

      @@uxpeak you should share your images that your use your project . Pls share it in the video description

    • @ishanimishra6916
      @ishanimishra6916 Месяц назад

      @@mdgolamrabby156 images????

  • @LenIk2598
    @LenIk2598 Год назад +33

    Wow, this tutorial was super helpful and interesting. Absolutely love the animation!

  • @uifry
    @uifry Год назад +5

    "Wow, this design is absolutely breathtaking!

    • @uxpeak
      @uxpeak  Год назад

      Thank you! Really appreciate it.

  • @hirazainab3119
    @hirazainab3119 3 месяца назад +4

    Thank you so much for this wonderful tutorial. I followed it step by step and my final prototype turned out to be exactly the same. I didn't know we could animate a carousel like this in Figma. Helped me understand animated prototyping using this. Keep up the good work!!

    • @Lovefood236
      @Lovefood236 3 месяца назад

      Where you got the image

  • @K.KusumaPriya
    @K.KusumaPriya 7 месяцев назад +2

    This was the best tutorial ! Love from India😃

    • @uxpeak
      @uxpeak  7 месяцев назад

      Thank you very much. We are very happy to hear that you liked i! ☺

  • @olivia_the_tech_girl
    @olivia_the_tech_girl Год назад +9

    Thanks a lot! I didn't even expect this tutorial to be so detailed and helpful! Thousands thanks :)

  • @takingiteasydaisy
    @takingiteasydaisy Год назад +8

    Amazing! Thank you for sharing. I think It might work for a donut website i wanted to build. Can't wait to practice it this afternoon.

  • @lunapro8003
    @lunapro8003 Год назад +7

    Fantastic tutorial! The carousel looks amazing!

    • @uxpeak
      @uxpeak  Год назад

      Thank you for your kind words! We're delighted to hear that you like the carousel animation. Stay tuned for more! Happy designing!

  • @gladyswairimu3443
    @gladyswairimu3443 8 месяцев назад +2

    I loved this tutorial. Thank you so much!

    • @uxpeak
      @uxpeak  7 месяцев назад

  • @ruthezechukwu4658
    @ruthezechukwu4658 19 дней назад

    Thank you so much for this tutorial, I followed the steps and it came out nice.

    • @uxpeak
      @uxpeak  17 дней назад

      You’re welcome 😊 We are happy to hear that it turned out well :)

  • @BenginurHajjaj
    @BenginurHajjaj 11 месяцев назад +2

    amazing tutorial . so fun to design it .thank you

  • @dhruvchoudhary5929
    @dhruvchoudhary5929 2 месяца назад +1

    thank you so much!!! i tried and loved it..

  • @Kirankiruthiga
    @Kirankiruthiga Год назад +2

    I loved the design what u have done. Pls make more videos like this

  • @FigmaHubtech
    @FigmaHubtech 5 месяцев назад

    This tutorial is amazing and I'm improving my figma skill thank you so much ❤

  • @the3amsociety
    @the3amsociety 11 месяцев назад +136

    Junior Developer crying in the corner

  • @Njegos24fit
    @Njegos24fit Год назад +6

    and then how to publish it and how to tranfer them into framer to finish full site to add some links and staff like thet, cause when i transfer them into framer the animation doesnt work anymore, plss some advices. Thanks :)!

  • @talhabinmushtaq1
    @talhabinmushtaq1 Год назад +1

    Clean tutorial but hope for full tutorial videos in future.

  • @sajesan8740
    @sajesan8740 8 месяцев назад +7

    plz image name or link,,?

  • @samahsaeed1261
    @samahsaeed1261 10 месяцев назад +4

    i loved it, but i don't understand how the bowls were spinning and how the background fruits were fading when switching can you demonstrate that please? thanx in advance

  • @dominikd9436
    @dominikd9436 Год назад +5

    Love this tutorial ❤❤❤ Thank you so much

    • @uxpeak
      @uxpeak  Год назад

      We're glad to hear that you loved the tutorial! 💜

    • @LIFE10002
      @LIFE10002 5 месяцев назад

      @@uxpeak where you get these pic

  • @sparkgamingzone9302
    @sparkgamingzone9302 18 дней назад +1

    Its amazing ✨ and where did you get these images

  • @VariaMikhailova
    @VariaMikhailova Год назад +1

    Thank you! So simple and easy to understand, even tho im not an English speaker hehe Thank you! Finally I did it! Yahoo

  • @sokratiszervos3775
    @sokratiszervos3775 Год назад +6

    amazing tutorial.. can i embedded this in a website?

  • @miroslavak.3666
    @miroslavak.3666 Год назад +5

    Excellent tutorial 👍

    • @uxpeak
      @uxpeak  Год назад

      Glad you liked it!

  • @micdrop_army
    @micdrop_army 5 месяцев назад +1

    Its ammaaazzinnggg❤❤❤ great work you are awsomee

    • @uxpeak
      @uxpeak  5 месяцев назад

      Happy to hear that you liked it :)

  • @iqrafarooq-o7c
    @iqrafarooq-o7c Месяц назад +1

    excellient work

    • @uxpeak
      @uxpeak  Месяц назад

      Thank you! Cheers!

  • @jbryanmusic
    @jbryanmusic Год назад +3

    I love this thank you!

    • @uxpeak
      @uxpeak  Год назад

      We're thrilled to hear that you loved the tutorial! Stay tuned for more insightful tutorials and thank you for your support!

  • @KigCha
    @KigCha Год назад +1

    this is so cool, I hope to see more of your videos :))

  • @a7medj1
    @a7medj1 Год назад +3

    thank you, that was helpful🙏

    • @uxpeak
      @uxpeak  Год назад

      Glad it was helpful 🙂

  • @thetrue1095
    @thetrue1095 Год назад +1

    So Amazing technique!

  • @thongang5737
    @thongang5737 7 месяцев назад +1

    What a video man! Thanks a lot 🙏

  • @firetechlearn1161
    @firetechlearn1161 5 месяцев назад

    Wow' interesting .it's helpful for every designer.Thanks lot.

  • @domdan45
    @domdan45 Год назад +2

    Amazing

    • @uxpeak
      @uxpeak  Год назад

      Thank you! Stay tuned for more exciting and informative content.

  • @rb.webdesigner
    @rb.webdesigner Год назад +3

    Super! ✨

  • @harrypap2345
    @harrypap2345 Год назад +5

    I love the design, but as a programmer i would hate to create it ^^

  • @zubayduhabbas3550
    @zubayduhabbas3550 Год назад +2

    simple and useful, thanks !

  • @sairohith2121
    @sairohith2121 5 месяцев назад

    Good bro it's very useful for practice do some more projects keep it up ❤🎉

  • @Codewithhsarah
    @Codewithhsarah 7 месяцев назад +1

    what abou the programmer

  • @Nutty_Rocks
    @Nutty_Rocks Месяц назад +1

    Can i get the background image ?

  • @ColonialDesign
    @ColonialDesign Год назад +1

    Great

  • @RitwikR-x1t
    @RitwikR-x1t 11 месяцев назад +2

    hi im gonna try this for my college project , could you please clarify if It is possible to transport this carousel to Webflow along with its animations? please let me know and thank you for this wonderful tutorial!!!!!

  • @faateme_fr
    @faateme_fr Год назад +8

    That is amazing. But I have a question, How can we have the images?

  • @cherryc0smos1
    @cherryc0smos1 Год назад +1

    Really good
    Appreciate your efforts.
    😄

  • @vennielu5688
    @vennielu5688 Год назад +1

    Thanks for sharing

  • @gpm79
    @gpm79 Год назад +4

    Hello, I followed the tutorial step by step and it worked out well, my question is, how do I export all the frames together as HTML, or better, how can I export this animated banner to WordPress using Elementor?

  • @vivektiwari1102
    @vivektiwari1102 8 месяцев назад

    thank you i learn new one>

  • @Abirami030
    @Abirami030 Год назад +7

    Where do you get the images of smoothie bowl i need that

    • @abuhararah2846
      @abuhararah2846 Год назад +1

      Why he would tell you that.. They are clever. They don't want you to make the same design 😂

    • @uxpeak
      @uxpeak  Год назад +13

      Hello! Unfortunately, we don't have the rights to distribute some of the assets we used in this video.
      Don't worry, you can find similar images for your own project! You can check out freepik.com and search for "smoothie bowl" and "fruit on white background" to find very similar images.
      Once you've got your images, you can use a background removal tool to isolate the objects. This way, you can recreate the designs with your own unique twist!
      Happy designing!

  • @karthikeyan7255
    @karthikeyan7255 8 месяцев назад +1

    where did you get the mockups

  • @goldenwords9647
    @goldenwords9647 7 месяцев назад +1

    Very nice sir🎉

    • @uxpeak
      @uxpeak  7 месяцев назад

      Very happy to hear that you liked it :)

  • @Emmyrazy
    @Emmyrazy Год назад +1

    This is nice. ❤🎉

  • @ElmagraHome
    @ElmagraHome Год назад +1

    Thank you so much❤❤

  • @rania-design5660
    @rania-design5660 13 дней назад

    Thank you for the tutorial! Is there a place where I can find the assets?

  • @artsoftdesigns
    @artsoftdesigns Год назад +1

    Thank you!!!!

  • @1073Pramoth
    @1073Pramoth Год назад +1

    its Amazing bro ❤

  • @Pon-d8t
    @Pon-d8t 6 месяцев назад

    Thank you so much!😍😍😍😍😍

  • @gdj777
    @gdj777 Год назад

    Very Nice

  • @Mariamadk
    @Mariamadk Год назад +2

    Mind blowing, Wow this is super helpful thank you so much❤❤❤ i was wondering if it’s possible that you add the items in the video as in an exercise file for beginners to rehearse and apply with you everything?

    • @uxpeak
      @uxpeak  7 месяцев назад

      Thank you :)

  • @marianatalia8651
    @marianatalia8651 9 месяцев назад +1

    Would you be able to send the link to the website where you downloaded the images with the food dish?

  • @Bahar-2000
    @Bahar-2000 11 месяцев назад +1

    nice

    • @uxpeak
      @uxpeak  11 месяцев назад

      We are delighted to hear that you like the carousel animation. :)

  • @svtcarat6235
    @svtcarat6235 6 месяцев назад +2

    i did the same thing but my product doesn't move it only changes

  • @AtharvaPatil-ck2uf
    @AtharvaPatil-ck2uf 5 месяцев назад

    Excellent Design..!! PLease provide the project files or the assets you used.

  • @swanky_uday7521
    @swanky_uday7521 9 месяцев назад +1

    Where you are downloading the pictures

  • @ets7400
    @ets7400 6 месяцев назад

    Amazing job 👏 where can I get files used to exercise?

  • @gunadAgp
    @gunadAgp Год назад

    Good jobs

  • @Ravikumar_krishnan
    @Ravikumar_krishnan 5 месяцев назад

    Thank you for your tutorial first. After done this design how to download and how to use this video? How to share in social networks? Where will use this video

  • @woody504
    @woody504 5 месяцев назад

    this looks awesome! How can this be converted into a website from figma?

  • @TaiNguyen-mb7eg
    @TaiNguyen-mb7eg Год назад +2

    WOW, I wonder how you put that prototype into a running laptop screen?

    • @uxpeak
      @uxpeak  Год назад +1

      We used After Effects. 🙂

  • @oygies7248
    @oygies7248 Год назад +2

    Nice! How do you export the prototype video from figma to put it into Aftereffects?

  • @memacode
    @memacode Год назад +1

    subscriiiiibe🥰 tnx for sharing this awesome video❣

  • @ceciliasuarez3244
    @ceciliasuarez3244 3 месяца назад

    Hola, se podria realizar la primera sección como un componente, y los demas como variantes? Asi lo instancio en un wireframe por ejemplo

  • @Ibibiofame
    @Ibibiofame 7 месяцев назад +1

    this was so easy to follow. Thank you so much. However my question is does it just work for a landing page? i tried it for a complete homepage and the prototype just moves to the next frame that i prototyped it with, how can i design it to still show the same homepage with all the other elements?

  • @atkakhurshid3872
    @atkakhurshid3872 6 месяцев назад

    cool

  • @Mga-quotes
    @Mga-quotes 11 месяцев назад

    😍😍

  • @Kanwalzk759
    @Kanwalzk759 2 месяца назад

    I neeeed this images

  • @vinodtamta1111
    @vinodtamta1111 11 месяцев назад

    thankyou sir

  • @YashfaZanib
    @YashfaZanib Год назад

    Thanks....

  • @iqrafirdous3738
    @iqrafirdous3738 Год назад

    Amazing 😍

  • @unknownguywholovespizza
    @unknownguywholovespizza 7 месяцев назад

    A designer's dream is a developer's nightmare indeed

  • @_Error_404_Goodbye
    @_Error_404_Goodbye Год назад +1

    And that’s how you get a sub

  • @Jimskier1314
    @Jimskier1314 Год назад

    it can be done with wordpress elementor? or thru code only? thanks for cool tutorials bro.

  • @daniellegathings7651
    @daniellegathings7651 Год назад +1

    Okay I got it but something is off, when I press on each one, they go by to fast when you select a different one

  • @shivrajahirekar6103
    @shivrajahirekar6103 7 дней назад

    how can i create this exact same in somewhere middle of the website
    please help

  • @suriyasuriya5211
    @suriyasuriya5211 11 месяцев назад +1

    Sir the left portion smoothie curve design how to do sir kindly tell me sir

    • @uiuxzaid
      @uiuxzaid 10 месяцев назад

      you can use Pen tool in figma to make any kind of shapes

  • @SpiritualLadki
    @SpiritualLadki Год назад +2

    Hi awesome tutorial, could you please tell from where did you get those fruit and bowls pictures? I search mine from google but not able to find any kind of picturr this beautiful and clear.
    Plz reply

  • @enriqueruiz320
    @enriqueruiz320 Год назад +1

    😍😘

  • @alineferreirasilva3994
    @alineferreirasilva3994 Год назад +1

    translator how to export this carousel to elementor?

  • @totoriina8363
    @totoriina8363 Год назад

    hello how did u done thos vector from behind the text?

  • @moisesgonga1302
    @moisesgonga1302 Год назад

    waaaawwwww

  • @RiazAhmad-mq4ne
    @RiazAhmad-mq4ne 4 месяца назад

    Which plugin you used to export this design??

  • @thetruthwillnevergovoided4344
    @thetruthwillnevergovoided4344 8 месяцев назад

    Ooook.. But where did you get the images from???

  • @Dhairya.007
    @Dhairya.007 11 месяцев назад

    If I want to practice how I am going to get that image of the cereal can you give us the link of downloading the image??
    It will help a lot !!

  • @tropicalhousemusic601
    @tropicalhousemusic601 Год назад +1

    Hey, you can make videos with subtle in Spanish please, great job; from colombia ❤

    • @uxpeak
      @uxpeak  Год назад

      Hello! Thank you so much for your support all the way from Colombia. ❤️ We're considering adding subtitles in various languages, including Spanish, to make our content more accessible. We'll certainly take your suggestion into account. Stay tuned and thanks again for your feedback!

  • @imransabbir9578
    @imransabbir9578 Год назад +1

    Bro, what if i want to add more than 4 products like 10 or 15 products. Can i do it in a single eclipse ?

    • @uiuxzaid
      @uiuxzaid 10 месяцев назад

      yess you can

  • @pareshmetaliya6214
    @pareshmetaliya6214 3 дня назад

    does any one give idea how to convert these animation design to react/next.js code? how to achieve these animation with tailwind css?

  • @arijitroy5772
    @arijitroy5772 Год назад

    How overflow is hidden??? In the frames

  • @UmmeArbab-x5s
    @UmmeArbab-x5s 6 месяцев назад

    what do do after making this design i mean we need to add plugin in wordpress for this design help please

  • @janetcpn
    @janetcpn 7 месяцев назад

    Nice! But may I know after having this animated frame done, how do we export it into HTML package? Appreciate if you can help. cause I having an issues of after animated into few frame it seem I can't export it into a HTML package through anima to my developer.:(

  • @CricketFanClubvm1wy
    @CricketFanClubvm1wy Год назад

    From where we can collect images ....
    Please give link or else please explain how did u got those images

  • @user-mustafa
    @user-mustafa 6 месяцев назад

    Hi !
    Where can download the images with good pixel?

  • @AhmadAlam-f1n
    @AhmadAlam-f1n 2 месяца назад +1

    wish if you started from scratch

    • @uxpeak
      @uxpeak  Месяц назад

      Next time :)