Micro interactions – Prototypes

Templates
Figma Resource

How to make Micro-interactions in Figma⁣⁣⁣

⁣⁣⁣

???? ??? ??? ??????????????????⁣⁣⁣

Those are the small, everyday events in digital products that can be a great way to enhance the overall experience for your users.⁣⁣⁣

⁣⁣⁣

Examples include what happens when you favorite a tweet or the way an app updates its interface after a task is completed.⁣⁣⁣

⁣⁣⁣

In this tutorial, I’m going to show you exactly how to prototype a micro-interaction in Figma.⁣⁣⁣

⁣⁣⁣

You’ll learn how to make this animation for when a user hovers over an Inbox icon and then clicks or taps on it.⁣⁣⁣

⁣⁣⁣

Now, I know it might not look like much, but that’s the whole point. Micro-interactions are supposed to be useful, but not intrusive.⁣⁣⁣

⁣⁣⁣

All tutorials in ???? ?? ????? ?? ???????⁣⁣⁣


rusmirarnautovic.com/youtube/

⁣⁣⁣

The file will be updated regularly with new samples.

UPDATE

02.10.2021 – All micro-interactions are reworked as interactive components. See prototype link:

https://bit.ly/3bxurbZ

Also added new interactions, like button, checkbox, radio button.

– 03.05.2020 – Menu Pop up – Social Item count- Slide to top

– 10.05.2020 – Menu hover – Follow Item, Button Micro action, Dropdown menu

– 12.05.2020 – Chart Bar Animation – removed

– 14.05.2020 – Upload files Animation, Finance card Animation