Create After Effects-Like Animations in Figma?!

[@DesignCourse]

What do you use to create presentations of UI animations? Is it After Effects, Figmotion, or something else? (or nothing 😁)

[@anasniazi]

was using Adobe premiere for the animation part but this looks so much easy to use directly with figma definitely going to use it, thanks for the tip!!

[@mr.niceguy242]

Jitter, but the problem is that the Quality of the final export as a GIF, is really bad!

[@sunil5656]

*Thanks gary i will learn how to stay updated always from you. Amazing*

[@NavesNiche]

I love you have the humbleness to leave your mistakes in. that's real confidence! Thanks for the awesome videos!

[@danishkamran9036]

dude i ve been learning through your videos and let me tell you're the best of all, bow down to the king, top notch stuff. so thanks a lot . the things that you're doing is awesome keep it up so I can learn more

[@AmaltheaVimes]

Thanks! That was a good intro for a beginner like myself, who cannot currently afford courses. (Judging from the quality of the content you share here, I imagine your courses are pretty great!) Apparently your hair is a topic in the comments. I think it looks cool, kinda classic.

[@DesignCourse]

I used to have very short hair since forever, so people comment about it.

[@Novaprod-jn4kq]

If you kept it going till now you have all the respect that I can give

[@elsapakopoulou2465]

that's exactly what I was looking for. Thanks, Gary!

[@anigrigoryan1951]

thank you, finally I got the basics))

[@vatsalaykhobragade]

Make a video on how to animate basic UI elements using after effects. Pls Gary 🙏🏻

[@touseefahmed656]

Good effort and tool for basic animations, styles and effects not working like drop shadows

[@bvs455]

Amazing tutorial! Imagine that implemented to Figma and being able to link shapes and having a smart animate feature for those animations through animation layers/compositions!

[@tofunwatoyinbo]

Speak English please

[@4988raja]

So glad that you shared! Amazing!

[@eodeun]

Thanks you. It was useful for me.

[@Sainz_kourofficial]

Thanks for the super content knowledge which you providing us is very helpful for me.. love content stuff & offcourse your way of describing the things are very easy to understand..

[@dilankamadushan9736]

Awesome awesome stuff !!

[@nkechichizim783]

Wow! Thanks, really needed this

[@sakshamchaturvedi9087]

Helpful Gary 👌🏻❤️

[@pablomonteoliva1793]

Thanks for the video! I was wondering if the JSON export is or it can be easily converted into a lottie.

[@mrnickb]

Jitter is great too, and has a free trial.

[@hautewire]

Super glad to discover this. Flash was my jam. Ae an Animate exist but all in FIGMA would be great. What about real animating? Like along a path? You can already animate like this, without a plug-in. Resizing am moving on a straight line… or am I thinking of XD? Also better practice would be to change the opacity as it moves in, or something. What if your bg isn’t a solid color? Guess this is for beginners. Hope to find more advanced tips for this. Suppose testing it out would be a good thing, too 😂 Thanks Mr Poppins

[@sebastiangudino9377]

If you need to animate along a path just use AE my dude. And if you don't really need keyframes then yeah, just use the SmartAnimate prototyping feature already in Figma. Which interpolates between a series of steps to animate an object. Remember, this is a tool. It has some pretty cool uses for some cool animated demos for web. But it's not a replacement for what Figma already has, not big motion design software like AE. This has its use cases, and you should keep those use cases in mind

[@hautewire]

@@sebastiangudino9377 totally! As I was fiddling in AE the other night a lightbulb 💡 exploded at it occurred to me, like duh! If I want to design assets in FIGMA that’s one thing, but for motion just export that shit and bring it into AE. Thanks for the reply.

[@sebastiangudino9377]

@@hautewire Yeah! Now THAT's the workflow. And dude, if you are not already using it you NEED to look up AEUX. It's a free plugin for both Figma and AE that allows you select a layer or a shape or whatever in figma, and make it appear in after effects LIVE, without having to export of anything, is basically a way to copy a figma group and paste it in AE as a pre-comp, and it is wonderful. Makes the animation process a delight

[@maxmagnus777]

it's been a year since you've made this tutorial, did motion graphics in Figma became a thing?

[@ease1appears]

Might be a dumb question but... When it comes down to showing these animations to devs, how would you usually show them? Would you put an mp4/gif into a FigJam document or just like straight up send them the mp4 file and be like ''i want it this way'' or...? I just dont understand how would you present this in a proffesional manner/environment. Im trying to make a noise dissolve type animation and ive no idea if its even possible to make it Figma, which is not a problem I can make it in After Effects, but how do i present this to the devs is what I cannot grasp lmao

[@huntyBot]

please somebody answer this call for help

[@graceige6203]

You could share the figma file with the developer

[@ease1appears]

@@graceige6203 yes, but like i said you can't do complex animations in figma itself

[@red_pill_2025]

you can share video thats how we all share :) for complex animations please use after effects.

[@mikhail2876]

Adobe XD: Great at prototyping, sucks at everything else Figma: Great at wireframing, sucks at prototyping

[@adaskalov]

Figma: doesn't stop working every once in a while like XD

[@elivelive]

@@adaskalov it does

[@gunasekar4554]

Awesome tutorial, thanks a lot.

[@jkl.guitar]

Can you go over the path animation option in figmotion, i'm having a hard time understanding how to use it. My goal is to create line animations for charts

[@ismyalak1419]

Path animations are usually used for an object to follow the path, for example. . . . A car that is animated on the certain type of road.

[@thallesdesouza]

thank you so much for everything

[@CRYPTOBIZON]

Very cool, thx a lot

[@tusarmondal7068]

why this plugin not working in same window right now. when i try to open this plugin it pop a code and a link to another figmotion web page, then how can i animate without seeing my elements!

[@dimitrisqq]

Hey Gary, in the upcoming UI Course which app you will be using?

[@ansora9031]

hi which software do you use to record screen? along with webcam?

[@Umiempi]

Is there a way to make the animation work on the figma preview? Thanks!

[@nancynancy4879]

謝謝分享 這個好好用喔!

[@mr.niceguy242]

Thanks Gary 🤪

[@theisoj]

Thanks 🙂

[@Gilloozz]

hey i was wondering if you know how to animate logo icon it goes up when i click on it and then sign in bars shows up ? thank you

[@aaronaaroon108]

Almost didn't recognize you. Lol. Thank you so much for this awesome tutorial. SN: I'd like to team up with some designers, if you're interested, please hit me up! 😁

[@mathewakinbanjo2570]

Interested

[@christopherbrown2389]

Interested

[@SioPao105]

Can you render the gif and add it to your prototype?

[@12XFactor]

Looks like the built animations are not connected to the prototyping feature. Too bad.

[@nmoschen]

You changed my guy! Oh no wait, just a different hairstyle. Nevermind.

[@carlocarnevali7790]

Would the animation actually work if I publish the website directly with figma for a quick mock-up?

[@josephnetherland880]

I like your channel so I've decided to bombard it with comments.

[@aminelouni]

The outro suitable with the haircut

[@lakshmichaitanya1316]

we need a vue 3 tutorial

[@simonlasky1034]

the figmotion plugin is not working why ? Any help

[@anothermouth7077]

@14:30 yes yes you can take this to show to your developer....and enjoy his face reaction turning into horrors to come into development 🤣😆 jk

[@kapeeshgupta9756]

I am so used to adobe XD, it’s very difficult to switch

[@DesignCourse]

I do like Adobe XD's prototyping, but my god, I still can't get over the fact that they won't allow us to change the canvas background color!

[@muhammadadenugraha2299]

As-salāmu‘alaikum, I thank you for the knowledge. May I imitate and modify this method for commercial purposes?? without including your name / youtube name??

[@avatr7109]

The thing i don't like about adobe is their SUBSCRIPTION BASED APPS but here in Indian companies Adobe is tool required in skillset

[@omaryassir5885]

Awesome stuf

[@ramannegi3729]

Hi... bro.. could you help me to add video in figma project

[@aletarin10]

Came for the hair, stay for the content.

[@theChefnut]

Cool video. Your video is insanely washed out though and your keying is really rough. I think you're shooting in RAW or something.

[@keyyaaf]

Tomorrow I have a Physics Exam. Yet I am here learning soft soft. I don't even know what I am.

[@tofunwatoyinbo]

Awesome, but unfortunately the mistake made it unclear and hard to replicate

[@gangostudio7282]

FRRRR all the layering n buttons i cant keep up

[@world_changers]

First!

[@chill_edits1924]

Day one of being a rapper

[@sonic_brx3667]

Sugma

[@sonoftroy8572]

Yo! Where’s the 80’s intro

[@DesignCourse]

Next week will be a new episode

[@Lorenzconnok]

Anyone elses Figmotion have all of the axis flipped....? My X in Figma = my Y in Figmotion. My Width in Figma = My Height in Figmotion wtf.

[@WebAnimations]

Hello

[@fal2981]

year to see if I could give that type of tNice tutorialng a shot again. Long story short...I have depression and anxiety disorder and it hasn't been

[@Jayant0023]

won'ful!

[@webdecodedwithfahad4414]

Which plugin you use for your hairs😂

[@namenl2205]

doesn't principle do this better

[@sashadalponte]

Yeap, still doesn't beat AE 😁

[@hosseinghahari3557]

i have such a huge problem with importing my UI from Figma to After effect , I don't how can I do it without problem

[@potatobelarusik]

guys, just learn Ae)

[@patlecat]

Good tutorial, thanks. But please don't do courses as your 80s character, it's annoying for more than 5 seconds, it's just fun for intros ans such formats.

[@harshkirar4264]

You are so confused bro

[@danishkamran9036]

thank you sir