I’m back again for another post about Figma. Why? Because it is hands down my new favorite design and prototyping tool. Even better, it is an all-in-one solution! For this post, we are going to talk about tips for improving micro-interaction prototypes, such as hover effects or UI animations.
1. Work backward
For prototyping micro-interactions, we are less worried about how a user navigates throughout an app from beginning to end. Instead, we’re focused on what the final state looks like for the interaction. Often, our final state may look much different or incorporate more elements than the starting point.
By working backgrounds, we are building what our desired end state looks like first.
If your prototype is showing how buttons come in from off-screen, you’ll need to account for those buttons in both states. Once the desired end state is done, duplicate the frame, and then slide (with Shift+Arrows) off the artboard.
2. Build a table of contents
When prototyping micro-interactions, I am often testing variances in the design. Because prototyping in design tools typically has a single starting artboard, it becomes annoying to have to exit the prototype, switch the starting artboard, and launch it again.
I’ve found that creating a table of contents and a consistent ‘container’ increases the speed at which I can test between options.
3. Avoid combining Micro- and Macro-interactions
Macro-interactions are concerned with app navigation, making sure users understand where they go to accomplish a specific task, and how easily they can get there. To prevent complexity, avoid building out the micro-interactions into a macro-prototype, or else your prototype is going to become far too complex to manage.