How To Animate Like After Effects in Figma
HTML-код
- Опубликовано: 2 июн 2024
- Figma allows you to create many kinds of complex animations super easily. In this video we look at two different ways you can use Figma's smart animate feature in your workflow!
📕 Show Notes 📕
➡️ Learn How To Use Smart Animate (From Scratch): • Figma Smart Animate fo...
➡️ Subscribe To The Channel HERE: / timgabedesign
Timecodes
00:00 Intro
01:10 Smart Animate 101
01:40 Animation 1
05:55 Animation 2
#figma #figmatutorial
➡️ 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!
as always, I forget to link the Figma file... here it is, everyone 💜:
www.figma.com/file/qVQS5amsU9kyGQ33ObXXHS/Animate-Like-After-Effects-in-Figma?node-id=0%3A1
😀
Love how clearly you explain things - thanks!
I found this channel last night, and I immediately started binge-watching your videos. So good!
really, really appreciate that! thanks a lot
Miloš!
same!!
I just discovered your channel and i am loving it! i am learning new things i never tought about doing it, you are the best!
I can't believe a channel like this doesn't have a million subscribers!! 💔🔥🔥
Your content is great and the way you present, explain and organize frames is amazing 😍👌
I wish you success, keep going ❤️❤️💪🏼💪🏼
that is such a nice comment and reading this makes me so happy. thank you so much Rony! really, really appreciated 😃🙏
I'm delighted that you found it helpful and that you like the content in general 💜
I love you bro! Great stuff!
As allways, im coming back to your channel to learn some new stuff, and recall a few from the past
that's so cool to hear cjn! 🙏 thank you 💜
i was looking for this video long time .... thamk you dude
happy to help, my friend 😃
Great content, really opened my mind for more possibilities using Figma! Thanks! 😄
happy to hear it 😃
absolutely 100% amazing, what a legend, keep up the great work man
thank you Khaled!!
Cool stuff like always bro ;) Keep it up! BR!
thank you for the continuous support, my friend 🥳👌
This is dope, awesome.
appreciate it, Yaltha! 🤩
the fact that you compare after effects to figma which doesn't even has a way to export to mp4 or gif natively is wild
i think it really depends on your use case, i used to be an AE user and nowadays i never use it!
You make life easier. Thanks!
that's great to hear, my friend!
thank you!!!!!
Fantastic Videos !! 🥰🤗THX A LOT !!
thank you for commenting!!
This is awesome Tim, I will start trying out some figma animation.
so glad you liked it, Ikenna! good luck with the animations 😃
@@TimGabe thanks Tim
amazing channel,i learned so much,and upgraded my skills..keeep the good work bro.
thanks a lot, Ivan!! 🤩
Great content! 💯
thank you very much, Sneha ☺️🙌
Awesome work 💙
thank you Sadia!! 😃
Welcome 👍
I can't believe this could be achieved in Fima. What an amazing tutorial.. subscribed!
right?? thank you!!
pls how can we export as video mp4 @@TimGabe
Great content
thanks for always supporting, my friend!! 🙏
This is amazing. Would there be any chance you could do a similar video with an interactive mobile app? In the end you could show the finished product by tapping through the actual prototype on your phone. That would be so cool. I'm beginning to think I might not need Principle or Protopie 😮
might make more videos like this in 2024!!
The second one is 🔥
thanks a lot, Milan 😊🙏
I love watching your videos it helps me a lot in my ux journey and ya ur very handsome 🤩❤
thank you very much for the kind words, Khushbu. really happy to help!! 🙏💜🤩
I have a question. How did you put gifs in those vertical 3 pictures?
Great video. Does this or your Crash Course on animation teach to how to make Lottie Animations?
Tim, hi! Video editing is on the high level! Do you edit on your own?😍
Anastacia! thank you for that, it actually is my own editing 🤩 been doing it for a couple of years (even before the channel) 😊
I think if you animate these artboards as interactive component variants that should be easier , instead of duplicating artboards btw interesting tutorial
definitely -- whenever you have the chance to use interactive components, it's the most clean way 😃
to make the tutorial a bit easier to follow and limit the pre-existing knowledge needed, I chose to stick to the basics 🙏
thanks a lot for the input, Ahmad!!
this intro is fireeee
haha, thanks mihaela!!
Hey ! Thank you for this video, I do have a question, is it possible to export the animation in GIF format to have a smooth animation like an infographic for example ?
no native way i'm afraid... but there are plugins, or you just use a screen recorder!
Cool video! Hello from Russia!
thanks a lot, my friend! 🤩
What would your final format be? A video mp4 file? If so, how do you export the video?
yes! .mp4 file and now we actually have a plugin for this -- www.figma.com/community/plugin/1170836206919391034/Export-to-GIF%2FVideo
haven't tried it myself though!
Amazing!! But I have a question... How do you export it? Heeeelp
How do we animate the properties of a shape in Figma. Similar to css3 animations. Example: I want to animate square to circle with nice transition. Its always a frame/board animation in Figma but not shapes within single frame/board.
not sure I understand the question, my friend!
you can check out my video on splash animations if you want to see how I animate shapes 😃
The problem is you can't export it in high res as mp4 or in other video format or now is it possible?
Amazing video, I have a slight doubt though. What type of interaction did you give between the loading screens, from 0 to 99%.I followed the exact procedure but im not able to it to show like that. It just fades from 0 to 99
doesn't work for me either :( I wish he would have answered your comment so we can continue :(
Hey Tim i have a doubt we can animate things in figma but when its about develpoment its difficult for them to do it. How should i approach in such case should i animate in after effects? Can you please provide me with a solution
I would say that either:
a) you find them a working example in the wild (eg. existing website) or
b) you create the animation yourself in code
if they're savvy devs, a Figma animation should help them understand what you're after. then you can take the animation settings straight from Figma to achieve the same feel in the animation!!
Twitter ad animation blew my mind 🤯
Figma is awesome!! 🤩
hi, 3:41 can you tell me what's the sitteng you use in the text bcz when i try to do the same thing it's don't work(no scrolling for number)
it's hard to say my friend, there are many steps where something might have gone wrong 😢
Imagine if Figma has a feature to export prototypes as mp4 videos in the second animation example, we won't need to work with plugins anymore or premiere ! hopefully Figma might embed these features in the next updates
yes, this is a highly requested feature in the forums. 😃 would love for them to introduce something like this!!
@@TimGabe what plugin do you use to export the animation?
@@TimGabe Same question
How do you export the animated slides as a shareable video?
how could we get an export of that to a video file for sharing?
Hi Tim do you know any way to export an animation ? I love your work by the way keep on dude !
thank you so much Tommy! ☺️ I usually record with QuickTime Player on my Mac, but there’s an open source app called Kap that a lot of people use 😃
@@TimGabe thanks but i mean export an animation in css/js, not recording it. I havn't found a way to do it so it might be impossible. Any idea ?
ah, I see!! I don’t know of any plugin that does it, sorry Tommy..
Your video was good and it can become even better by small changes. I wanted to see how did you applied animation but you did not show how to do it like do we have to use figmotion, prototype etc. so that was a major missing.
thanks for the feedback!
Is there any way to export these animations as a video file?
Figma can do some basic interesting animations. But If you're not using AE for UI animation, you don't know what you're missing. Aside from time efficiency, you'll limit what's possible with code
i think the real killer here will be rive 🤩
Hey, how to export flow as mp4 or gif?
Great, but then how do you download that video in your Pc? thanks mate
i think there are plugins for export, but no native feature unfortunately 😫
How do we export it in video format?
how do we export the final animated frame when we have multiple frames ?
unfortunately you'll have to use a screen recorder for the exports!
I Love this
Where do you get you background images
nowadays it's Midjourney, back here I think it was just Unsplash and/or Pexels 😃
@@TimGabe nice mine is GenCraft
I love your tutorials, and it's certainly your prerogative, but it would really really help if you shared out the source file as well. Thanks.
man, Michael... I just keep forgetting. I added it as a pinned comment, thanks for reminding me 😅
here it is in case you don't want to go to the comment section:
www.figma.com/file/qVQS5amsU9kyGQ33ObXXHS/Animate-Like-After-Effects-in-Figma?node-id=0%3A1
I don’t want to create a website with it I just want the motion graphics for adverts is that possible?
you can, but you'll have to use a screen recorder of some sort and record the animation!
hey bro I feel complex in scrolling numbers .where can I learn step by step.Thanks.
i have another (old) video going through it:
ruclips.net/video/RqxI6aODugE/видео.html
How to download the same for giving it to developer?
Any solution except lottie?
I'm also like the way of creating animations in the figma
but the problem is how can i save this animation in full quality
cus windows record is so bad :')
How can you export this as a high resolution video though?
not from figma without plugins, i'm usually just using my screen recorder!
#TeamGabe
haha, i like that hashtag!!
The main reason I don't create animations like this on Figma is because the coder most of the time doesn't want to or can't code the animation I created. Is there an easy way to export this animation into code?
Figma doesnt have a custom graph editor, does it?
there are plugins for graphs/tables, i think!
How do you export this?
you'll have to use third-party plugins to export it from Figma itself, but i usually just screen record myself 😃
And how do you export them after you make em??
it’s a very requested feature to be able to export GIFs/videos from Figma, so I’m hoping they’ll introduce it in the future
however, you could use a screen recorder like getkap. I use QuickTime player ☺️
@@TimGabe Actually if you on mac operation system you can find software called gifbrewery
I guess the limit is that things have to happen pretty sequentially, unless you are creating components for multiple layers which could get pretty messy to sequence.
💪💪💪
🤩🙏
It would be great if you create these from the scratch instead of explaining the structure of it (A Beginner Request 😉🤭)
point taken, Karim! thanks a lot for the feedback 😃
Hello! Can I hire you to make a landing page for my Shopify store?
hey Joe! you can contact me on email, contact@timgabe.com ☺️
Unfortunately, all of these animations happen one after the other. I could not find a way in Figma to stack animations so they happen on top of each other but with some delay while the other is still happening (and not when they finish). For this, AE and some Figma plugins are still needed unfortunately...
HOW TO EXPORT IT?
Please also teach us how to build it you are only telling how things are working.
I am a beginner
that’s a good insight, Muhammad. thank you for this 🙏😃
Now the question is... Can we export these animations as MP4 ???
there are Figma plugins for that!
you could also use the Lottie plugin to export them as .lottie!
I just wasted lots of time designing the scroll for the number, and he didn't even explain which animation and settings should be used to have the slot machine effect.
By the first min it was obvious you don't even know M of "Motion graphics" .
will take that with me and go back to the drawing board, my friend!
If I can export prototypes as gifs, I’ll uninstall after effects. 😅
I'm just waiting for Figma to implement this... (or for someone to create a plugin for it) 🥳
You can record your animation with quick time player and then convert it into gif (I’d I understood your concern right).
@@annakropina8144 I currently use this format but the quality isn’t exactly good after converting. what do you use to convert to gif?
Hahaha, figma is like MS Paint compared to AE. C'mon man.
definitely not nearly as powerful, but for a UI designer you could probably get away with just using Figma 😃
@@TimGabehehe yes I've done ui animations in AE are pain hehe sometimes
Figma is a horrible animation tool and to even do anything beyond the basics you need something else.
I must say I have seen many many Figma Channels tho I am pretty advanced in it. I was ignoring to use of Auto Layouts 😤 and that's How I found @timGabe. Really good teaching skills and breakdown strategy. 👊🏻😎
thank you so much for the very kind comment, Zardad! 😃🙏