HomeNewsDesigner’s Guide to Prototyping [2017 edition]

Designer’s Guide to Prototyping [2017 edition]

uxdesign.cc – User Experience Design — Medium | Joanna Ngai Credit: Flinto

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.)

Figma

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.

What’s New

Principle

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.

Principle 3

JustinMind

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.

Design-development collaboration in Justinmind’s new release

Adobe XD

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.

XD Team Insights: July 2017 | Creative Cloud blog by Adobe

Balsamiq

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.

[Release] 3 New Mobile Controls, and more! | The Balsamiq Blog

Webflow

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.

Webflow Interactions 2.0 | Join the beta

Framer

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.

Flinto

Credit: Flinto

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.

Flinto

stat?event=post.clientViewed&referrerSou


Designer’s Guide to Prototyping [2017 edition] was originally published in uxdesign.cc on Medium, where people are continuing the conversation by highlighting and responding to this story.

Featured articles on Prototypr: