ProtoPie - High-fidelity prototyping with a touch of Lottie animations
Jeff Clarke, ProtoPie Expert and Enterprise Trainer
Motion in a modern UI is extremely important. When used effectively, animation can be instrumental in aiding a user with various tasks in non-literal ways.
ProtoPie is high-fidelity prototyping software that can be used for a wide range of devices, including automotive, custom hardware, IoT, desktop web/apps, tablet web/apps, and of course, mobile web/apps. The world’s top design teams at companies such as Google, Meta, Microsoft, Amazon, BMW, Mercedes, GM, etc., all use ProtoPie in their design process. Introducing high-fidelity prototyping to the design workflow enables designers to test and refine their ideas and bring their concepts to life before the developer handoff. Together with LottieFiles, you can bring even more motion and interactivity with ease.
What inspired you to incorporate LottieFiles integration into your platform? What kind of benefits does it bring?
ProtoPie is all about creating a rich, realistic experience, and modern UIs make great use of animation to help “tell the story,” whether it's for adding a touch of fun or for subtle non-literal prompts to help the user achieve a specific task. Self-contained Lottie animations offer a great way to do this without adding a ton of complexity to the prototyping process. While ProtoPie offers a vast suite of animation capabilities, they are tuned more for UI interaction and less for traditional animation. Lottie animations fill this gap admirably, and with ProtoPie’s full integration of playback control, a prototyper gets the best of both worlds—rich animation when needed to support the user journey without being distracting when it is not.
How did Lottie animations contribute to Protopie’s success?
No sacrifices are needed when incorporating Lottie animations into ProtoPie prototypes. Animation can be added in a number of different ways in ProtoPie—video can be used, for example. However, their massive size can be problematic for certain prototyping scenarios, and working with various codecs to produce video with alpha can be tedious for a designer. Meanwhile, animated GIFs offer the same lightweight advantage that Lottie does, but their limited color depth and bitmap nature result in a lower level of quality. Lottie animations offer full 32-bit color and vector graphics, meaning they will always look great at any size. Plus, the full integration with ProtoPie means a designer has the same level of playback control as with videos but without the size and complexity.
What were your goals in integrating Lottie animations into your project (ex.LP), and how did they align with your brand and marketing strategy?
Motion in a modern UI is extremely important. When used effectively, animation can be instrumental in aiding a user with various tasks in non-literal ways. Integrating a Lottie animation into one’s prototype gives the designer the affordance to achieve this with minimal friction and effort. As an example, consider how meaningful a Lottie animation can be as an alternative to localizing a UI in various languages. Instead of writing instructions on how a specific task can be accomplished that need to be translated into various languages—a time-consuming and expensive endeavor—a designer can instead use a single animation to fully illustrate the applicable tasks and instruct the user without words, either explicitly or more subtly, depending on the needs and desires of the designer.
Even more attractive to designers is the vast library of freely available animations on LottieFiles.com that any designer can use to find the perfect animation for their experience in a matter of seconds.
How do Lottie animations enhance the experience with UX/UI designers when building highly interactive prototypes for different interfaces?
ProtoPie’s animation toolset is geared toward micro-interaction, not toward linear, timeline-based animations. Designers can use tools they are already familiar with, such as Figma or Adobe After Effects or like us we use Lottie Creator, to create brilliant, rich animations. The AI prompt to vector plugin on Lottie Creator enables users to turn their ideas into reality. Meanwhile, with ProtoPie’s integration of Lottie animations into their prototypes, designers have the same full playback control as with videos without the complexity and bloat that come with them. In other words, you can seamlessly control how you want your animation to be played on your prototypes. Therefore, a UX designer has a powerful and easy way to add motion to their experiences.
Additionally, Lottie offers several advantages that immediately benefit the needs of the UI or UX designer. Today’s experiences are not single applications; instead, they are designed to be used on all sorts of screen sizes and devices. Lottie’s ability to be scaled without quality loss means a single animation can be used in all of these interfaces, ensuring consistency for the user and streamlining the design and development cycles with a single asset that can be used everywhere.
