Designer’s Guide to Prototyping [2018 edition]
A guide to the landscape of prototyping in 2018
For this edition delving into the ecosystem of prototyping tools, let’s take a look at newer motion design tools and others with unique feature sets, so you can improve your design workflow from crafting your initial ideas to handing them off for development.
Among many newer tools there’s an increasing emphasis on collaboration through the use of multi-player editing, design libraries and improving integration with development needs. Every tool seeks to be an all-in-one solution for your design needs — let’s see how they compare.
Anima
A tool to create interactive prototypes and timeline animations, all inside Sketch. Exports to HTML/JS/CSS (and possibly React in the near future). Integrations to Figma/Adobe XD coming soon.
Invision Studio
Screen design tool + animation features. The nice about Invision that could be beneficial is that it’s home to a suite of useful plugins and tools (like Wake), which might be nicely integrated in Invision Studio’s experience. Animation is timeline based and offer extra options such as duration and delay. Currently Mac-only.
Phase
Phase is a relatively new prototyping tool that takes a different approach to animation based around interaction building blocks vs. timeline animation or copying artboards/linking them. They also have a component based approach to properties and elements and features exporting customized code. Offers Sketch import.
Flow
A prototyping tool that animates differences between artboards. Offer Sketch import. Export animations into code.
Principle
An easy to ramp up, Mac-only tool for designing animated and interactive user interfaces. Has imports for Figma and Sketch.
Principle Mirror for iOS lets others view your designs on their device.
ProtoPie
For anyone feeling nostalgic over Pixate, check out ProtoPie! It’s a prototyping tool for Mac and Windows that animation based off of a straight forward trigger interaction model. Something unique to ProtoPie is including the use of sensors built in smartphones to create prototypes that are more complex than on-screen prototypes.
Offers Sketch/Adobe XD/Figma import.
Origami Studio
A tool for designing modern interfaces, built and used by designers at Facebook, with a good integration with Sketch. Robust micro-interactions defined by basic building blocks called patches which allow you to create natural animation, similar to functions in code.
Prototypes can be exported to Apple and Android devices.
Conclusion
I hope exploring these tools helps you prototype faster, smarter and easier. If you’d like to learn more, take a look at the popular prototyping tools in the past few years below.
