5 Most Useful Figma Animations For UI Beginners

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

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

  • @TimGabe
    @TimGabe  ปีที่แล้ว +8

    link to the Figma file (delayed as usual 💜):
    www.figma.com/file/lqPNULhS2lWAs3TZM6QadS/5-Figma-animations?node-id=0%3A1&t=TydG5Dsn4xeETaNG-1

  • @andrescastillo07
    @andrescastillo07 ปีที่แล้ว +14

    Thanks for taking the time to create all these videos and teach us how to do all this stuff! I wanted to thank you because of your videos and tutorials I have improved a lot my Figma skills and that has shown up in the work I do at my job! Now I have been assigned to new projects on Figma, created simple but useful prototypes for the clients, and mastered the auto-layout feature, etc! My boss and the senior creative team are really impressed with my work lately. You're the best!

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

      Andrés... this is the best comment I've received so far on my TH-cam 😍 I'm sooo happy to hear that you're getting genuine value from my videos and that your colleagues are enjoying the progress you're making at work. you definitely put a smile on my face, thanks for sharing my friend!! 🤩

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

      @@TimGabe You deserve it! Thank YOU! :D

  • @okeannika
    @okeannika 11 หลายเดือนก่อน +3

    I'm so happy I found this video! I can't believe how cool you are at explaining things like this! Thank you so much for your hard work!

    • @TimGabe
      @TimGabe  11 หลายเดือนก่อน +1

      appreciate that a lot, thank you!!

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

    i've just learned how to make drop down menu easier, thank you 💖

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

      that's awesome to hear! thank you for sharing 💜

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

    This channel is so helpful!

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

      happy you find the content helpful, Sneha 🥳

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

    Amazing Videos. Super helpful. Thanks for sharing!!

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

    Amazing stuff Tim 🙌

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

      thank you so much, Henrik! 🥳

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

    Such a great tutorial. Thanks to you I love figma and im learning pretty fast

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

      I’m so glad you’re getting value from the videos, Joaquín ☺️

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

    thanks man! really lifesaver and good tutorial!

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

      appreciate the comment, friend!

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

    Great video, brother!
    That overlay was completely new to me 🤯
    Thank you for some great tips!

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

      my brother 💜 I'm happy that you liked it -- means a lot when it comes from you! 🤩

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

    Awesome tutorial! Thank you!

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

      thank you for commenting!!

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

    You're the best Design channel i know ! thank you, i want to try and learn everything !

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

      that is so nice of you to say, Corvus 🙏 I hope you can learn a lot from my channel ☺️

  • @HoaNguyen-jt1ml
    @HoaNguyen-jt1ml ปีที่แล้ว +1

    Hi, I just want to say thank for your great tutorials

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

      thank you for the nice comment!!

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

    I am learning a lot from your videos. Your teaching style is awesome! 😍

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

      that's so nice to hear Nazmul, thanks for supporting! 🥳

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

    You are a pretty good teacher❤ Keep’em coming

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

      really appreciate that, Anwesha! 💜 thanks!!

  • @SankaraReddy-px2ux
    @SankaraReddy-px2ux ปีที่แล้ว

    the way of explanation outstanding mate. 👏

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

    hey can you make tutorial on the heights animation that you showed in the intro ?

  • @jobthatsme09
    @jobthatsme09 7 วันที่ผ่านมา

    Hey Tim
    I'm wondering what benefit you've found in using 'Drag' animations for carousels vs using a 'Horizontal' overflow behavior? Is it the customized speed of the design, or the transition easing?

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

    MEU DEUSSSSSSSSS VC É INCRIVEL

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

    Sick! Ty ❤

  • @LilyRaya-f4s
    @LilyRaya-f4s ปีที่แล้ว +1

    i will definitely use them 🤩

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

      great to hear 🤩

  • @p.s.1524
    @p.s.1524 ปีที่แล้ว +2

    Hi! I am learning a lot from your videos. Thank you so much for all the awesome content you are putting out.
    I just wanted to ask, isn't it easy to just add a horizontal scroll functionality for the one you mentioned in the 'drag technique'? I was wondering if, is there any difference or if we can use them interchangeably. (drag & scroll)

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

      thanks a lot for the support 😃 if you just add horizontal scroll you won't be able to get the "snapping" effect that some people really like!

  • @saafy
    @saafy ปีที่แล้ว +8

    Now how to actually implement this in code

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

      that's a different story 🎉

    • @harsh-ti3us
      @harsh-ti3us 6 หลายเดือนก่อน

      Chat gpt

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

      Export the Lottie file and then use webflow to build your site which supports Lottie files. Truly drag and drop

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

    Great tutorial.....thank you so much 🥰

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

      thanks a lot for the kind comment, Tanzir 😍

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

    Should you place each piece before doing all animation or can you still do animation and add objects along the way in your frame?

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

    Man, I don't comment much on TH-cam, But you are Amazing!! your tutorials are the best🤩🤩

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

      these comments always mean a lot. thank you so much, Rami!! 🙏

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

    Which version of Figma that you use? Because I see some animations that I can’t use in the old version of Figma

  • @Ana-xy6zq
    @Ana-xy6zq ปีที่แล้ว +1

    I love you Tim

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

      haha, i appreciate the support ana!!

    • @Ana-xy6zq
      @Ana-xy6zq ปีที่แล้ว

      @@TimGabe Tim can i show you my work and have your opinión?

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

    Thanks for the great tutorial. I subscribed to your channel and liked the video. I realized that a button hover doesn't work until the image is fully revealed. I couldn't figured out how to make the hover work independently of each other. Let me know if anyone knows the workaround. Thanks.🤓

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

      with this workflow I don't think it's possible, but if you for example just added the card and the button to a shared frame and then put the button on top it should be possible 🤩
      thanks a lot for the kind comment, my friend!! 🥳

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

      @@TimGabe Thanks a lot for the prompt and thorough reply. I'll try that. Keep up the good work! 🤓👍

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

    Good content for learners..

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

      happy you liked it Bilal 🙏☺️

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

    How to creat Text animation from let to right horizontally? Would you please make a tutorial on that? Thanks in advance

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

      not quite sure I understand what kind of animation you're referring to, Sayekat. could you explain more? 😃

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

    Hey can you please tell me what is hud design? Can we do it in figma?

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

      you can create anything in Figma, so for sure!! I haven't created huds myself, but as far as I understand it's simply a screen interface (that often looks a bit futuristic).😃

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

      @@TimGabe actually I was applying for one job and they had hud in their discription section so just wanted to know what it was 😂😂 like background moves when we slide screen something like that right?

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

    Nice but the dark mode makes it hard to see.

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

    Can you show us the highlights video in the start of the intro How to make it in figma

  • @AnjaliKumari-sg1hh
    @AnjaliKumari-sg1hh ปีที่แล้ว +1

    Hi Tim. Is it possible to make zoom in effect ( prototype) in Masonry grid (with auto layout) . Hope you got my question. :)
    Thank you in advance ,
    💗
    Your biggest fan plus student🥰

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

      hey Anjali! I'm not sure I understand the question fully, but what I usually do for zoom effects is that I use the "K" tool (scale) to change the size of elements to create a zoom effect 🤩

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

    there is no figma file in the description

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

      classic me... sorry about that, here it is Tomisin:
      www.figma.com/file/lqPNULhS2lWAs3TZM6QadS/5-Figma-animations?node-id=0%3A1&t=TydG5Dsn4xeETaNG-1

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

    Tq

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

    There's no figma file on description 🤨

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

      that's so me... every time 😂 here it is:
      www.figma.com/file/lqPNULhS2lWAs3TZM6QadS/5-Figma-animations?node-id=0%3A1&t=TydG5Dsn4xeETaNG-1

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

    Demonstrating exceptional professional expertise alongside a distinctive delivery style characterized by calmness and coolness. Above all, what truly distinguishes is the remarkable responsiveness to every message - a level of honesty and respect seldom observed in instructors or professionals toward their audience.
    I aspire to gain further knowledge from your channel, ultimately progressing to an advanced stage as a UI/UX designer.
    Kind Regards,
    Aliya Zahidy

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

    the audio volume in all of your videos are too low

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

      hey Om! appreciate the feedback!!

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

    These animations are just for kids. looking forward to some really hardcore prototyping

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

      they're definitely not super advanced, my friend. thanks for the feedback! 😃

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

      Actually, they're for beginners. The clue's in the title

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

    PLEASE SPEAK LOUDLY