John Redhead

ProtoPie is a fantastic tool to use when building high-fidelity, highly interactive prototypes. Leverage more from the program and work smarter by using these 12 great pro tips.

Photo by Alvaro Reyes on Unsplash
  1. Rename your layers
    Get into the habit of renaming your layers. As a designer, it’s easy just to create layer after layer and get caught up in what you’re designing, but a little time in naming your layers, especially in ProtoPie, where you are going to be selecting triggers and responses on different objects will help you a long way. (If you’ve got 15 buttons, named button 1, button 2 etc, how will you know which button to make visible if you hit the save button, and what did you name the save button in the first place.)

  2. Rename your triggers/interactions
    Likewise, rename your triggers. For example, if you set a ‘Tap’ trigger on the Save button, you will get a label of ‘Tap’ on the interaction panel. What are you setting the Tap trigger on? If it’s on the save button, then rename it to ‘Tap Save’, this will help you as your prototype becomes more complex.

  3. Keep your layers tidy Where possible, sort your layers so that the elements at the top of your scene are at the top of your layers list, working left to right. Again, helping you as your prototype gets more complex.

  4. Group similar triggers together
    Whilst we’re on the subject of triggers, group triggers of the same type together. Got 15 receive triggers? Group them together and you can then collapse the full group, freeing up valuable real estate in your interaction panel.

  5. Use components
    If you can create a component and make use of it then do so. It can make your job a lot easier, especially with complex interactions. It’s worth the learning curve to get there.

  6. Use the text tool to style text buttons
    Don’t create a rectangle and then create a text layer on top of it. Create a text layer and then modify the properties of the background of the text layer in the text properties panel.

  7. You don’t need to create everything, it’s only a prototype
    Sometimes you may have to create a full prototype, but don’t feel that you always have to. A prototype is after all ideation of your concept, to evaluate and identify the best solutions for your app. To rinse and repeat, ultimately leading to, hopefully, the ultimate user experience. If you just need to get the flavour of how your app works across to your stakeholders, it may only be necessary to create say 1, or 2 product detail screens, rather than for the 200 products that you have on the catalogue screen. Likewise, if it’s just part of an app that’s more complex, just create that part of it.

  8. Use variables and the bug icon to see if things are working
    If things aren’t quite working, create a temporary variable and select the bug icon next to it, so that it appears in a green panel on the preview screen. Then inside the trigger that you’ve set, assign an associated value to your variable to see why things aren’t working as intended. You can remove that variable once you’ve got that part going.

  9. Why do your variable panels’ positions keep resetting
    If you move the green variable panel in the application window, it will stay there in the preview window. On the other hand, if you move the variable panel in the preview window, it will always revert to the position that it is in the application window when you refresh the preview.

  10. Use temporary text layers inside components to help to see if things are working
    Create temporary, debug text layers inside your components and send data to them from your current scene, this will help you to iron out any issues. Either remove them once complete, or set their opacity to 0, especially if you think you may need them again. As mentioned in point 3, I group a series of debugging triggers together, in both my scene and component.

  11. As long as it gets the job done
    It doesn’t matter how you get to a solution, as there are no right and wrong ways of getting there. If it works as you want it, it works! Simple as that.

  12. **Just give it a go…**
    One of the best pieces of advice is to “Just give it a go”. What’s the worst that could happen? Just start using it. Use the training resources on the ProtoPie website and on YouTube to help you along.


Bonus Tip. Shout out for help
If you’re not sure how to do something, ask in one of the social groups, Facebook, Twitter, Discord and on the Protopie community group. There are always people there with a wealth of knowledge that may be able to help you.

Have you used any of these tips, or do you have any tips of your own? Let me know in the comments below, or get in touch.