ProtoPie is a cross-platform prototyping tool that creates prototypes nearly as powerful as those made with code, with half of the efforts, and zero code. Teacher Leah Han is here with a new ProtoPie Tip! This is part one of two which covers basic Looping Animations. For the second part, we will talk about Infinite Paging Scroll.
I’ve been looking into alternatives to Axure. Don’t get me wrong, Axure is still my favorite prototyping tool, but I need to keep my skills sharp. I’ve started with Protopie : an app to create highly interactive mobile prototypes using gestures and hardware input.
Simple and exhaustive mobile interactions
Protopie lets you add interactions to mobile designs. It is easy to pick up and you can make awesome effects very fast with an interface that is very similar to video editing. It is great for defining sequences of micro-interactions precisely, thanks to its timeline animation approach. It also allows to create very simple transitions very quickly.
I spent about 2 days on paper to iterate on a concept, then a day in Sketch to create the screens. It took me about half a day to create this interactive prototype in Protopie :
Fast preview and sharing
One of the strength of protopie is its ability to use the mobile hardware to trigger interactions such as tap pressure, compas, built-in gyroscope input… It also lets you create interactions for any motions and number of fingers.
Combined with the protopie app, you can preview most interactions on any device, although some hardware interactions only work with a predefined selection of common apple or android devices. Since it supports few but common devices, it didn’t work with mine.
Reasonable learning curve
Unfortunately I don’t have access to the demo anymore to share screenshots of my prototype in the interface. I’ll add them later if I decide to buy the app, but I at least want to share an image of the interface. It looks a lot like sketch, with layers on the left, properties on the right. The central area contains the screens. You can only see one screen at a time, which makes navigating screens slightly less efficient.
The first column right of the screen is the timeline, which lets you add interactions and control animation speed and delays.
It takes a bit of time reading the documentation, but once that’s done, it’s fairly easy to use the software. It’s not as simple as doing everything visually, you need to use menus and know all the names to use the app, but it’s way more accessible than Axure. All options and properties in particular are much easier to configure for result with similar complexity.
Cool short demos, not for usability testing
Protopie is great to demo an interaction once. It is not optimized to create fully interactive prototype : you can’t duplicate assets with their interaction easily, which makes creating a fully operational usability testing prototype tedious.
Something as trivial as re-using a toggle animation on a switch requires to copy-paste all elements and interactions one by one and manually update the assets the apply to every time. You can at best duplicate a whole screen to preserve interactions for menus or options, and change the content afterwards.
It’s not going to replace Axure, but I can see how I could use it to test quick animation sequences in no time.
Hi,I am Fredo from ProtoPie! Thanks for writing an article on ProtoPie. I understand your pain point and I have shared it with the rest of the team.By the way, did you log in on ProtoPie Studio? When you do, you can extend the 7-day trial period with another 30 days. If you already did, shoot me an email :)Cheers,Fredo
Hi Fredo,
Thanks for the feedback! I didn’t know I could extend the trial : will definitely contact you when I do so.
Cornelia
Bring your idea to life in no time. The prototyping solution for all your needs. For UX designers, entrepreneurs, product managers, marketers, and anyone with a great idea.
Start for free100% Web based. No code required.
Start building your first prototype in no time. Proto.io's intuitive, drag & drop interface gives you all the building blocks that you need to get started! No skills required.
Start for freeMaterial UI KitMaterial UI Kit - Side NavigationAudioWeb Template - Header with devicesOnboarding Tour
Communicate the functionality behind your designs and improve communication. Add different levels of interactivity based on your project's needs and go from a simple wireframe to a prototype that feels real.
Start for freeTake your prototype's interactivity one step further by introducing micro-animations with Proto.io's powerful animation features.
Made in Proto.io
Protopie Videos
Import from Design tools
Support for any device
Variables
Reusable components
Masking
Examples
See all examples![Youtube Youtube](/uploads/1/1/2/2/112295097/577540597.jpg)
'It helps us to develop a realistic prototype with complex features quickly. This leads to a very powerful demo for client buy-in of the design.'
Protopie Serial
'Robust features make this tool stand out. Other non-code-based UI prototyping tools I've used lack the range of features-like animation and gesture support-that Proto.io offers.'
'Proto.io is our tool of choice for prototyping mobile interactions in the concept phase. I found the custom transitions especially helpful in articulating the vision of the app to both customers and stakeholders.'
'Proto.io is one of the best tools available to make prototypes come to life. It's extremely easy to use and it comes super handy to quickly explain interactions, gestures and layout to both peers and clients.'
Protopic Tube Size
Trusted by companies of all sizes and passionate individuals
Protopie Tutorial Youtube
Visualize your idea in no time.