Figma Smart Animate for Beginners (2022 Tutorial)
HTML-код
- Опубликовано: 13 июл 2024
- Learn how to animate (almost) anything with Figma’s Smart Animate feature!
📕 Show Notes 📕
➡️ Advanced Smart Animate in Figma: • Advanced Smart Animate...
➡️ Interactive Components in Figma: COMING SOON
➡️ Subscribe To The Channel HERE: / timgabedesign
Timecodes
00:00 Intro
00:17 What Smart Animate Is
00:48 How It Works
05:56 Bezier & Spring Animations
#figma #figmatutorial #figmadesign
➡️ QUESTION - Have a question about UI, UX or Product Design? Designing in Figma? Or Anything Else? Post in the comments section of this video-I’m happy to answer!
📖 Maxime’s Article on Cubic Bezier: blog.maximeheckel.com/posts/c...
📖 Figma’s Article on Spring Animations: www.figma.com/blog/how-we-bui...
![NoCap - Yacht Party [Official Music Video]](http://i.ytimg.com/vi/rm_lvDln8kE/mqdefault.jpg)
Link to the Figma file:
www.figma.com/file/jM5xfHGuXpZbKIt4Oeo2BM/Smart-Animate-in-Figma?node-id=0%3A1
You're a really good teacher - THANK YOU!
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
Really practical. Thanks for sharing🤩
This video help me so much for my assignment. And i love the way you explained it, easy to understand. Thank you!
Thank You I loved the way you explained everything I will be waiting for every video you will post
happy to hear it, Janvi! 🤩
Another great video, love your channel 🤩
thank you for the kind comment, Joanna! 🤩
Thank you so much
Thank You a lots, love from Kerala, IN
😍🥰💗💗💗💗💗
you teach wonderfully, I really enjoy learning. Thanks so much😍
really happy you learn stuff from my channel, and I hope I can continue teaching you in the future 😃
Tim, you're God's gift to designers. Thank you for all your work
that's such a nice comment!! thank you so much!
Very useful.
Great explanation, keep on good work.
thank you Dražen!! 🙏
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.
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...)🥳
Really amazing lesson!! Thank you!!!
happy i could help!!
Your are superb Tim Gabe, you made animation easier
appreciate it, Muhammad 🙏 thanks for all the kind comments!
Thank you!
thanks a lot for supporting, Svetlana!
I was such a noob before youtube recommended me this video. Thanks!
haha, i'm glad i could be of help!
Everything works, I highly recommend it
great to hear, Janjan! 🥳🤩
Thank you much
happy I could be of help, Zira 🥳
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 🔥
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! 🙏
@@TimGabe you are always welcome Tim😃
@@ikennagibson3933 much appreciated, my friend 🥳🙏
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?
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!
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 🥳
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?
Hey @TimGabe !How does one handoff these animation designs in a way that makes it easy for developers to implement?
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)
I hope figma add a new interaction mode on mouse scroll.
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.
how to get or create a image for parallax effect
i usually create images in midjourney!
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?
I usually just use Figma animations as a way of communicating my vision, and I think that's generally how people do it!
"zuuu"😂
hahaha! I've come to realise that I make a lot of random sounds...
5:00
for some reason my first frame fades in instead of sliding in? anyone have any insight into this issue? great video btw
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.
happy you solved it ☺️
can I convert that into css code?
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 👌
Are you married, Tim? I like your voice. xd
haha!! not married, Andreea! thank you so much for the kind comment ☺️🙏
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!
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 😃
@@TimGabe thanks, messaging you! :)