Issue 2 Feature  •  11 minute read

Interface design tools, evolved

As product designers today, we’ve come to expect a lot more from our tools than just pushing pixels around. We heard the warning shots fired when Sketch overtook Photoshop as the primary tool for interface design in Khoi Vinh’s 2015 survey, and Sketch’s ecosystem has since grown to make it a natural choice; given how closely it ties in with the rest of the product development workflow — namely creating prototypes, enabling handoff to development, version control and more.

Compared to the past few years, the explosion of new tools in 2016 promises to give product designers plenty of options going forward. Let’s take a brief look at each of these options and examine their value propositions vis-a-vis Sketch, the current workhorse.

All the tools that came to the fore in 2016 can be categorised into one of the following:

  • Standalone apps — Figma, Subform, Adobe Experience Design and Affinity Designer
  • In-browser site builders — Webflow
  • Ecosystem extensions — Abstract and Picnic

Figma

The big news in 2016 was Figma — nobody expected an interface design tool that was browser-based, collaborative and real-time. Dylan Field and Evan Wallace announced it in December 2015 along with $18MM in funding from Greylock, Jeff Weiner and others.

Figma’s trump card is collaboration, which is perfect given that product design is inherently an iterative and collaborative exercise. If you are a  designer working in a team, you’d typically have to get hold of the required assets for a new project, then create and upload previews of your designs to a platform like Invision to get internal feedback, plus maintain a history of changed files.

Figma users need not be fazed. Just like Google Docs, your .fig file is stored securely in the cloud. You need not worry about tracking changes. Comments can be placed virtually anywhere on an artboard. And since it is all browser-based, you can access your files on a Mac or PC via a simple URL.

Since version 1.0 was publicly announced along with macOS and Windows apps, Figma has received a ton of praise. But it is not perfect by any means. Questions remain unanswered about other aspects of the design process like prototyping, animation and developer handoff. Pricing is also a concern, and it seems like it will most likely go with a monthly subscription model. Users have also reported that offline usage tends to lag, and performance in general suffers on a slow network connection.

But given these are very early days, the future looks promising. For those interested, Meng To has written a handy comparison of Figma and Sketch.

Adobe Experience Design

Built to enable “design at the speed of thought”, Adobe Experience Design (XD) comes across as a combination of a raster and vector graphics tool, with the basic prototyping and collaborative abilities of Invision.

Formerly Project Comet, the app is currently in beta and is available as a free download for both Windows and macOS. Like Figma, Adobe also believes collaboration is an important part of the modern design workflow, so XD makes it possible for multiple stakeholders to participate in real-time — senior designers and clients provide feedback and signoff via comments, developers can also get specs right from the app itself. Plus designers can create video recordings of prototypes or share a link to an interactive prototype hosted on Creative Cloud. While Sketch relies on third-party support for prototyping, XD lets designers define flows, triggers and transitions within the app itself. Plus, XD is part of the Creative Cloud, so designers can expect it to work well with other CC apps like Illustrator and Photoshop. 

There’s new leadership now at Adobe, new faces (including Khoi Vinh, who is currently Principal Designer), and hopefully a new approach to building products. XD is work in progress, and Adobe has an impressive vision of how they want XD to mature.

Adobe has been indecisive in the past with many promising projects like Fireworks and the Edge suite, and given the Beta tag that XD currently sports, it is not surprising some are a little sceptical. But for the 500,000 designers reportedly using XD at the moment, Adobe is busy pushing updates on a monthly basis; with a mix of new features, enhancements to existing features and bug fixes.

Affinity Designer

Affinity Designer has quickly built a formidable reputation as an alternative professional graphic design app to the Adobe Suite. Having already secured the coveted Apple Design Award, and thousands of 5 star customer reviews on the Mac App Store; Affinity has now set its sights on UI and UX designers as well.

Compared to Sketch, which is marketed primarily as a UI design tool; Affinity Designer seems more like a Swiss army knife — capable of delivering for both print and screen, across a variety of disciplines like branding, icon design and illustration, and most recently, UI design too. So startups with growing design teams that find the Adobe suite a little expensive now have an alternate. Designer costs just $49.99 one-time.

As such, a few advantages of its multidisciplinary nature quickly become apparent. For starters, you get the now customary Symbols feature just like Sketch does, but also a Constraints feature that allows designers to specify how the interface should respond to varying viewports or similar limitations.

Advanced typography options seen in Adobe Illustrator and missing in Sketch can also be found in Affinity Designer, and this means designers can take advantage of OpenType support — ligatures, swash, titling and contextual alternate glyphs, lining and oldstyle figures, and more.

One feature lacking in Designer is some sort of handoff mechanism to developers once the design phase of the project is complete. Sketch leads the race here with excellent third-party support for Zeplin, Invision Inspect and Measure. So keep this mind before considering Designer for your next project.

Subform

The unique characteristic of Subform is that it identifies itself specifically for product design, rather than graphic design. Having been inspired by CAD and other 3D modelling tools, it will — according to its founders Ryan Lucas and Kevin Lynagh — eventually be able to fully understand the designer’s intent, which every other tool currently ignores.

Subform raised $112,651 through its Kickstarter campaign in November 2016 and is available on invite-only basis, so not much information is available at this point. It is being touted as a power tool for master product designers, as opposed to the Swiss army knife philosophy of Affinity Designer.

Let’s quickly revisit the earlier point about understanding designer intent, as it is quite intriguing. For example, Sketch cannot differentiate between a regular button and a Floating Action Button (from Material Design). But designers can get Subform to identify a FAB and position every such instance precisely 20px from the bottom right of each screen. This itself is a step ahead of anything out there at the moment.

There seems to be meticulous thought put into its core features. Its shared components seek to provide balance between consistency and contextual variation, it accounts for viewport constraints, it can save an unlimited number of states, pull in real data while designing, and much more.

Subform seems to embrace large-scale product design projects in an agile environment, where change is constant and any available time be spent on design and maintaining consistency, rather than fighting your tools. This is definitely one tool to keep an eye on.

Webflow

Product designers who code swear by the immediate impact a functional HTML prototype has over static comps. All current UI design tools add a necessary outer layer over the actual product, letting you interact with either static images; or stringing them together and adding transitions (like Invision and other advanced tools like Framer and Atomic do). This output is still a model of the product and not the actual product.

Enter Webflow — part design tool, part CMS, part hosting platform.

For starters, designers can specify layouts using the CSS box model, flexbox or floats, then add content and style it with media, colour and typography. Webflow also provides templates similar to Virb or Squarespace for those who don’t have a lot of time. Any element on the UI can be specified as a Symbol, and can be used repeatedly via CSS-like styling hooks.

Web design tool + CMS + production environment

The second part of Webflow is a CMS that allows content editors to add content via custom fields, and then bind these fields to the layout that designers create. Webflow also provides webhooks — custom actions that are triggered when something is added, updated or deleted; if developers need to do some heavy lifting like background services.

And finally when the site is ready to be launched to the intertubes, developers can use Webflow’s integrated hosting platform to publish. Webflow relies on Fastly and AWS to deliver your site files to visitors anywhere in the world.

So whether you’re a designer, developer, client or content manager working on said site, you have a single place to sign in and do your thing. There is nothing stopping you from doing all of this simultaneously.

As its name suggests, Webflow is only suited for Web-based, content-centric responsive design projects. Its target audience is non-technical users (especially designers) that need to have a site up without learning code. The design community has been crying out for a Web-based design tool for years, and Webflow doesn’t just embrace the fluidity and constraints of the Web — it is built on top of it. It already has over 250,000 users on the platform; including enterprise clients such as Groupon, Hewlett-Packard, IBM, Mastercard, Pinterest, MTV, and Hitachi.


Abstract & Picnic: Sketch hits back

Let’s not forget the reigning emperor of product design tools. Bohemian Coding understands its user base well, and its flagship product has matured nicely over the last couple of years. Sketch’s interface has become the standard, with most of its competitors choosing not to reinvent the wheel.

Having seen all the big guns the would-be competitors are bringing to the fight, 2017 could be an important year as Sketch tries to cement its place as the tool of choice. The most likely changes would be improvements to Sketch Cloud, first-party version control, even better style management and more. Sketch 42 is just out the door, with a new Export Presets feature among the usual bug fixes and stability improvements.

More importantly however, a couple of plugins from its exemplary developer community seem to be already propelling Sketch forward with gusto. Meet Abstract and Picnic

Abstract finally brings the power of Git to Sketch

Abstract was the brainchild of Frank ChimeroJosh Brewer and Kevin Smith; and today has Tim Van Damme and others onboard as well.

As of the time of writing, Abstract is in private alpha; so we can only speculate about how it would work. After making a bunch of changes to your Sketch file, you hit a key combination which calls a Mac client — similar to the kind Zeplin has — to document your changes and push it to a repo. You could also possibly create branches or anything else Git allows.

The primary advantage of Abstract is designers’ familiarity with Sketch — and continued access to all the other extensions and integrations the ecosystem provides. And Git is a battle-proven version control system. This combination seeks to eliminate ambiguity about who made changes to the document, what was changed and where the changed files can be accessed. If if you and your design team’s primary issue with Sketch has been intra-team communication and workflow, Abstract could be your balm.

Update, 03 March:  In an interview with Khoi Vinh, Abstract CEO Josh Brewer has pretty much confirmed these assumptions, and has given a lots of details behind Abstract’s magic.

Picnic is the Sketch ecosystem clearly pushing back at Figma’s multiplayer collaboration. It promises to put Sketch’s Pages panel on steroids using Dropbox or Google Drive — allowing designers to share a file with their team and all simultaneously work on it. Like Abstract, Picnic is also currently being put through its paces in private testing.

We could easily see this tag-team — Abstract and Picnic — becoming the biggest assets in the Sketch arsenal.

In conclusion

With its simple interface focussed on UI design, a performant and constantly improving product, a huge ecosystem of third-party plugins and integrations that never fails to surprise — there are so many things Sketch gets right. It is most likely to remain the industry favourite for at least another year. The competitors will not go down without a fight, though.

The uphill climb toward feature parity will eventually plateau out leaving behind an almost-homogenous bunch of tools — just look at what has happened with AWS, Azure and Google in the cloud space. At such a point, choosing between them would almost certainly be a matter of personal preference.

In the end, it is us designers who stand to benefit from all this competition. The future looks very interesting.