Building a TV Prototype with ProtoPie


My team searched for a prototyping system that could truly mimic a real TV & remote experience. Most of the prototyping software didn’t even come close, or was purely mobile-focused. The only software that had the potential to work was Origami, which became cumbersome in large flows. This leads us to ProtoPie

Building the TV

I started with the TV first because it would have the most complexity. I used the HD 1080p screen size for my TV, which fits perfectly on any common TV screen. From there, I imported my designs from Sketch and organized my layers. ProtoPie does a good job of importing things, but you still will have to rebuild a lot in the “Pie” if you want more control over an element.

Prototyping the TV

TV is harder than a mobile device because there is always going to be one element that is “selected” and from there, you can press up, down, right, left, and enter. So, you can imagine how many triggers each element had.


This will become your best friend — and makes everything work. When you create a trigger “Arrow Down or “Down”, you will then create a condition that listens for some other element. Usually, it’s the current element that is active or selected.

Adding complexity

ProtoPie can do a lot! I’m not going to go into all the things it can do (heck I don’t even know all the things it can do). I used some Lottie animations that I created in After Effects which plugged in nicely. I also used some formulas to manipulate some numbers simulating a thermostat going up and down.

Testing It on the TV

Once everything is working smoothly, I pushed the preview screen to the tv (clicked full screen). From there I was able to test the hover state, and the font readability at 15 feet. This allowed me to double-check that everything was readable and had the proper spacing at that distance.

Building the phone remote

At this point, you are a pro and can build the remote pretty quickly. Now your triggers are going to be a tap. On that same trigger, you are going to add a “Send”. Then you will have two boxes to the right, namely, “Channel” and “Message”. Channel should say ProtoPie Studio. The message is what is being sent to your other prototype. Keep it simple stupid (KISS), if the tap is a right, the message should say “right”.

TV listening to the Remote

Now go back into your TV “Pie” and do either or. At the moment, ProtoPie does not allow you to add a “receive” trigger to your triggers. So, you have to copy and paste every trigger you made and use a “Receive” as the main trigger. The channel should still say “ProtoPie” studio, and the Message should be the exact same message you wrote in your Remote “Pie”. If it’s “arrow down” in your tv, then it is “down” for both the send and receive message.

Bringing it together

First, have both ProtoPie’s open. Then take the remote Pie and click on device. Use your phone to read the QR code that is displayed. Naturally, you will need the app installed. Once it is showing on your phone, minimize the remote Pie and only have your TV pie up; this will leave your preview window just showing the TV prototype. From here, make it full screen on the TV and you are done!

Final Thoughts

My threshold for prototype animation is very high. I use After Effects for most of my animation prototyping, but I am amazed by what ProtoPie can achieve. You need real tools to mimic complex movement and animation. If your world is Invision hot spots, I would challenge yourself to test a more complex prototyping tool.



Product Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store