Tips 4 min read

Building UI Animations With Lottie and ProtoPie

Follow along this tutorial to create a UI animation using ProtoPie and LottieFiles.

Anna Rzepka
Anna Rzepka, Senior UI/UX Designer @ Forte DigitalAugust 31, 2022
ProtoPie and LottieFiles thumbnail

Prototyping user interfaces is an important step in the design process. It allows designers and stakeholders to test the feasibility of their ideas and understand user behavior. It also helps with developer handoff.

You have no coding skills to make realistic prototypes? You don’t need them with ProtoPie! ProtoPie allows you to create high-fidelity experiences using keyboard typing, camera input, voice interactions, conditions, multi-touch gestures, and Lottie animations. It’s simple yet powerful.

In this tutorial we’ll make a simple mockup of an app for pet care providers offering to walk dogs when their owners can’t do it themselves. We will use Lottie to create a playful experience for hiring a pet sitter.

1. Create the animation

First, you need to have some animations ready to use in ProtoPie. You can download free animations from LottieFiles or even buy them from the marketplace. You can also create them yourself in Adobe After Effects. If you are not sure how to start, this tutorial might help you.

For this prototype, I’m going to rig a dog character and keyframe its walk cycle. You can also use popular After Effects plugins like Duik or RubberHose to speed up your workflow.

Create the animation.
Walk cycle animation in After Effects.

When you’re happy with the animation, export it to a .json file using the LottieFiles plugin. Make sure to convert all expressions into keyframes in the export settings.

2. Create the UI design & export to ProtoPie

Next, we need some UI to stage our cute animations. You can design directly in ProtoPie. If you haven’t used it before, first you might want to check out this quick start guide: How to Make Interactive Inputs with Figma and ProtoPie.

Designs can also be imported from Figma, Sketch or Adobe XD. Just remember to name your layers properly to save yourself a hassle later.

User interface designed in Figma.
User interface designed in Figma.

3. Start prototyping

Create a button component

Our design has two buttons to pick the size of a dog. Creating a component makes it easier to set the custom behavior of your elements. To do this, select the button layer and click on the component icon in the top toolbar.

Creating components in ProtoPie Studio.
Creating components in ProtoPie Studio.

Selecting one button from the set deselects the other. To achieve this, you can use the Send response and the Receive trigger inside the component.

Add a Tap trigger to the button with a condition checking for the background color. When it’s grey, it means that the button is being selected. Change the background to green, the font color to white and show a drop shadow. Send the message to the current scene to deselect the other button.

Adding conditions and the Send response to the component.
Adding conditions and the Send response to the component.

Next, add the Receive trigger with the “deselect” message. When your component receives this message, the button will no longer be in the selected state. Then, change the styling to the deselected grey button.

You will notice that the logic here is a bit off for now. This is because both actions happen simultaneously. To make it work, add a 0.01 delay to the styling responses inside your condition.

Setting the Receive trigger.
Setting the Receive trigger.

Import the Lottie files

Once the buttons are set up, you can add your Lottie. Go to Media/Lottie and choose your .json files. Make sure to select the “Play automatically” and “Looping” options at the bottom of the right panel.

Importing Lottie files into ProtoPie.
Importing Lottie files into ProtoPie.

Set Tap triggers

Lastly, connect the buttons with your animated characters. With the Tap trigger, you can move one animation out of the viewport and bring the other one into the view. Adjust the easing and duration of your microinteraction to your liking.

Adding Tap triggers to buttons.
Adding Tap triggers to buttons.

The final result

The finished microinteraction.
The finished microinteraction.

Check out the clickable prototype here.

ProtoPie helps designers bring their ideas to life in the form of high-fidelity interactive prototypes. Start building your own ultra high-fidelity prototype without writing a single line of code today.