Producing an interactive prototype with Protopie

As a designer, I’ve gone through several prototyping tools over the years. I remember using Adobe Illustrator to create prototypes back in the day when I was a Windows user and couldn’t use Sketch. When I was finally given a new MacBook to work on in 2017, I was excited to finally try Sketch. At that time, Adobe XD was still pretty new and not as developed as Sketch.

Nowadays, Figma is widely popular, and I feel comfortable using it because of how easy it is to iterate designs with it. However, I was recently challenged to present my prototype in an interactive way, and I found that Figma was lacking in features for this purpose.

After researching, I found Protopie and tried making my prototype interactive with it. There was a learning curve, but thanks to my background in programming, it was easy for me to understand how to create variables and put logic in the prototype. It took me a day, though, to create the interactive password field.

I created this prototype and tested it internally. I was really satisfied with the results because I was able to demonstrate to the team how the interactions and logic in the events will work.

I really like using Protopie, and I think it helps in user testing a lot. Typical clickable prototypes are just hotspots put on images and thus cannot give an almost similar interpretation. However, there are a lot of features Protopie is missing compared to Figma.

Overall, computer software for design is quickly evolving, and I’m excited to try new ones and find something that I can include in my design process. It’s important to keep an open mind and always be willing to learn new things in order to stay on top of the game.