5 Ways to Use Lottie Animations in High-Fidelity Prototypes

Show, don’t tell.

This classic writing technique isn’t just for fiction writers. It’s also relevant to design. At some stage of your design process, you’d need to work on a high-fidelity prototype – that is, a prototype that looks and functions as closely as possible to the end product. This allows you to show (instead of just telling) your developers and clients how the product would look and feel, so they don’t have to rely on guesswork.

Ideally, a user would be able to interact with a high-fidelity prototype as if they were using the final product. This means that they may click, hover or trigger certain actions. In other words, your high-fidelity prototype should be interactive.

But it’s hard to convey interactivity with static assets. Here’s where animations – specifically, Lottie animations – come in.

What is a Lottie animation?

A Lottie animation is a JSON-based file format that can be used almost anywhere, including web and mobile platforms. Lottie animations are also interactive, lightweight and can scale up or down without losing quality.

And the best part? You don’t have to create them from scratch. LottieFiles has thousands of free, customizable animations you can use in both your prototype and end product.

Why use Lottie animations in your prototypes?

If you’re designing for the web or mobile, your product will probably include animation to react to user interactions or keep users engaged. Including animations in your prototypes mean that developers and clients will know exactly how you’ve envisioned them in the final product. It’s also easier for developers to understand how to implement them, as they can just refer to your prototypes – instead of trying to interpret a written or verbal description.

And with Lottie animations, you’ll get two major benefits:

• Customizable – Lottie animations can be customized to look as if they’ve been crafted for your brand or visual aesthetic, even if you don’t know anything about motion design. Use the LottieFiles Color Palette feature to easily customize colors, or use the free Lottie Editor if you need more control over colors, speed, frame rates, sizes, and more.
• Easier handoff – With Lottie, shipping animations is as easy as shipping static assets. Since Lottie animations are JSON-based formats, you’d just need to hand off a single asset file for each animation. They can be implemented with Lottie libraries available for Web, iOS and Android. Your developers won’t need to code them from scratch.

How to add Lottie animations in ProtoPie

The great news is that ProtoPie natively supports Lottie animations. To import a Lottie animation, just drag and drop your file into ProtoPie. Alternatively, you can click Insert > Layers > Lottie. Watch this video to learn more about adding and using Lottie animations in ProtoPie.

Once you’re familiar with adding Lottie animations, check out these five ways you can use them in your prototypes.

1. Loading animations

Slow loading times can directly affect your revenue. According to Google, a one-second delay in mobile site load times can impact conversion rates by up to 20%.

The solution? Well, apart from optimizing your site to load faster, you could display loading animations – like loading spinners or skeleton screens – to occupy your users. Display them before a page loads, or after a user initiates an action and is expecting feedback. These animations make your site feel faster or more responsive, even if it doesn’t actually improve your site’s performance.

The Lottie file format is ideal for loading animations, as it’s super light. This means that it will load fast, both in your prototypes and your actual site or app – instead of adding on to load times.

With ProtoPie, it’s easy to set up loading animations in your prototypes. Just set a Jump Response to jump to the next scene after a certain delay. Play your Lottie during that delay to simulate a loading animation.

2. Brand animations

As a designer, animation is an opportunity to make your brand more memorable – after all, moving images are more easily recalled than static ones.

An easy way to implement this is to swap out generic loading animations with your brand animations. Show an animated version of your logo, use your brand colors in a loading animation or show off your brand mascot. For example, if you’ve ever used the popular language-learning app Duolingo, you’ll remember its iconic green owl. Duolingo uses Lottie animations to display its mascot on loading and completion screens.

Don’t have a motion design team to help you craft custom brand animations? No worries. You can easily customize free Lottie animations to fit your brand colors. You can even take an SVG version of your brand’s logo, and use the SVG to Lottie tool to instantly animate it.

3. Hover animations

Some elements, like buttons and icons, animate when they are hovered over. These can serve two purposes:

• Signal interactivity – When you hover over these elements and see them animate in response, you’d know that they’re clickable. This can be useful for prompting your user to click or interact with your design.
• Improve user engagement – Have you ever hovered over a button or icon, just for the pleasure of seeing it do something in response? As it animates, you might have been tempted to click on it! These hover animations can be especially useful in call-to-action buttons, where more engagement means more revenue.

It’s easy to get the Lottie format to animate on hover. To set it up in ProtoPie, use the Mouse Over and Mouse Out triggers. Your team will also appreciate how easy it is to implement in development, as they’d just need to add the value of ‘hover’ in their HTML code.

4. Visual feedback in micro-interactions

Animation signals to a user if an interaction has successfully (or unsuccessfully) taken place. For example, when you ‘like’ a Twitter tweet, the heart icon turns red, accompanied by an explosion of confetti. Or take the example of an e-commerce app – when you add something to your cart, an empty cart icon may animate into a filled cart.

Apart from indicating that an action has happened, these animations add small moments of delight as users interact with your site.

To set these up in your prototypes, use the Tap trigger in ProtoPie to trigger the playback of your Lottie animation.

5. Scroll animations

No matter what you think of Apple products, it’s hard to deny that their landing pages are amazing. They feature punchy copy, gorgeous visuals and great use of product storytelling.

But one thing in particular stands out – the use of scroll animations. Just take a look at this landing page for the iPad Pro, where animations and product images slide in and out of view as you scroll down the page.

Want to make use of scroll animations in your designs? They can make a site or app more interactive, engaging and most of all: memorable. When designing with them, it’s useful to include them in your prototypes, as it can be hard for developers or clients to imagine what they should look like otherwise.

In ProtoPie, you can use the Chain, Detect or Range triggers to programmatically control the playback of a Lottie animation. On the development side, implementing scroll animations with Lottie is as easy as enabling the ‘scroll’ mode in JavaScript.

Want to learn more about Lottie?

We hope the examples above have inspired you to try out Lottie animations in your prototypes. To learn more about Lottie, check out LottieFiles’ free tutorials and courses. Or just start by exploring the thousands of free animations in our library. So go on – pick out animations you love, customize them and create beautiful prototypes.