How to add micro interactions to your Figma prototype
Designers know how important feedback is to a great user experience. As Apple’s guidelines state:
“ Feedback helps people know what an app is doing, discover what they can do next, and understand the results of actions.” Link
Figma is very helpful in creating fast transitions between screens. If you are new to the topic of interactive prototypes in figma, I recommend you start reading about the types of interactions in Figma. With the help of Smart Animate you can simulate the most basic interactions with ease.
If you need to prototype menus or dialogues check this tutorial on Ovelays in figma.
This tutorial is a little bit more advanced on how to achieve more realistic interactions in your prototype.
Micro interactions in Figma
If you look for a way to create “Active” or “Selected” states to the buttons ina figma prototype, you’ll discover that there is not yet a built-in feature for this. The figma community is asking for this feature since this is very interesting to create high fidelity prototypes.
Until figma adds this feature you can manually create micro interactions in between using more than one animation for an interaction. I will demonstrate this technique with an example of a button on a mobile app. But it can be used for any kind of prototype and any kind of animations. The benefit of this method is getting more realistic interactions and a better user experience.
An example
Let’s take for example this App for trading. I have a Home screen with some elements and I want to jump on the Market information for that element after tapping on the first element in the list.
To have a smooth animation with Smart Animate you need to have the second screen on the first screen duplicated and off-screen. I recommend creating components for the screens for better layer handling.
This is easy to do. You’ll find tutorials explaining how to do it.
But the question is how to give feedback to the user after pressing the first element. To achieve that feedback, I want to add a micro interaction. After pressing the button, I will display a small animation indicating the selection.
First create another screen in between that will be used to create a transition between the normal and the selected state.
Micro interaction. Smart Animate will identify the common elements and animate the transition between their properties. On the first screen I have an overlay rounded rectangle with 0% transparency that will be scaled and change opacity with the animation.
Invisible trigger. This animation will be triggered by another invisible rectangle with an event “on Mouse Enter”.
Delay for 2nd animation. After the micro animation is finished on the second screen, “HOME-selected” I have an Event with a delay of 100ms to jump to the final screen “Market information”.
Let’s see how it works. can see the demo of the prototype.
This is just an example of micro interaction but the possibilities are limitless.
I’ve uploaded the original file in figma to Gumroad if you want to check it out.
