How To Animate Like After Effects in Figma

[@TimGabe]

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

[@Druckereien]

😀

[@milosmiljanovic]

I found this channel last night, and I immediately started binge-watching your videos. So good!

[@TimGabe]

really, really appreciate that! thanks a lot Miloš!

[@Kate_WebDesign]

same!!

[@ob5804]

@@TimGabe Hello. Animation № 2 - why didn't you push the content beyond the frame in the first frame, and then in each subsequent one, you would manipulate and show each element???

[@ob5804]

@@TimGabe Another question - can you tell me where to move, or what I'm doing wrong in one animation (not from your lesson), if you can, then tell me where to drop the figma file?

[@ronymansor6805]

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 ⁦❤️⁩⁦❤️⁦💪🏼⁩⁦💪🏼⁩

[@TimGabe]

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 💜

[@farkin15]

Love how clearly you explain things - thanks!

[@rafitapro3]

Amazing!! But I have a question... How do you export it? Heeeelp

[@dominicfrain1265]

Really appreciate your videos mate. Solid 👍💪

[@PhillBueno]

Great video. Does this or your Crash Course on animation teach to how to make Lottie Animations?

[@pavantodupunuri2562]

I can't believe this could be achieved in Fima. What an amazing tutorial.. subscribed!

[@TimGabe]

right?? thank you!!

[@prymeraeducationsolutionsl2478]

pls how can we export as video mp4 @@TimGabe

[@mihaelailak9663]

this intro is fireeee

[@TimGabe]

haha, thanks mihaela!!

[@donlinville]

What would your final format be? A video mp4 file? If so, how do you export the video?

[@TimGabe]

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!

[@shirosama8013]

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!

[@Kate_WebDesign]

I have a question. How did you put gifs in those vertical 3 pictures?

[@Bassammansour88656]

i was looking for this video long time .... thamk you dude

[@TimGabe]

happy to help, my friend 😃

[@artneo7]

Thank you so much Tim! You've taught me an important new skill! God bless you! 🙏🏻👨🏻‍💻

[@cjn2109]

As allways, im coming back to your channel to learn some new stuff, and recall a few from the past

[@TimGabe]

that's so cool to hear cjn! 🙏 thank you 💜

[@KhaledMoAdel]

absolutely 100% amazing, what a legend, keep up the great work man

[@TimGabe]

thank you Khaled!!

[@madhoundes]

I think if you animate these artboards as interactive component variants that should be easier , instead of duplicating artboards btw interesting tutorial

[@TimGabe]

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!!

[@creativereflux4336]

You make life easier. Thanks!

[@TimGabe]

that's great to hear, my friend!

[@abhishekvenu9383]

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

[@eeeeeeeeeee2]

doesn't work for me either :( I wish he would have answered your comment so we can continue :(

[@tysondale4169]

I'm sure you've figured it out by now, but I had this issue too. Make sure the layer's you're transitioning between have the same naming, otherwise figma gives you that fading effect because it doesn't know how to link those properties together. Hope it helps!

[@raccoonteachesyou]

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 ?

[@TimGabe]

no native way i'm afraid... but there are plugins, or you just use a screen recorder!

[@Runeansfelt]

I love you bro! Great stuff!

[@sbecigneul]

Fantastic Videos !! 🥰🤗THX A LOT !!

[@TimGabe]

thank you for commenting!!

[@deeteekay6859]

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

[@TimGabe]

i think the real killer here will be rive 🤩

[@Jab7kO]

Cool stuff like always bro ;) Keep it up! BR!

[@TimGabe]

thank you for the continuous support, my friend 🥳👌

[@artneo7]

Great content, really opened my mind for more possibilities using Figma! Thanks! 😄

[@TimGabe]

happy to hear it 😃

[@yaltharullist9181]

This is dope, awesome.

[@TimGabe]

appreciate it, Yaltha! 🤩

[@paolostralla4836]

Great video, super useful! Is there a way to import music in the project to manually match the timing of the animations with the beat?

[@ivankaloferov-f5v]

amazing channel,i learned so much,and upgraded my skills..keeep the good work bro.

[@TimGabe]

thanks a lot, Ivan!! 🤩

[@ikennagibson3933]

This is awesome Tim, I will start trying out some figma animation.

[@TimGabe]

so glad you liked it, Ikenna! good luck with the animations 😃

[@ikennagibson3933]

@@TimGabe thanks Tim

[@MilanB]

The second one is 🔥

[@TimGabe]

thanks a lot, Milan 😊🙏

[@madhoundes]

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

[@TimGabe]

yes, this is a highly requested feature in the forums. 😃 would love for them to introduce something like this!!

[@kirannnnnn3974]

​@@TimGabe what plugin do you use to export the animation?

[@rafitapro3]

@@TimGabe Same question

[@ДомблеПабгист]

Cool video! Hello from Russia!

[@TimGabe]

thanks a lot, my friend! 🤩

[@snehadevc]

Great content! 💯

[@TimGabe]

thank you very much, Sneha ☺️🙌

[@fencesitter-eb1hl]

@TimGabe - If you are replacing AE, how are these exported as videos?

[@sadiazaman10]

Awesome work 💙

[@TimGabe]

thank you Sadia!! 😃

[@sadiazaman10]

Welcome 👍

[@dave3k]

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 😮

[@TimGabe]

might make more videos like this in 2024!!

[@Dot02]

Hi just a quick question. Can you not do the same with Adobe XD. I'm still new in motion design. 😅

[@wiksby]

The problem is you can't export it in high res as mp4 or in other video format or now is it possible?

[@khushbudas4736]

I love watching your videos it helps me a lot in my ux journey and ya ur very handsome 🤩❤

[@TimGabe]

thank you very much for the kind words, Khushbu. really happy to help!! 🙏💜🤩

[@gabook]

Twitter ad animation blew my mind 🤯

[@TimGabe]

Figma is awesome!! 🤩

[@ayeshaquratulain1554]

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.

[@TimGabe]

thanks for the feedback!

[@shifatmasud]

Love you bro. Thank you so much ❤

[@f..k9386]

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)

[@TimGabe]

it's hard to say my friend, there are many steps where something might have gone wrong 😢

[@AnastasiiaPominchuk]

Tim, hi! Video editing is on the high level! Do you edit on your own?😍

[@TimGabe]

Anastacia! thank you for that, it actually is my own editing 🤩 been doing it for a couple of years (even before the channel) 😊

[@federicobenitez4604]

Great, but then how do you download that video in your Pc? thanks mate

[@TimGabe]

i think there are plugins for export, but no native feature unfortunately 😫

[@ramanakumar2082]

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.

[@TimGabe]

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 😃

[@maymemyintzaw851]

hey bro I feel complex in scrolling numbers .where can I learn step by step.Thanks.

[@TimGabe]

i have another (old) video going through it: kzbin.info/www/bejne/iKLbemmXhKmonac

[@Raghad-hz1sp]

beginner here.. how can i make the navbar actually work when i click on it to lead me to another section on the page ?

[@GraveRave]

Great content

[@TimGabe]

thanks for always supporting, my friend!! 🙏

[@rohitbairagi5256]

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

[@TimGabe]

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!!

[@mariachistatik1258]

How do you export the animated slides as a shareable video?

[@youssefelmghari553]

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?

[@The_wallflower00]

I don’t want to create a website with it I just want the motion graphics for adverts is that possible?

[@TimGabe]

you can, but you'll have to use a screen recorder of some sort and record the animation!

[@3DwithDaniel]

I Love this Where do you get you background images

[@TimGabe]

nowadays it's Midjourney, back here I think it was just Unsplash and/or Pexels 😃

[@3DwithDaniel]

@@TimGabe nice mine is GenCraft

[@christianmagill3829]

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.

[@LukePighetti]

Is there any way to export these animations as a video file?

[@tommygaessler2027]

Hi Tim do you know any way to export an animation ? I love your work by the way keep on dude !

[@TimGabe]

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 😃

[@tommygaessler2027]

@@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 ?

[@TimGabe]

ah, I see!! I don’t know of any plugin that does it, sorry Tommy..

[@JericoStanley]

How can you export this as a high resolution video though?

[@TimGabe]

not from figma without plugins, i'm usually just using my screen recorder!

[@avr4501]

how do we export the final animated frame when we have multiple frames ?

[@TimGabe]

unfortunately you'll have to use a screen recorder for the exports!

[@krutikamajethia7780]

How do we export it in video format?

[@mohammadaram6644]

how could we get an export of that to a video file for sharing?

[@Maxbussiness]

Hey, how to export flow as mp4 or gif?

[@taylornihls6353]

Figma doesnt have a custom graph editor, does it?

[@TimGabe]

there are plugins for graphs/tables, i think!

[@RiyaGoyal-yr3gb]

How to download the same for giving it to developer? Any solution except lottie?

[@mohammedadham1957]

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 :')

[@zardadhussain5098]

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. 👊🏻😎

[@TimGabe]

thank you so much for the very kind comment, Zardad! 😃🙏

[@MetaWoody]

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.

[@TimGabe]

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

[@sofiamariani5122]

thank you!!!!!

[@pramodgeorgehq]

How do you export this?

[@TimGabe]

you'll have to use third-party plugins to export it from Figma itself, but i usually just screen record myself 😃

[@julieta5773]

#TeamGabe

[@TimGabe]

haha, i like that hashtag!!

[@karimvenom6459]

And how do you export them after you make em??

[@TimGabe]

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 ☺️

[@madhoundes]

@@TimGabe Actually if you on mac operation system you can find software called gifbrewery

[@joewoerly7767]

Hello! Can I hire you to make a landing page for my Shopify store?

[@TimGabe]

hey Joe! you can contact me on email, [e-mail] ☺️

[@karl9358]

HOW TO EXPORT IT?

[@vekkdrums]

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

[@TimGabe]

i think it really depends on your use case, i used to be an AE user and nowadays i never use it!

[@scut55]

I wonder if recoding a video of your desktop as you play the figma animation would replace the need to have an export to mp4 feature on figma.

[@vekkdrums]

@@scut55 right, the resolution is exactly the same...

[@mageKnightz]

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...

[@Karim-wd2je]

It would be great if you create these from the scratch instead of explaining the structure of it (A Beginner Request 😉🤭)

[@TimGabe]

point taken, Karim! thanks a lot for the feedback 😃

[@muhammadusmanjamil9325]

Please also teach us how to build it you are only telling how things are working. I am a beginner

[@TimGabe]

that’s a good insight, Muhammad. thank you for this 🙏😃

[@pravesharya1073]

Now the question is... Can we export these animations as MP4 ???

[@TimGabe]

there are Figma plugins for that! you could also use the Lottie plugin to export them as .lottie!

[@siradjeddinebaballah9473]

💪💪💪

[@TimGabe]

🤩🙏

[@eeeeeeeeeee2]

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.

[@animaxvideos771]

By the first min it was obvious you don't even know M of "Motion graphics" .

[@TimGabe]

will take that with me and go back to the drawing board, my friend!

[@Archivosdelosvideojuegos]

but you didn't show how to animate...

[@Sma-v4y]

Hahaha, figma is like MS Paint compared to AE. C'mon man.

[@TimGabe]

definitely not nearly as powerful, but for a UI designer you could probably get away with just using Figma 😃

[@Sma-v4y]

​@@TimGabehehe yes I've done ui animations in AE are pain hehe sometimes

[@MR-Production]

Like After Effects in Figma... You can't! Over and out...👋

[@DesignbeastX]

If I can export prototypes as gifs, I’ll uninstall after effects. 😅

[@TimGabe]

I'm just waiting for Figma to implement this... (or for someone to create a plugin for it) 🥳

[@annakropina8144]

You can record your animation with quick time player and then convert it into gif (I’d I understood your concern right).

[@DesignbeastX]

@@annakropina8144 I currently use this format but the quality isn’t exactly good after converting. what do you use to convert to gif?

[@Hrkdntbsid]

Figma is a horrible animation tool and to even do anything beyond the basics you need something else.