Micro animations in Figma

In this Figma tip, learn how to create a micro animation (also knows as micro interaction) using a heart icon. This tutorial covers the use of interactive components and prototyping.

____________________________________________________

Find us on ⬇️

____________________________________________________

#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

[BigMoneyKirk]

This is so good! Thank you for even going further into breaking down the reasons of WHY you chose to do the things you did - which really helped me learn your process. I can’t wait to start applying these techniques!!

[anishhirlekar]

Wow, the minute details. So many times we face these small issues while making micro-interactions, now hopefully I should be able to solve them with your techniques which sounds so simple, but truly so much of thought has gone behind that to make it perfect. Thank you!

[whatsoeverimin]

Thank you a lot for this tutorial, and ESPECIALLY for the last part, because it's incredibly useful for both beginners and professionals. Great job so far!

[utlaxis]

Amazing tutorial and thanks for the extra examples that explain the error cases, I think this is very educational congrats!

[beingdealtwith]

This was really a good tutorial, especially that last bit where she explains why she did it the way she did with examples, it cleared up my confusions head on. Thank you for this!

[megaroeny]

The breakdown at the end with the Q&A was fantastic! Thank you!

[manatag]

what a great tutorial and a great format with that additional examples and explanations. thank you!

[bandadaapp]

I loved the explanation with the shoulders swaying.

[NehmatGereige]

Brilliant explanation of what not to do. love the details in your video and the clarity of expression and thought process. Thank you.

[NitinSingh-dwzp]

Amzing video, just wanted to get started with micro interactions to create one for my project. And yes I created one with ending of the video.

[kaii]

Beautifully done. Love the negative explanations at the end to describe different outputs! This is where many ppl often leave our information!

This is super helpful. I'd love to see more micro animations like these. Super thank you so much

[lachocolatada]

Oh, wow!!! I need a tutorial about every single thing on Figma by you! Oh my, the details about why choosing every move or variation is by far, the best. I love the way you explain everything, how you communicate it, and the fun you add to it! Every time I learn something new with your guidance, I enjoy and learn a lot. Thanks!!! Ps: Ps: By the way, I loved the wiggle every time!

[mattgib]

What a fantastic, to the point tutorial, ty!

[kevinbodi]

I think a lot of work will be in to little use, as a lot of front end developers won't be able to carry this over into the real world (even though it's possible). Figma should be more pragmatic and in line with how the different technologies solve this. Both vanilla CSS that has animations with keyframes as well as transitions, but also acknowledge the existence of some popular animation frameworks.

[basuki]

after making the component set, it's not working. before that it's working fine. what am I doing wrong?

[cyan__lab]

Thank you for such an amazing tutorial! Very easy to follow, I really appreciate y'all for posting videos like these!

[subhash]

Perfectly explained thank you so much 😊

[Szynszula]

so cool! And perfect explanations!! Thank you so much <3

[carpenterisathing]

I hit the like button as soon as I saw that wibbly-wobbly shoulder thing