<p>Published on <a href="https://blog.prototypr.io/2018-list-of-interface-prototyping-tools-7f1472dfcfbe?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> David M. Utt </p>
<h4>From basic interface tools to deep interactions</h4>
<p>With the new year, the continual expansion of the design industry has lead to a growth of design tools available. This last year new tools have become available leaving beta and entering the hands of creators. This list is meant to be a guide and reference for design teams to help explain what tools are available and what context is optimal for using them.</p>
<p>This story is split into two sections user interface design tools and interaction design tools. As the name states the former is a list of design tools to create static interfaces for a variety of screen types. The later is a list of interaction design tools for creating animated prototypes with varying levels of fidelity.</p>
<h3>User Interface Design Tools</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/736/1*vBXy_X8RKUJ1DoMuO3IrkQ.jpeg">Sketch Version 48.2 User Interface</p>
<p><a href="https://www.sketchapp.com/"><strong>Sketch</strong></a><strong> </strong>is a vector based design system and the current industry standard for digital designers to build interfaces. Sketch has a simple design system, when viewed as a standalone product. However, what makes it unique is its vast collection of plugins. These plugins, such as Craft, significantly boost the productivity, decreasing the production time of designers and developers. Due to the framework, it is only available for Mac. As such it is hard to integrate in large enterprises without significant overhaul. In addition, while it is the mainstay in the industry, much of the code has become bloated leading to slowdowns in larger projects as a common problem.</p>
<h4>Pros</h4>
<ul>
<li>Current industry standard for design teams</li>
<li>Vast collection of plugins to tailor workflow</li>
<li>Connected to various prototype applications through plugins</li>
</ul>
<h4>Cons</h4>
<ul>
<li>Only available on Mac</li>
<li>Limited as standalone product</li>
<li>Sketch overtime, has become bloated (prone to slowdowns and crashes)</li>
</ul>
<p><em>For Mac — Price: $99/year for single licence use (company licencing available)</em></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KdvsDonkkVC9LZIJuZ2ZlA.png">Figma Browser based interface</p>
<p><a href="https://www.figma.com/">Figma</a> is a browser-based alternative to Sketch, developed by Google. Similar to Sketch in many respects as a vector based UI tool. Figma’s stands out in it’s collaboration. This key feature allowing for real-time sharing, editing, and work, all on the same document. This ensures that everyone involved sees the same state of design, prevents unintended overwrites. While still early the software receives continual updates adding features such as prototyping capabilities and developer support. It is missing some core aspects (plugins and enterprise purchases). Hopefully, with continued support these will be added in the coming year to build on a strong foundation.</p>
<p><a href="https://www.smashingmagazine.com/2017/03/sketch-figma-showdown/">Additional Reading Here</a></p>
<h4>Pro</h4>
<ul>
<li>Browser based for collaboration and easy sharing</li>
<li>Generated markup code</li>
<li>Collaborates with Sketch file formats</li>
<li>Responsive design capabilities</li>
</ul>
<h4>Cons</h4>
<ul>
<li>Limited file support (comparatively to Sketch and XD)</li>
<li>No plugin support</li>
<li>No option to integrate real data</li>
</ul>
<p><em>For Mac and Windows — Price: $12/month with Enterprise option coming soon</em></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-eF8a-ojaDgKNaHF7daYHw.png">Adobe XD User Interface</p>
<p><a href="http://www.adobe.com/products/xd.html"><strong>Adobe XD</strong></a>, released in 2016, is the spin-off of the earlier prototyping tool, Adobe Edge, back in 2012. XD is a vector based drawing app (like the previous options) allow quick creation of interfaces and click-through prototypes in-app. Adobe, over the last year, has greatly improved the app allowing for greater connectivity through Adobe’s other services and exporting options (for developer collaboration early on in the process). XD is available for both Windows and Mac as part of their suite of applications.</p>
<h4>Pros</h4>
<ul>
<li>Light, Fast, and adaptable user interface</li>
<li>Connects with various Adobe applications</li>
<li>Collaborates with Sketch file formats</li>
<li>Code export options available for developers</li>
</ul>
<h4>Cons</h4>
<ul>
<li>Bundled price point (with Adobe CC)</li>
<li>No plugin support</li>
</ul>
<p><em>For Mac and Windows (10 and above)— Price: Available with Adobe CC</em></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*L3T39Srualx6FIjqBiMyPw.png">Axure RP 7 User Interface</p>
<p><a href="https://www.axure.com/">Axure </a>RP 8 is a combination wire-framing and prototyping tool like Adobe XD, and Figma. Currently it is used primarily among large enterprise groups for deep application development. It can be utilized to build quality sitemaps, user-flows, screens designs, even click-through wire-frames in one file. This is at the cost of a significant learning curve, so on-boarding and rapid prototyping can be difficult to those unfamiliar to the program. It is available for both Mac and Windows. It is adaptable to the large community and offers incredible library options that cover Android, Web, iOS and responsive sises. It does offer collaborative feedback, but only on Pro.</p>
<h4>Pros</h4>
<ul>
<li>Most comprehensive of all UI tools (in terms of functionality)</li>
<li>Familiar with large enterprise workflow</li>
</ul>
<h4>Cons</h4>
<ul>
<li>Steep learning curve</li>
<li>Not mobile user-friendly</li>
<li>Time to design is time-consuming</li>
</ul>
<p><em>For Mac and Windows — Price: Enterprise option $99 per user per month</em></p>
<h3>Interaction Design Tools</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*MPYHTaF489u6VDBO7Nuh-Q.gif"><a href="https://dribbble.com/shots/4097808-Initial-Wireframe">https://dribbble.com/shots/4097808-Initial-Wireframe</a></p>
<h4>Low Fidelity — <strong>Quick, Mobile and Screen based</strong></h4>
<p>Perfect for rapid prototyping and testing out layouts and designs, low fidelity prototypes are the shareable versions of whiteboard sketches and wire-frames. While quick to produce and put into people’s hands they are limited in functionality to only show tap though designs and possible gestural interactions. — Here are a list of applications that are good for these use cases:</p>
<ul>
<li><a href="http://www.adobe.com/products/xd.html">Adobe XD</a></li>
<li><a href="https://www.axure.com/">Axure</a></li>
<li><a href="https://balsamiq.com/">Balsamiq</a></li>
<li><a href="https://www.figma.com/">Figma</a></li>
<li><a href="https://www.invisionapp.com/">Invision</a></li>
<li>Keynote/Power point</li>
<li><a href="https://marvelapp.com/">Marvel</a></li>
<li><a href="https://proto.io/">Proto.io</a></li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*g8c_zeOn8Wlu54xT-1ySGw.gif"><a href="https://dribbble.com/shots/3880642-Dropbox-Plans">https://dribbble.com/shots/3880642-Dropbox-Plans</a></p>
<h4>Mid-Fidelity —Responsive Experiences</h4>
<p>Why must we prototype responsiveness? Sometimes a design system needs to be scaled for multiple products. In addition, being able to demonstrate how a design language can evolve through multiple systems and years of iteration can demonstrate market viability to business owners. — These applications are available to help show this functionality:</p>
<ul>
<li><a href="https://www.axure.com">Axure</a> (Adaptive Responsive)</li>
<li><a href="https://www.figma.com/">Figma</a></li>
<li>Raw HTML/CSS/JS (true responsiveness)</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/1*Ju2VZtWW_Jy4POtM8087Hg.gif"><a href="https://dribbble.com/shots/2428762-Cut-Copy-Share-Delete">https://dribbble.com/shots/2428762-Cut-Copy-Share-Delete</a></p>
<h4>Mid Fidelity — Micro Interactions and Unique Features</h4>
<p>Prototyping a single animation can be a lot of fun for both the maker and user as well as provide ton of value in these little nuances, <em>even when it is invisible to the user. </em>The overall experience can feel more pleasant and fluid, as well as demonstrating a particular feel or emotional response you want to garner from your design. When a system has a unique or key feature to be demonstrated building a micro interaction demo can save time comparable to high fidelity prototypes.— Many applications are available to demonstrate this here are a few:</p>
<ul>
<li><a href="http://www.adobe.com/products/aftereffects.html">Adobe After Effects</a></li>
<li><a href="https://atomic.io/">Atomic</a></li>
<li><a href="https://www.protopie.io/%5C">Proto Pie</a></li>
<li>Raw HTML/CSS/JS</li>
<li><a href="https://www.flinto.com/">Flinto</a></li>
<li>Xcode</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8Ck-hBj7oPgWtB8Ib3N9WQ.png"><a href="https://dribbble.com/shots/871796-Telly-Android-Holo-Assets/attachments/93516">https://dribbble.com/shots/871796-Telly-Android-Holo-Assets/attachments/93516</a></p>
<h4>High Fidelity — Project Entirety and Authentic Experiences</h4>
<p>Used in final presentations for directors teams or getting systems ready for development. Having a fully usable experience available and showing screen navigation with code references available, can significantly improve hand-offs with development and limit the need for last minute changes to showthe authentic desired experience. — In these use cases here are some applications which can be used.</p>
<p>Mobile &amp; Tablet</p>
<ul>
<li><a href="https://proto.io/">Proto.io</a></li>
<li><a href="https://www.flinto.com/">Flinto</a></li>
<li><a href="https://www.axure.com/">Axure</a></li>
<li><a href="https://atomic.io/">Atomic</a></li>
</ul>
<p>Desktop</p>
<ul>
<li><a href="https://www.axure.com/">Axure</a></li>
<li>Raw HTML/CSS/JS</li>
<li><a href="https://www.flinto.com/">Flinto</a></li>
</ul>
<p>These are all references and lists to pull from being both project dependent, team preferential and far from the only options out there (Pen and Paper). Though I believe having a current list of options and understanding the context and capabilities of each one will allow for effective testing and development helping to avoid the occasional miss step. Initial tool list came from <a href="https://www.cooper.com/prototyping-tools">https://www.cooper.com/prototyping-tools</a>? along with personal experience.</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=7f1472dfcfbe" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/2018-list-of-interface-prototyping-tools-7f1472dfcfbe">2018 list of Interface Prototyping Tools</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>


2018 list of Interface Prototyping Tools

From basic interface tools to deep interactions

Top Stories