Micro animations in Figma

Nice tut. Sidenote, the typeface used in the titles is not so hot.

Incredible tutorial! Thank you!!

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!

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

Great tutorial, love every time she mentioned 'shake' and she would shake by herself lol

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

I did everything as she said and still no animation :( maybe its a bug?

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!

Going into prototype mode does nothing.

wiggle gang thank you great tutorial

How can I export this as a gif file.

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!!

Very helpful! thank you

Haha Loved the dud du du duu

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

What was used to record? I love seeing the keystroke combinations

I follow this tutorial step by step, literally doing everything as shown and when I click prototype it doesn't move. Anyone else have this problem?

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

what's the point in creating these animations, when we can't export them in supported formats like JSON, GIF etc

Although it's really fun to create animations and complex prototyping inside figma ❤

shift + X, i have always wanted that shortcut

hey @figma whats her twitter and IG. just watched 3 videos from her and she's excellent. thanks for your very explanatory videos

I want this file pls

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

Thanks! More of these please! :)

<3

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.

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!

Font ???

Very well structured tutorial. Well done 🎉

That's a terrible workflow jst to achieve a simple animation. You need a timeline or at least code driven animation....

Just give us a native animation timeline for interactions like this DAMN

Thank you for listing all the pitfalls! Very helpful ❤

Uff lovely

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

👏

"da-duh da-duh"

Really nice tutorial, but I think Figma is in desperate need of a proper animation solution

I loved the explanation with the shoulders swaying.

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

cool!

Great! Thanks for sharing