This is so cool. It's a bit too advanced for me yet as I haven't learned what components are but I'm definitely going to try this out. I think Figma is a great place to get started with animation as it is really simple to use and free. On top of that there's a new plugin (Aninix) that allows you to create lottie flies in figma and export them as mp4, gif and Json. That's the best alternative I've found to adobe after effect so far.
This was soooooo awesome! I am an illustrator and love animation, but new to it and prior to this I was learning alot of UI prototyping with microinteractions etc. So I am excited to combine these two things: illustration work within figma to create these fun animations. It is a great way to keep up on figma skills. Thank you! :)
I like how you explain things. I'm beginner level so the details are overwhelming, but you made references to relatable things like plates, stage, etc. and that idea behind the steps clicked for me. Thank you. ❤
cool tut! just a small note, you dont have to always close the prototype tab everytime you wanna go back to the file tab-- it automatically refreshes with the changes made on the figma file. :) no need to press the play button again and again as well just click the tab :)
Even though it updates automatically i find myself having to close and reopen as it often doesn't work properly. Almost like it's broken. Happens both on my old pc and my new mac. When reopening it works though!
Thank you for sharing, Jesse. This hands on video is very helpful. Regarding your questions at the end of this video, I think I will choose whether or not to use the cartoon animation depends on the theme of the app. I'll use it when the app has a mood board that is relax, fun, easy, happy, etc.
Thank you for this valuable lesson. Great content! I think it's not meant to be a teapot but a watering can with all the nature going on in the illustration. But teapot works fine for me though ;)
Thank you for your sharing! The interactive components are the best power feature of Figma. I'm really into it. But do you know how to hand over that to the developer team? I mean can we support them export a JSON file (like the Lottie file) or another way so that the developer can easy to implement that animation.
@@victormalet7066 oh. I still do have not any way to do it. I just show exactly how the animation works to the development team and they will implement it by themselves. If you have other ways to make it better, I would love to hear that. I think many people also like it.
can it do more than back and forth ? like what if you want to make an orb orbit around a circle? i grouped a little circle on the outline of a bigger circe (that i then hid) and rotate the big circle, but i can't find a revolutions options, only rotation, and if you put 180, if works, but then if you say 360 it won't move. if i put over 180, it will got the opposite direction. it's really annoying . i know how to make 4 variants and rotate in quarters, with delay, so it goes around, evenly, forever, but that's not enough. i want it to go over 13secs, not 12. so it has to go over time. in 3 then 4 then 6 seconds around one revolution, each...? if that makes sense. or how do you animate something following a path? or how do you do key frame animations? i'm aware of figmotion, but i don't get it, for my needs. is that what i need to use, and learn it better? i used to be a flash dev/animator. So you're using the term stage and I'm wondering if you are too or maybe you're from after affects anything with frames so… I can't really wrap my brain yet around figment but I am writing this as I'm watching so maybe I'll answer my questions and I just have to keep watching… I hope so I hope you respond thank you hmm maybe cheating it by masking? but hmm no...
Waaaw super cool, one question, can we export animations as lottie files ? that would be great, in order to be able to reuse them on a Webflow or other project. Thank you and have a nice day!
I'm interested to know this too. Currently you could use the Motion plugin or perhaps the Flow Exporter plugin to get animations out. What was the expected output for the demo website?
Do we need to download figma to use variant I actually did what you have done with cloud but mine is not working and after creating same which check I had only one cloud and you had two in video and I am using online figma
Hi, thanks so much for this video, it's beautiful but i have tried to replicate this in figma and it's not working. I created the component and the variant but it didn't work. can you tell me what i might be missing? 🙏
Really cool stuff Jesse, Thanks a lot for all your great videos! My question is: after you have created this animation, how is the handoff to developers. How can I export this animation in a useful way so the developers can just use this? I want to animate an illustration to use it as a loading element, how do I export my animation? Thanks!! : )
I don't think it's worth it for a decent enough result, would be good if there was a free alternative to After Effects there are some alterntives like rive but theres always a paywall..
Wtf is a “full stack designer”? Design (graphic) is-by definition-an inherently front-end activity. Unless you are referring to “systems design”, which requires a completely different skill set and is not something most “designers” have any knowledge of at all. Does this invented title actually work for you? Like people buy it?
What is going on with me !? How i didn’t see your contents before you are so amazing you teach a great things you are so professional salutation from Algeria 🇩🇿🫶🏻
