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
