5 tips for better microinteractions in InVision Studio

5 tips for better microinteractions in InVision Studio

As UI elements of websites and apps become more unified, it’s the attention to detail that differentiates the best from the rest. One of the best places to see this in action is microinteractions, which make user actions more rewarding, and user experience A+.

What are microinteractions?

Microinteractions are small animations usually taking place on one specific UI element, such as a button or input field. Their purpose is not just to please users, but also to add a meaning and immediate feedback from UI. Take this microinteraction by HoYun Son as an example:

Below are a few tips for creating microinteractions, as well as an introductory video guide for animations in InVision Studio.

Shape morphing

The key to totally streamlined animation between shapes in InVision Studio is designating them as linked layers in the Timeline editor. To do this:

Duplicate the artboard with the shape and change its size

Then, create the Motion transition. If you keep layer naming consistent, they should be automatically linked. If not, shift-click to select layers,, and then click on the Link Layers button.

Note that the ability to morph shapes is limited to simple properties like color and size.

Using the in-between screens

Keep in mind that all animations in Studio take place between two or more artboards. If you want to create a transition that has three stages, you’ll use three artboards:

In this case, I want the middle artboard to transition automatically into the third one after a short period of time. To accomplish that, let’s use the Timer interaction with the following settings:

The Timer lets you set the Timeout, which is the time of inactivity for that artboard. Bear in mind that you don’t have to include animation time in this delay; it will start right after the animation has been played. In this particular case, the animation will play for 0.5 sec, after which the artboard will pause for another 0.6 sec.

Using masks

To create some more sophisticated microinteractions, you can use masks. For example, you can mask out the vertical text field with numbers ranging 0-9 and change the Y position across the artboards to create the effect like this:

In Studio, the default setting for animations is “ease-in-out.” The great thing, though, is you can set variable easing for not only single animations, but also to specific animation properties such as X, Y or Height. by clicking on the little arrows next to the layer name in Timeline Editor.

Preview in slow motion

In InVision Studio you can easily preview the animations in slow motion as well as loop the playback. You’ll find the playback controls above the Timeline while editing animations. Another way I often use to playback in faux slo-mo is scrubbing the playhead over the timeline:

My advice is to preview animations in slow motion only after you set the correct timing. We tend to tweak animations too much while in slow motion, even thoughit’s difficult to see the results in the actual microinteraction. As you’ll find out, trying to be perfect doesn’t always give you the best result!

I hope these tips will help you create better microinteractions using InVision Studio! Want to learn more? Check out a 20-minute video I’ve recorded with step-by-step instructions. If you want to learn InVision Studio from scratch, check out the three-hour video course I’ve created for learnux.io.

Want to learn more about Studio?

Greg RogGreg’s work is all about design, coding and education. For over 10 years he’s been a professional designer, design lead and UX consultant for companies such as Microsoft or Google. He works closely with Adobe as Community Professional. He created biggest local website with video tutorials on code, design and more with over 100.000 clients. He also runs a software house and a training facility, speaks on design conferences and more. He’s curious, passionate and loves sharing knowledge.