Micro interactions – Prototyping
- Figma Resources
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 𝗙𝘂𝗹𝗹 𝗛𝗗 𝘃𝗶𝗱𝗲𝗼 𝗼𝗻 𝗬𝗼𝘂𝗧𝘂𝗯𝗲
The file will be updated regularly with new samples.
Use this template to organize your ideas and user stories. A template to set up your Figma files.
neoPOP is a design language introduced by CRED and this file is fork of their new design system. this file contains a color system, typography, grid, and a robust 300+ component, variants all with component props.
Here’s a file with logos of 250 tech companies in two variations each–glyph and wordmark. Each logo is a vector that can be exported in any size, all of the logos are conveniently created as variants for easy swapping. All of the apps, included in this file are listed on companies.tools–it’s where tech teams share […]
Submit a Figma resource now!
Never miss a thing! Sign up for our newsletter to stay updated.
Figma Hunt curates the best new Figma resources, every day. Discover the latest Figma templates, plugins and resources all in one place, updated constantly.