Figma Smart Animate for Beginners (2022 Tutorial)

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

КОМЕНТАРІ • 69

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

    Link to the Figma file:
    www.figma.com/file/jM5xfHGuXpZbKIt4Oeo2BM/Smart-Animate-in-Figma?node-id=0%3A1

  • @chrispy_baecon
    @chrispy_baecon Місяць тому +2

    Video made 2 years ago, but still one of the best beginner tutorials for smart animate to date!

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

      It was just 2022. Not that far if you think about it

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

    Tim, you're God's gift to designers. Thank you for all your work

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

      that's such a nice comment!! thank you so much!

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

    Hey, Tim! Thank you very much, your videos are helping me a lot! I'm starting as a product designer and this kinda of techniques on figma will really pump my portfolio and skills

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

    Tim! a great teacher as always, I bet if you start filming contents like UX related topics, I bet a whole lot of subscribers will get a grasp of it with ease.
    Please I would love to see contents like your process of how you solve real life problems and as well creating an end to end solution backed by research and data, basically how you approach any project you handle. Also I bet it will be also nice if you make some of your videos longer. Well done Tim you are the best 🔥

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

      and such nice and warm comments from you (as always), Ikenna!! so deeply appreciated, my friend 😃
      I love the idea of covering broader UX/design topics that can reach a bigger audience, so thank you for suggesting that. also, digging more into the "real" process and talking about real design cases, etc. would be loooads of fun. will definitely keep this in mind and start researching video ideas for that!!
      again, thanks so much for the words of encouragement and all the support! 🙏

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

      @@TimGabe you are always welcome Tim😃

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

      @@ikennagibson3933 much appreciated, my friend 🥳🙏

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

    Yet another great video from you ❤ They way you explain the topic is just on another level. Can't wait to see the video on interactive components. Plus it would be great if you share the figma file so that if we stuck at some point, it would be a reference point.

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

      Zamin, my friend 💜 these comments really make me genuinely excited to keep pushing out content, so I'm incredibly grateful that you take your time to say these things!! thank you 🙏
      I'll pin the Figma file as a comment here (can't believe you all have to remind me all the time...)🥳

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

    This video help me so much for my assignment. And i love the way you explained it, easy to understand. Thank you!

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

    Thank You I loved the way you explained everything I will be waiting for every video you will post

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

      happy to hear it, Janvi! 🤩

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

    Another great video, love your channel 🤩

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

      thank you for the kind comment, Joanna! 🤩

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

    Very useful.
    Great explanation, keep on good work.

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

      thank you Dražen!! 🙏

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

    I was such a noob before youtube recommended me this video. Thanks!

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

      haha, i'm glad i could be of help!

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

    You're a really good teacher - THANK YOU!

  • @MuhammadAsif-nb8oc
    @MuhammadAsif-nb8oc 2 роки тому +1

    Your are superb Tim Gabe, you made animation easier

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

      appreciate it, Muhammad 🙏 thanks for all the kind comments!

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

    you teach wonderfully, I really enjoy learning. Thanks so much😍

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

      really happy you learn stuff from my channel, and I hope I can continue teaching you in the future 😃

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

    Everything works, I highly recommend it

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

      great to hear, Janjan! 🥳🤩

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

    Really amazing lesson!! Thank you!!!

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

      happy i could help!!

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

    life saver dude, life saver

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

    Thank you for your amazing content

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

    Tim, hi! Good video, I'll try to practice all your advice 👏
    May you film a video how pushing on the button changes the background also?
    Furthermore, I'd be grateful if you could share your fascinating experience about your interviews, some tips, advice or what is not necessary to do (for Juniors especially).
    Thanks!

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

      hey Anastasia! I’m glad that you’re enjoying the videos 😃
      pushing a button to change a background color (if that’s what you mean) could be achieved using the same principles taught in this video ☺️
      it’d just require two frames with different background colors and a button with an interaction that navigates between those frames 👍
      my ambition is to start making videos on those kinds of topics in due time, so thanks a lot for reinforcing that it’s a good content idea 🥳

  • @TomChacko-d4i
    @TomChacko-d4i 2 місяці тому

    great vdeo brother , Thank you

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

    Really practical. Thanks for sharing🤩

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

    Thank you!

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

      thanks a lot for supporting, Svetlana!

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

    Hey @TimGabe !How does one handoff these animation designs in a way that makes it easy for developers to implement?

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

      with figma you don't have an amazing workflow for this unfortunately... (that i'm aware of at least, maybe there's a good plugin out there)

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

    Is figma the best tool for animation? i just feel i dont have any timeline and bad export options? - what software u recommned for doing like more full prototype with animation to showcase conecpt to clients?

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

    Thank You a lots, love from Kerala, IN
    😍🥰💗💗💗💗💗

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

    Thank you much

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

      happy I could be of help, Zira 🥳

  • @rockywilliams2687
    @rockywilliams2687 10 місяців тому

    Love it! Thanks for the great, easy to understand videos! Can I get a simple block to bounce around my website on mobile and it still be fast enough not to mess up my page speed for Google's metrics? WordPress, Webflow, or Framer would be best for this?

  • @CuriousDev-s6m
    @CuriousDev-s6m 5 місяців тому

    gr8 just a support comment :)

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

    I´m pretty new in the design space and made a deep-dive in webflow. But can anybody tell me for what can I use animations made in Figma. It´s a great tool but how can I use those animations especially in webdesign? I mean I can´t adapt it or do I miss something? How do you use Figma animations?

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

      I usually just use Figma animations as a way of communicating my vision, and I think that's generally how people do it!

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

    how to get or create a image for parallax effect

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

      i usually create images in midjourney!

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

    for some reason my first frame fades in instead of sliding in? anyone have any insight into this issue? great video btw

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

      solved it, smart animate can glitch if you don't keep the names on each layer of each frame the same, I messed up when I grouped the sidebar on one of the frames lol. Hope this helps anyone with the same problem.

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

      happy you solved it ☺️

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

    if frame one is hide then how can you show only the circle, when i move the nav out of the main frame the total section moved.

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

    can I convert that into css code?

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

      yes ☺️ you have all the information you need to recreate it in CSS if you look at the bottom of the smart animate popover. the bezier curve gives you numbers you can use in CSS 👌

  • @MohanaKumar-xy5xm
    @MohanaKumar-xy5xm 11 місяців тому

    I hope figma add a new interaction mode on mouse scroll.

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

    5:00

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

    "zuuu"😂

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

      hahaha! I've come to realise that I make a lot of random sounds...

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

    Me: replaces the f with an s :)

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

    Are you married, Tim? I like your voice. xd

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

      haha!! not married, Andreea! thank you so much for the kind comment ☺️🙏

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

    Hi Tim! I'm looking everywhere for an email I can reach you at but having no luck. Would you mind sharing? Or at least your IG/FB/TW so I can message you via socials? Thanks!

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

      hey Kirsten! ☺️ I haven’t gotten to setting up a dedicated email for this page yet, but will do soon. 👌 for now timgabe.design on IG should be the best place 😃

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

      @@TimGabe thanks, messaging you! :)

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

    Thank you so much

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

    Thank you so much

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

    thank you so much