Prototyping with data, advanced operations & Lottie animations

If you thought ProtoPie was powerful before, get ready to unlock its full potential. Discover 3 more hacks to enhance your interactions with advanced string formulas, dynamic customization with data, and squishy animated unicorns.

We left our beloved friend Figma behind a while ago. And don’t get me wrong, I love that tool. I use it nearly every day, in almost all my projects. As mentioned, the tool is great for 99% of our daily design needs. If you are still unsure whether you’ve reached this tool’s limits, I suggest you first read my previous article.

When is it time to move prototyping from Figma to Protopie?

Speaking on Prototyping. To address that 1% Figma still can’t handle, we need a dedicated tool like Protopie to do our craft. We managed to set the foundational logic in our previous article. Here is the output so far.

Something that could take several hours and heavy hacking in Figma, took us just a few minutes with 2 variables and custom formulas in Protopie. Today we go even further into data-driven interactions and logic. We will start customizing our help and error messages with advanced string formulas. Then we will uncover Protopie’s flexibility with customization. In the end, we will apply the same logic to integrate custom animated unicorns with production-ready JSON files with Lottie. Let’s go!

I. Advanced Formulas with Strings, Numbers & Formatting

We are printing 3 different messages in our Dynamic message text object. Each one with the aid of one custom formula when we detect one of 3 different conditions events in our Detect Trigger.

1.Default state. The balance variable is equal to 20,000

balance

2.Help message for the final balance. When the amount variable is less than or equal to the balance variable

balance - amount

3.Error message for insufficient funds. When the amount variable is more than the balance variable.