How to spec animations/microinteractions within your prototypes, and how to work with your developer to make them a reality.

Overview

Since the death of Flash in 2020, and arguably long before that, the modern web has been bereft of more advanced animations that underpinned an era of motion graphics technology with a lower barrier to entry.

However, we are finally seeing these types of animations make a comeback, and they look fantastic.

Today, we’ll be covering how to spec animations/microinteractions within your prototypes, and how to work with your developer to make them a reality.

What is animation in design?

Essentially, animation in design is taking elements that would normally be static (or unmoving) and making them move either in response to a user, or to prompt interaction from a user.

Why animate UI at all?

It has been debated for many years whether or not designers, developers, and product teams should even bother animating parts of their UI at all.

It can be time-consuming, expensive, and increase the time-to-release of your product, depending upon how advanced the desired animations end up being.

Still, the desire to animate UI more or less boils down to teams attempting to do three things:

1. Increase user engagement
2. Provide context within their UI
3. Create a more novel experience within their product

Categories of specification

There are essentially two ways to specify animations within your prototypes.

• You can either use a tool like smart animate to create automated animations between frames like in Figma, or
• You can use a tool like Protopie to create keyframe and timeline-based animations which operate using keyframes.

Why does this difference matter?

Put plainly, it matters because Figma allows you to create relatively simple animations that are easier to work with, whereas Protopie’s animation tools have a much steeper learning curve, but allow you to create animations that are much more detailed, and with a higher degree of control.

Component behavior & microinteractions

It is worth mentioning that most modern applications you’ll work with leverage microinteractions and component behaviors in order to create a richer user experience.

Microinteractions are small animations that play in certain contexts within the UI.

Component animation/behaviors are how specific components or component sets are animated and adjusted, either individually or in relation to one another, within specific usage contexts (this can vary depending upon the framework your team may be working with).

How to spec your animations

There are a plethora of ways to create animations and specifications within your design tool of choice, be it Figma, Protopie, Framer, or even straight-up code. We’ll go over a few here:

→ Speccing animations in Figma

Using smart animate (built-in functionality)

Or Figmotion (plugin/extended functionality)

→ Speccing animations in Protopie

→ Speccing animations in Framer

→ Speccing animations in code

https://developer.android.com/training/animation/overview

Is it really worth it?

Whether you’re brand new to UI/UX or a seasoned designer, working with animation and motion graphics can feel like adding a whole other layer of complexity to your design workflow.

I’m not gonna sit here and lie to you, speccing complex animations that are really novel, unique, and drive user engagement can be a bear. That being said, the coolest looking animations that grab your users eyes will almost always be time-consuming to create, and that’s just the nature of the beast.

People now have shorter attention spans than goldfish, and we need to design as such.

Bottom line: if you want your users to fully engage with your site, app, or service, you need to include animations and microinteractions to keep them visually stimulated.

Animation specs and your developers

9 times out of 10 animating anything makes a developer’s life orders of magnitude harder. We can ease this burden by providing them with robust, detailed specifications that include the code that drives our animations under the hood.

Every tool that I have listed here outside of raw code gives you the ability to export usable, coded animation specifications in one form or another, which you can discuss with your developer, and help them to implement.

Understand that with animations it is almost never a case of purely “handing off,” and will almost always require ongoing collaboration between you and your development team to get it right.

Bringing it all together

To summarize:

1. Animations and microinteractions are included in applications to provide context and to increase user engagement.
2. You can spec animations and microinteractions in Figma, Protopie, Framer, and raw code.
3. It is almost always worth it to include animations in your final product because users expect that level of polish in modern digital experiences.
4. Make sure to continuously work with your development team in order to ensure your animations are implemented correctly.

Nick Lawrence Design
Website | Portfolio