<p>Published on <a href="https://blog.prototypr.io/designers-guide-to-prototyping-2018-edition-6e634392c77a?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Joanna Ngai <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*E54bM9C1YN1zvzCPwTIbEA.png">Credit: Invision Studio</p>
<h4>A guide to the landscape of prototyping in 2018</h4>
<p>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.</p>
<p>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.</p>
<h4><a href="https://www.invisionapp.com/studio">Invision Studio</a></h4>
<p>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 <a href="https://www.invisionapp.com/blog/wake-joins-invision/?utm_source=twitter&amp;utm_medium=organic&amp;utm_campaign=Convos">Wake</a>), 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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*zduhoMD577WF19eg8H9zmw.png">Credit: Invision Studio</p>
<h4><a href="https://phase.com/">Phase</a></h4>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*rCz3OnGEsYVK-NBJJZlXTw.png">Credit: Phase<img alt="" src="https://cdn-images-1.medium.com/max/802/1*QRZrPkMeB-Mgcqxcjb2dVQ.png">Credit: Phase</p>
<h4><a href="http://createwithflow.com/">Flow</a></h4>
<p>A prototyping tool that animates differences between artboards. Offer Sketch import. Export animations into code.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vJSXgK41AXfbn1bZGylWhA.png">Credit: Flow</p>
<h4><a href="https://www.protopie.io">ProtoPie</a></h4>
<p>For anyone feeling nostalgic over <a href="http://www.pixate.com/">Pixate</a>, check out ProtoPie! It’s a prototyping tool for Mac and Windows that animation based off of an straight forward t <a href="https://www.protopie.io/learn/basics/#Intro">trigger interaction model</a>. Something unique to ProtoPie is including the use of sensors built in smartphones to create prototypes that are more complex than on-screen prototypes.</p>
<p>Offers Sketch/Adobe XD/Figma import.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ZgurcCtK561opu-R-3yx4Q.png">Credit: ProtoPie</p>
<h3>Conclusion</h3>
<p>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.</p>
<ul>
<li><a href="https://medium.com/@ngai.yt/designers-guide-to-prototyping-2017-edition-23e0cd787b8f">Designer’s Guide to Prototyping [2017 edition]</a></li>
<li><a href="https://uxdesign.cc/designers-guide-to-prototyping-2016-edition-7e7893febd57">Designer’s Guide to Prototyping [2016 edition]</a></li>
</ul>
<p>—</p>
<h4>Thanks for reading! Feel free to check out <a href="http://dribbble.com/joannan">my design work </a>or new UX handbook, <a href="https://www.amazon.com/dp/B01IECEMYU">available on Amazon</a>.</h4>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=6e634392c77a" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/designers-guide-to-prototyping-2018-edition-6e634392c77a">Designer’s Guide to Prototyping [2018 edition]</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Designer’s Guide to Prototyping [2018 edition]

A guide to the landscape of prototyping in 2018

Top Stories