Free UI Animation Course - Part 1 - The basics

Learning animation enables you to create transitions and micro-interactions for your UI work. It's invaluable to all UI designers that want to take their UI projects to the next level. In this series I'll explain the basics of animation and we'll be going more creative and in depth in future videos.
For this one you only need Figma and the Smart Animate function. It allows you to prototype screen interactions with some clever mini-animations built in. Let's explore prototyping together!
☝️ Watch next and be awesome!
How We Work on Real Client projects: • How we REALLY work on ...
🏆 Master design with me
✅ Create an amazing case study: gum.co/uicases...
✅ 3000 people improved their skills: gum.co/uicourse
✅ Learn WebDesign from the best: gum.co/webdesi...
✅ Best book about UI (5000 sold): gum.co/uibook
✅ Learn UX cheap and easy: gum.co/guidetoux
🎉 See all my books & courses hype4.academy
🐦 My Twitter: / michalmalewicz
👨🏻‍💻 About me
I'm a designer, entrepreneur and startup founder. I started back in the late 90's and currently my main goal is to share my knowledge, both paid and free. This channel is one of the places where I share my tips on design, user experience, growth, marketing, life and mindfulness. Subscribe to stay in touch. ❤️
#uianimation #uidesign #freecourse

[@saurabh4425]

Much Needed and at the right time I wanted !! thanks mate looking forward 🤝💯

[@MalewiczHype]

More to come! :)

[@rocsotgar]

X2!!! Thanks! ✨

[@vanshikagargg]

Can't thankyou enough for this... I have been searching for this course since months... like an angel you came to rescue!

[@MalewiczHype]

Happy to help!

[@vanshikagargg]

@@MalewiczHype Eagerly waiting for more!

[@mafruhfaruqi]

I instantly feel delighted seeing you coming up with new ideas! Go on...

[@onyeka_ezeneche]

Nice one! Animate an on-scroll picture carousel

[@MalewiczHype]

Thanks for the idea! It actually is on my list for future episodes, but I need to take care of a couple other ideas first :)

[@ogunsolajulius5424]

I really loved how you explained this, Michael, everything was so detailed and easy to follow. I can`t wait for the next part already, thanks.

[@regissarts6955]

Great stuff, Love animation. Thank you! for sharing Michael.

[@jessetobi7929]

Lovely lesson. Stoked for more.

[@MalewiczHype]

More to come!

[@hetalpanchal5948]

Thanks a ton Michal for this amazing video, it's really helpful 👍👍 looking forward for more videos 😊

[@MalewiczHype]

More to come! Happy to help! :)

[@tobiawokunle9984]

Thanks a lot for this video. Cant wait for the next videos

[@MalewiczHype]

More to come!

[@anastasiadamian2948]

This series is going to be awesome! I know it already. Can't wait for next week's video.

[@MalewiczHype]

Already working on it :)

[@Олександр-б6я7й]

Дякую, Міхал!

[@MalewiczHype]

🙂

[@MohamedEssam-es4eg]

michal you are amazing .. can't wait for the rest of this series !

[@MalewiczHype]

Thanks! I actually already have a short animation series (in InVision Studio) on this channel too, with some more complex examples there - but time to make a structure and go step by step now - from the simplest things to the more and more complex :)

[@wareswaricz6948]

Just finished practicing this. I love every bit of it. Thanks for doing this.

[@MalewiczHype]

Great to hear!

[@АндрійГорбань-з9д]

Nice tutorial. Thank you!🤗🤗

[@MalewiczHype]

Thank you! Cheers!

[@WrinklesNWarPaint]

Thanks for posting this! As a baby UX designer and a newbie to Figma, I found this video incredibly useful. I’ve played with transitions between screens, but it didn’t even occur to me that I could animate buttons. Thanks again!

[@MalewiczHype]

Great to hear! There will be more videos in the series on animation - including more complex transitions and using some better (but also free) tools to animate the designs as Figma is pretty basic.

[@sinankaya6601]

Waiting for part 2!

[@MalewiczHype]

Already have a pretty cool plan for it :-)

[@dennyour]

You’re amazing, thank you!

[@MalewiczHype]

You are!

[@rajaiswarya1285]

🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️ Wowww too good am just happy to see this awesome video .

[@MalewiczHype]

Thank you so much 😀

[@inesnavarlatz]

Thanks Michal!

[@MalewiczHype]

My pleasure!

[@MauritsWilke]

This is great 🙌

[@GoddessofWarr]

Thanks for this video Michael ! This free course is impressive, love it from the beginning to the end... Your pedagogy is perfect, love the way you explain things, can't wait for the 2nd part !

[@MalewiczHype]

My pleasure!

[@rkive1196]

This is awesome!

[@MalewiczHype]

More to come! :)

[@thetrojan_horse8020]

Always a great session learning. Thanks

[@MalewiczHype]

My pleasure!

[@ride-time]

So many great tips. Looking forward to having a play around with some animations 😎

[@MalewiczHype]

Have fun! I already have a cool plan for next week :)

[@oddhouseproduction]

Great series, love it!

[@MalewiczHype]

Glad to hear it!

[@letscrackit3637]

Much much much appreciated. Thank you so much for making this.

[@MalewiczHype]

My pleasure! Already working on the next parts! :)

[@chikeezeiru143]

Nice one Michal! Really enjoyed this. You can show how groups of text or elements slide in on a scrolling page in your next video

[@MalewiczHype]

Thanks for the idea, it is on the list but not right in the next one just yet :-)

[@Shubham_Toshniwal]

Awesome video!!! That is a pretty simplified explanation of UI animation! I love the series!😍😍🍟🍟🍟🍟

[@MalewiczHype]

That's the idea! We'll start at the very beginning and slowly add more complexity and ideas :)

[@Shubham_Toshniwal]

@@MalewiczHype Yessss! I am very much excited! 😍🤩

[@thejohnzapido]

Wow! Thank you very much for this.

[@newtonoluoch8103]

Thank you so much Michael, I`d love to see some tips of animating onboarding pages

[@SkArifHossain]

Wow! Loved the animations! specially button animations were mindblowing 🥰

[@MalewiczHype]

Thank you so much 😀 We'll cover some more complex things next week :)

[@natalie-taylor]

This will be a fun course. Ur skillset is so vast. The only animation experience I've had, if u even want to call it animation, is w/slide decks. Hahaha So much to learn 🙂🙏

[@MalewiczHype]

I still remember some of my early flash works in 2005-2006 - like animating Nestle kids band playing music in the background of a magical candy island for some promo campaign for their candy ;)

[@felcastt]

Hi Michal! I wanted to let you know how much I've been enjoying your 'Animation Tutorials'. They've been incredibly helpful in improving my skills. I was wondering if you have any plans to release paid courses for animations in the future? Thank you for all the great content and I wish you a wonderful week!

[@souravdey7964]

Thank you very much, waiting for more video like this. One request: Can you please make a video about useful plug ins for figma?

[@MalewiczHype]

Hey, I don't really use Figma daily (I use Sketch and prefer it a lot) so I'm only using Figma in tutorials and courses because a lot of people have the free access to it - I'm not really a Figma expert and I don't use any plugins ;-)

[@samanthalivengood2690]

This is great! Especially as I am starting off in UX, looking forward to part 2!

[@karolinabossak-ahmad4916]

Great video! Looking forward to Part 2, 3, and more:) Could you do an on-scroll animation of a header for mobile?

[@MalewiczHype]

It's on the planned list, yes :)

[@DimitriiRusev]

Thanks a lot for your videos)

[@MalewiczHype]

Glad you like them!

[@Tata-banana]

Great one! Looking forward to part 2 🎉

[@MalewiczHype]

Tomorrow!

[@dkcalmmusic309]

good. I might add that working with midi is much much easier in soft.

[@simplyaizhan]

Hey this intro to animation is really awesome and easy to follow! When is next part coming out? And what other tools will you teach? I’m seeing Principe and Flinto are becoming popular and required on job descriptions! And obviously, thank you so much!

[@MalewiczHype]

Hi! I had to move it to Tomorrow (Tuesday) as I had a different important topic to cover Today. Yes, we'll be doing both principle and Flinto, and protopie + some other less known (but free tools) - the cool part is that after a while it becomes very easy to switch between animation tools :)

[@adeyeyemichael9765]

This is cool. Thanks😊😊. Can you make an animation on add to cart when the plus icon is clicked figma

[@josephgichoro4465]

Love your lessons!! Btw anyone ever tell you, you sound like Raymond for "everybody loves Raymond" show or isn't just me.😅😅

[@MalewiczHype]

No idea who that is, I don't watch a lot of tv. I do know I have an annoying voice, but I use it anyway ;)

[@josephgichoro4465]

@@MalewiczHype actually his the guy that voices Manny the mammoth in Ice age 😅. fyi I don't find it annoying. Great job👏

[@tonyfarahdesign]

Awesome!

[@MalewiczHype]

Thanks!

[@Dobratika]

Awsome!!

[@anicorless]

Unrelated but really wanted to ask you. Do you know of a small crash course for UX research or something of the sort that would let me know if I would really enjoy the reality of the job?

[@samroop]

How do we export this?

[@omaryassir5885]

Hello Malewicz, Can you do advanced Animation course using Principle ?

[@MalewiczHype]

We'll likely get to Principle within this course too :)

[@omaryassir5885]

@@MalewiczHype awesome 🔥 Thanks man

[@theriser8751]

big W

[@sakshibadlani2637]

Hey Michael! Which property did you use while animating that rectangle to 90degree, with smart and custom animation its working weird on my side

[@MauritsWilke]

If you have multiple things in a frame you want to animate, I suggest turning them into components and adding the animations to the component instead of having a lot of frames!

[@MalewiczHype]

There's a reason I do it without proprietary stuff - because I want people to be able to replicate these animations in other tools - not just Figma :)

[@MauritsWilke]

@@MalewiczHype yea was just meant for other people 😊

[@airahgilani]

I have mp3 format s and i want to make it puncNice tutorialer plzz help buddy

[@fernwehtwl]

Im not sure if its my computer that is causing a delay or lag but im not able to get the rectangle to bounce. I followed everything and rewatched this video again and again to make sure I didn't miss anything but something is still not right.

[@aaimawahaj8145]

Hey, what animation app has been used here?

[@phillipmontoya9415]

Can I add animation in bubble io?

[@imshubhajit]

Great New Series 🔥. A good decision on your part 👌🏼 for not showing your face while you are explaining the specifics (on the Figma Page) as it becomes a distraction for the eye imo. Cannot wait for you to tackle tricky Animations in the upcoming weeks. ✌🏻

[@MalewiczHype]

Yes, I believe it's distracting to show the face - and with 15 minutes of designing it's also a bit boring as the face doesn't change at all so decided to skip it :-) I already have a pretty cool / interesting plan for next weeks edition :)

[@imshubhajit]

@@MalewiczHype Exactly why I thought to appreciate that aspect ✌🏻. Cannot wait for next week's video.

[@henkegiaretta]

My circles with the 1 and 2 just appears, doesn't slide out, what am I doing wrong? 🤣

[@johanne.m.m]

Nagrywasz mega ciekawe materiały, ale byłoby miło jakbyś dodawał napisy w jęz PL 😢 🙏🏻

[@MalewiczHype]

Nie mamy na to zasobów obecnie niestety (czasowych) - mozemy sprobowac automatyczne tlumaczenia, ale wtedy ich jakosc bedzie dosc kiepska :/

[@johanne.m.m]

Byłoby super jeśli chociaż będą automatyczne 😇🙏🏻

[@enfisya]

Hey Michal! Sorry for off-top, but just saw Adobe bought Figma 🤯 what are your thoughts on this? sounds quite shitty to me.. if Adobe will influence Figma’s product or price - F is doomed..

[@MalewiczHype]

Making a video on it Today.

[@enfisya]

@@MalewiczHype 👏🏼💫 Bloomberg ruined my day. I saw tweets in Figma from Dylan Field, which are kind of calming, but feels like BS 🥲

[@MalewiczHype]

I can’t see his tweets - he blocked me 😂

[@tomashruska2171]

song from intro?

[@BerndBadewanne]

My ears died from the intro

[@tomashruska2171]

If you are having an issue with that cross animation, read this↓

[@tomashruska2171]

just a qiuick point guys. If you duplicate some element from one frame to another, the animation wont work. You have to copy and paste it ;)

[@taariqq]

Here's hoping that all the tools you end up using are Linux friendly :) Adobe is not! and what's more, they don't even let you subscribe/use their products in browser even.

[@MalewiczHype]

Oh I don't use anything Adobe. But some tools may be platform limited still - that's why I want to explore many different tools in this series.

[@taariqq]

@@MalewiczHype Cool. Great first video ... Thank You.

[@njengathegeek]

try invision or protopie and thank me later

[@MalewiczHype]

I already have a playlist on this channel about animations in InVision Studio :-)

[@njengathegeek]

@@MalewiczHype Nice one sir, I have been trying to reach you out on Linkedin sir

[@MalewiczHype]

I'm not very active on that platform, my posts there are scheduled in an external tool. Not a fan of LinkedIn ;)

[@daviddelgado4824]

Thanks a lot!! It really helps! =) 🫶

[@MalewiczHype]

Glad it helped!

[@NYProductions]

Great content! Thanks.