Building UI animations with Lottie and ProtoPie

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 behaviour. 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.

1. Animations

(Illustrator, After Effects, LottieFiles)

Let’s 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 ;)

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 prepare them yourself in Adobe After Effects. If you are not sure how to start, this tutorial might help you: