Designer’s Guide to Prototyping [2017 edition]
A guide to the landscape of prototyping in 2017.
It’s been close to a year since I’ve reviewed and assessed the state of prototyping tools. Major trends in recent updates include improving team workflows between designers and developers and improvements in overall team experience (allowing commenting, collaboration, etc.)
In addition to multi-player editing, Figma brings two major updates this time around: Prototyping and Developer Handoff. You can create simple prototypes connecting screens (think hot spots/screen linking) in addition to live collaboration. And it’s web based, which is a plus so you can work with both PC and Mac teammates.
Credit: Principle 3
Principle is a lightweight tool with an easy learning curve to create complex nuanced interactions. Principle adds improved Sketch import, the ability to send events from a component to its parent, or viceversa, ability to control color in the drivers, lockable layers and animation preview.
A design inspector built for developers: Justinmind’s developer-friendly UI, Some feature improvements include: enhanced Sketch integration, grouping elements via Master for global changes and much more.
Credit: Adobe XD
Asset Panel, which conveniently organizes all the symbols, colors and character styles in your document for quick access and reuse. Improved performance with 320 Artboards.
A simple wireframing tool with new updates that include controls that are useful for mobile interfaces mockups (and long scrolling screens) as well as font library integration.
Webflow gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you. The thing that makes me excited is there upcoming interaction updates.
Framer studio is made for the non-coder in mind. As one of Facebook’s key prototyping tools, it’s worth checking out and includes great Sketch integration.
Fastest tool I’ve encountered, allows you to quickly make interactive prototypes of their mobile, desktop, or web apps.
New updates allow you to type and edit text directly in Flinto for Mac. Editable text also comes through when importing from Sketch. The size and color of text are now animatable properties.