The Evolution of Product Design Tools

“We become what we behold. We shape our tools, and thereafter our tools shape us.” ― Marshall McLuhan

After years of working in Photoshop and Illustrator, it can be daunting for product designers to switch tools. Old files are in old formats, learning curves can be steep for designers and even steeper for developers, and the future of the industry always seems subject to trends that might not last. With that said, at Yelp we’ve found that using the best tools the industry has to offer pays off. Workflows become simpler, and the barriers between our ideas and the screens we put them onto begin to dissolve. Today, we have a system that uses Sketch, InVision, and Principle as the main support struts for our design process. Before looking at how we got there, let’s first look broadly at the way product designers have worked for the better part of two decades.

The Old Guard

Photoshop and Illustrator got us pretty far in the product design world for a long, long time. They both had (and still have) advantages and disadvantages, but they shared one major drawback: neither one was intended for use as a product design tool. Illustrator was designed to be a tool for illustrators and graphic designers, while Photoshop was created for editing and manipulating photos. They were both so flexible (and feature-heavy) that UI designers managed without a dedicated tool for a long time. But with the advent of product design as a broader discipline, new tools are needed to address unique needs like responsiveness, batch exporting, and easy iteration. Enter Sketch: a tool purpose-built for product design.

Sketch: Built for Product Design

The design team at Yelp started using Sketch exclusively just over a year ago, and we’ve seen a lot of benefits resulting from the change. Sketch is a relatively new tool built from the ground up with scalable symbols, shared styles, streamlined exporting options, the ability to have multiple pages in one file, and many other features that make product designers’ lives easier. Sketch offers a lot of options at a base level, but on top of its core feature set, Sketch also makes it very easy to add and take advantage of third-party plugins. These plugins boost Sketch from a good tool to a truly great tool. With plugins you can do things like share symbol libraries between teams, check to see if your designs meet accessibility standards for contrast, and pretty much anything else you can think of. Seriously, check out Sketch’s own list of great community-made plugins right now, because the possibilities are growing more and more endless every day.

As amazing as Sketch and its community are, its deliberate laser-like focus means it doesn’t meet every need we have as product designers, and understandably so. To fill in some of the gaps, we use InVision to share mocks amongst ourselves, various stakeholder groups, and project managers. We also use Principle, a Mac-exclusive tool, to prototype and solve more complicated interaction design problems.

InVision: Easily Share Mocks and Get Feedback

InVision is a great online tool that allows you to upload mockups to an easily accessible online repository. There, people can provide feedback with the added context of seeing previous iterations of your designs. This helps us a lot because we can easily keep stakeholders in the loop about the design process, get feedback at every stage, and version-control our designs. Thanks to InVision’s robust Craft plugin, uploading mockups from Sketch (or Photoshop) to InVision is as simple as making a project in InVision and linking it to your Sketch document via Craft. Syncing screens every time thereafter takes a single button press. InVision also has simple prototyping and even design development tools, but we prefer to use it mostly as a venue for feedback. When it comes to prototyping, there’s a lot of apps for that, but we’ve honed in on Principle.

Principle: Prototyping Made Easy

Principle is an elegantly simple prototyping tool that is especially well suited to movement and interaction. It looks and feels so similar to Sketch that most people who are familiar with Sketch can pick it up in under a day and start seeing results. If you’ve struggled with more complicated prototyping tools, Principle is worth trying out. Their team’s simple tutorials are a great starting point, and will give you an idea of just how easy it is to use. I also recommend checking out Principle Repo, which features a bunch of free example files you can download to see how others have built things. I see a lot of promise in Principle’s ability to foster collaboration and streamline workflows, and this is due in part to a recently added feature called components. Components are little bits of a prototype grouped together that can be easily copy-pasted between files. At Yelp, Principle has already helped us solve interaction problems, drive user tests, and foster excitement around new proposed features across teams and platforms, and we’re really excited to see how the tool continues to grow.

Up-and-Coming Tools

So, we’ve settled into a balanced workflow that incorporates Sketch for designing swiftly, InVision for sharing and gathering feedback, and Principle for prototyping interaction. Where does this established system leave us in terms of continuing to adopt new tools? It feels to me like we are at a bit of a crossroads. Our process has improved considerably from the days of emailing PSD files, but as designers, we’re always looking at the next iteration. Here are few up-and-coming solutions I think are worth mentioning.

First up: a tool called Figma that lives in the cloud and allows you to design on any machine with a web browser. It boasts real time collaboration between designers, built-in commenting, and a host of other really awesome features. It feels and behaves a good deal differently than any other design tool I’ve ever used and is definitely an interesting piece of software made by really talented individuals.

Another new tool on the horizon is Adobe Experience Design (or Xd in Adobe-speak). Experience Design — which is currently in beta — feels a lot like Sketch, but also feels very familiar if you are used to using Adobe products. It is lightweight and has some really amazing features like built-in simple prototyping and a nice commenting and mock sharing system similar to InVision. They’ve also figured out some awesome workflow improvements like a grid tool that lets you create repetitive interface elements and fill them with dummy data in seconds. Though I won’t be switching anytime soon, I’ll definitely be watching this tool closely, especially once it leaves beta.

Finally, I am by no means ruling out the continued prevalence of Sketch in the future of design tools. Sketch recently updated their file format, breaking some of my plugins temporarily, but with good reason. Sketch now has an open file format, meaning third party developers will be able to do much more powerful things with Sketch files, while also not compromising the experience for users who don’t want extra bells-and-whistles. The new Sketch files are basically easy-to-parse JSON files which can be edited by anyone with a good idea and the means to extend Sketch functionality. This is a very promising nod towards Sketch’s commitment to community features and the future of Sketch in an increasingly competitive product design tools market.

The Future of Product Design Tools

I hope this quick look at how Yelp approaches choosing design software helps you in adapting your own workflow! The importance of finding a better tool lies in acknowledging how much our tools can affect us, both positively and negatively. One thing I love about the tech and design communities is a shared intrinsic desire to constantly improve upon old ideas. One needn’t look any further than all the plugins created for Sketch, Photoshop, or any extendable piece of software to see where we should be taking our tools next. The teams making these tools are always listening and seeking out feedback from their communities, and that’s exactly why we’ll never have one tool to rule them all. Just remember: the best tools are the ones that feel like there are no barriers between you and your intentions. With that in mind, go forth, and happy designing!

Update: If you’d like to see what tools are out there and see how they stack up check out Uxtools.co a great purpose built website just for comparisons!