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.
@angelacalvin6198
2 жыл бұрын
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! :)
@nxpe1989
Жыл бұрын
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. ❤
@JesseShowalter
Жыл бұрын
Thanks so much for the encouragement and support!!! Have the best day!!
@amosjerbi
2 жыл бұрын
So cool of you for sharing this, but lottie files can get the same results with very little footprint.
@DrDurango
2 жыл бұрын
This is kind of useless without a way to export the animation out of Figma. Anyone have any good resources for this?
@sebastianvillani1179
7 сағат бұрын
Thank you !!! I could do my first little figma motion after your video 😬
@latade
2 жыл бұрын
Been anticipating your version of the Interactive Component feature. You didn't disappoint... 🙏
@Iglooo666
Жыл бұрын
I’ve gotta say you’re the only KZitemr with a background that I envy. I want your office! I really enjoyed the video as well👍🏼
@kaelmolo1432
2 жыл бұрын
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 :)
@julieamalie
Жыл бұрын
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!
@rudyromero5520
10 ай бұрын
Jesse, in final detail his foot JESSE HIS FOOT ITS BROKEN! & he's still Jolly!!
@gyulboxing
Жыл бұрын
thank you for your time making this video available for everyone!
@jieliu6175
2 жыл бұрын
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.
@necridfps
2 жыл бұрын
Ayo, thank you so much! btw I love your behance streams
@campingandrelaxing
2 жыл бұрын
Thank you for sharing! I really appreciate your energy in the videos you produced - you make design super fun for us!
@rudyromero5520
10 ай бұрын
That teapot looks really jolly
@johnlcq
2 жыл бұрын
Damn that teapot's packing heat
@smitasharda6211
2 жыл бұрын
How do you turn the created animation into .gif for engineering hand off?
@dauletbaimagamabet
2 жыл бұрын
this is just sick, looks so good I'm, really jealous in a good way, amazed and inspired by this video! Great job!
@Valentynaua
2 жыл бұрын
Your youtube channel is filled with so many great videos. I'm glad that I found it. Many thanks to you!
@jannahbevelle5815
2 жыл бұрын
Ace. Though you can't actually export the animation to be used in web/apps? Only useful for a prototype? Some good tips though thanks.
@SwinkMediaHouse
2 жыл бұрын
Bro you snapped!
@gonihata
2 жыл бұрын
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
2 жыл бұрын
i would love to know, do you have any answer today ?
@gonihata
2 жыл бұрын
@@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.
@nested9301
Ай бұрын
That's the goofiest animation i have ever seen
@PRIYASHARMA-sc3mo
Жыл бұрын
I'll practice this tomorrow
@Mel-kw7oo
2 жыл бұрын
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!
@badcatdesign
2 жыл бұрын
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?
@Alisa-inspiration
Жыл бұрын
Wow that’s awesome! Thank you for sharing!
@JesseShowalter
Жыл бұрын
Thanks for watching!
@danielleharrison4691
Жыл бұрын
Love it, will be trying this soon
@MarnixdeVries
Жыл бұрын
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 ;)
@arjonami
Жыл бұрын
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!! : )
@irina_gladysheva
Жыл бұрын
Same question
@cj-jz9fg
2 жыл бұрын
thank you, that's incredible!
@oZenakos
2 жыл бұрын
This is so sick thanks!
@faroukglai
5 ай бұрын
Hey @Jesse can we export them as SVG & using them for web projects?
@peteryum6561
2 жыл бұрын
Where did you get those vector illustrations Jesse (The Heart, Flower)? Did you make them yourselves?
@tusharjain6342
Ай бұрын
I'm not able to resize my component like you did with the cloud component. Can you guide me through this... thank you :)
@Sol2223
2 жыл бұрын
Woooooooooooooowwwww, extremely cool! I will do it!
@uicheetah
2 жыл бұрын
That was cool. Keep providing us valuable content.
@JohaxAlvarado
Жыл бұрын
This video has saved me! thanksssss
@JesseShowalter
Жыл бұрын
Yeah!! 🔥🔥
@jeffwong625
Жыл бұрын
thanks for sharing.That is awesome! besides ,do you know how to add sound effect ?
@jizan8344
2 жыл бұрын
My question is, can we export this as a video?
@jiteshpujari1
2 жыл бұрын
I haven't found a method other than recording screen while the prototype is playing
@kamilazarski921
2 жыл бұрын
¡Hola Jesse! :) I was wondering when are you gonna public "Become a Freelance UI/UX Designer" course? :D
@alejandrodanieles
2 жыл бұрын
Very good video, thanks for sharing. Could you tell me what program do you use to record your videos?
@Leroyler
11 ай бұрын
Amazing tutorial, thank you! Is it possible to export as gif or somehow else?
@stephaneurth5786
2 жыл бұрын
Hey I like your cuphead stylish figma cartoon, but can you turn it in lottie or gif for the web ?
@domomosley
2 жыл бұрын
how do you export your prototype?
@nailulimtihany8494
2 жыл бұрын
I really like your explanation!
@gregdescargar111
2 жыл бұрын
great tutorial, and very cool illustration too!
@itsamandaedison
2 жыл бұрын
i really wish you hadnt sped through the shimmer part :(
@flutterIgnite
Жыл бұрын
We saw what you did there with the teapot :D :D
@whitemoonstudio
2 жыл бұрын
very good bro
@nofavors
Жыл бұрын
That's why cool design != good UX. RIP UX
@denis9971
2 жыл бұрын
Thanks. How do you turn the created animation into .gif? What can I do to export it and make it ready for implementation on a website?
@gstcharles
2 жыл бұрын
I also want to know this!
@victormalet7066
2 жыл бұрын
Same !!
@ryujinryuk
Жыл бұрын
you cant
@TheC0mmentSection
Жыл бұрын
Just use your noggin and think outside the box. Take a video of it using screen video software and then convert the video to gif.
@alexosiichuk9603
Жыл бұрын
Hey, how to hand it off to developer? How to implement it on web?
@maryamashraf3033
Жыл бұрын
how to share this animated illustration with developers? please guide me
@hautewire
2 жыл бұрын
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...
@lukej2756
2 жыл бұрын
The spout on that teapot looking kinda sus
@btorresdacosta
10 ай бұрын
loved it. thanks !!
@danirijilla
Жыл бұрын
great tutorial! thanks
@andressolanoalvarez9504
2 жыл бұрын
Really good animation
@esanadenike1240
Жыл бұрын
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? 🙏
@KT-User
2 жыл бұрын
that is super coooooll....thanks a lot for sharing:)
@milenaivanova3662
2 ай бұрын
Amazing!
@meteshgupta11
2 жыл бұрын
good ideas .. really would like to start something similar
@i_MehakAyaz.
2 жыл бұрын
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
@explorewithanshika
5 ай бұрын
same question did you get to know ? i am just a beginner help me out
@disenoneuromedia1027
2 жыл бұрын
The sun ¿how did you do it? rotate
@1imanni1
2 жыл бұрын
Figma or Adobe XD?
@freebird3581
2 жыл бұрын
How are you creating the hinge point?
@andwlp
Жыл бұрын
how to transfer this animation to the dev team? great tutorial, thanks
@julietkan
2 жыл бұрын
Thanks a lot!
@MrJzigy
2 жыл бұрын
Love it, reminds me of Cuphead, have you played it?
@NPG97
2 жыл бұрын
super cool! is there a way to export the prototype version in gif or mp4?
@servanehmx8420
2 жыл бұрын
Apparently yes with aninix plug in in figma
@Favoxhille
2 жыл бұрын
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..
@kenechukwuuzongwa1423
2 жыл бұрын
yeah!
@im-fr7wl
2 ай бұрын
아니 왜 중요한 shimmer에서 빨라지나유?
@Rasfa
Ай бұрын
I can't make components and variations
@rynopotamus
2 жыл бұрын
Can you do this in XD?
@hamzaahrbil3733
2 жыл бұрын
amaziiiiiiiiiing
@mohamedabdelghanymustafa2939
2 жыл бұрын
Wow 🥺♥️🤙
@cascadah23
25 күн бұрын
👏🏻👏🏻👏🏻👏🏻
@JesseShowalter
23 күн бұрын
Thank you! 🥹
@MMm-ux3wg
2 жыл бұрын
Thanks A loooooooooooooooooooooooooooooooooooooooooooooooot
@hajiral-rubaye989
Ай бұрын
مبهر جدا
@AvanaVana
6 ай бұрын
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?
@alidbouk4132
2 жыл бұрын
Am I the only who doesn’t have variants in Figma
@tulsipatel3881
2 жыл бұрын
No same here
@alidbouk4132
2 жыл бұрын
@@tulsipatel3881 I think it only works in native apps !! When I downloaded the app. It worked.
@fortniteomg8868
Ай бұрын
this tutorial so unclear not user friendly . there clear explaination to moving 1 step to another .
@Video-xo6sk
10 ай бұрын
marry me
@entrinsek9230
2 жыл бұрын
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 🇩🇿🫶🏻
Пікірлер: 105