Micro Interactions - Prototypes Free Figma Template

Micro interactions - Prototypes - Free Figma Template

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 

This freebie Micro interactions - Prototypes was originally shared by Rusmir Arnautovic on this url.

The category for this freebie is Uncategorized. Tools used to create this freebie are Figma and Adobe XD.

Helpful hint: If the license is unknown, it is usually because they forgot to mention it explicitly; not because they were being stingy. Before using it for a commerical project, you can ask Rusmir Arnautovic nicely and they will probably allow you to use it.