Follow-up on “What Could Be Added to Photoshop & Sketch for App UI Design?”

Lots of progress has been made, but there’s still room for improvement. We just may need to be happy with having several tools in our UI toolbox, as having just one that does it all is still a long way off.

It’s been two years since I wrote “What Could Be Added to Photoshop & Sketch for App UI Design” in which I outlined four UI design tasks I wanted to see supported by these two popular UI design tools. Here’s an update on each tool’s progress. It’s exciting what a difference two years can and has made.

Designing for Multiple Screen Sizes & Orientations (Responsive Design)

I’m happy to report that considerable progress has been made towards supporting design for multiple screen sizes and orientations in Sketch, both natively and via 3rd-party plugins.

Natively, Sketch has implemented four Smart Resizing tools that enable you to specify the behavior of individual layers within a symbol or group when a parent symbol or group is resized. This approach still requires manually creating multiple artboards at the desired responsive breakpoint sizes and orientations, but greatly reduces the amount of resizing and repositioning of individual elements and symbols at each of those breakpoints.

On the 3rd-party plugin front, Anima’s Auto-Layout plugin for Sketch holds great promise as a responsive design tool via extensive layer behavior controls combined with auto-resizing and auto-rotation of artboards. Although still a work-in-progress, it’s already a powerful tool with new features and refinements being added on a weekly basis.

Unfortunately, Adobe is still playing catchup on other fronts and has made no observable progress in providing designers with a responsive design tool. Adobe’s XD is a promising design tool with its integrated screen-to-screen prototyping and grid layout tools, but still leaves designers manually creating separate artboards for each screen size breakpoint.

And I should also mention an ambitous and funded Kickstarter project, Subform. It’s a CAD-inspired design tool focused on the unique constraints of UX/UI design. Its roadmap includes responsive layouts, consistent styles, stateful components, and real content — all inside of a familiar, desktop-based visual design environment.

Designing UI Transitions & Animations (Prototyping)

Adobe has jumped ahead of Sketch in the area of integrated prototyping via its new Adobe XD design tool. Its built-in Prototype mode makes it easy and quick to switch between traditional visual designing and interactive designing. But it’s limited to prototyping screen-to-screen transitions — no micro-interactions yet. So for now you’ll still need to switch to a 3rd-party prototyping tool such as Framer, Flinto for Mac, Principle or Origami Studio to design and communicate micro-interactions.

Integrated screen-to-screen prototyping is not quite there for Sketch yet. InVision has been beta-testing a solution via its Craft plugin suite, but appears to have hit some snags as the private beta continues to drag on.

In the meantime, more powerful prototyping tools that can also be used to design micro-interactions, such as Framer, Flinto for Mac, Principle and Origami Studio, continue to improve their feature set and integration with Sketch and/or Photoshop.

Framer does a great job of importing assets from Sketch or Photoshop, making for a strong back-and-forth workflow between the tools. Framer has also recently introduced its Flows module that can be used to quickly build a screen-to-screen prototype with pinned headers & footers, making it a strong choice for a full-range of prototyping needs.

Flinto for Mac, a more powerful sibling of the original Flinto Lite web-based screen-to-screen prototyping tool, is equally adept at designing micro-interactions and end-to-end app prototypes without any programming or timelines. It also supports importing from Sketch for an easy-to-use design-to-prototyping workflow.

Principle is a timeline-based prototyping tool that excels at micro-interactions, but can get a little cumbersome for end-to-end app prototyping. And its new Components feature has made this solid tool easier to use.

Origami Studio from the design team at Facebook is cut from a different piece of cloth, interface wise, but once mastered is a powerful and flexible tool for designing complex animations and interactions.

Preparing Build Specifications (Handoff)

Well, neither Sketch or Adobe have integrated a build specifications feature into their product, but a number of robust 3rd-party tools have been released to facilitate the handoff of a UI design from designer to developer. For visual aspects of a design including typography, colors, sizes and layout, tools such as Zeplin, Sympli and Inspect do a great job. Just sync your Sketch or Photoshop file using a plugin, and your designs appear in your tool of choice in full detail.

Designing & Prototyping with Real Data/Content

I totally missed this UI design activity in my initial article, but thankfully many bright minds out there didn’t. The days of lorem ipsum are over thanks to Invision’s Craft plugin for Sketch and extensions for Photoshop, which make it easy to pull real or representative content into designs in either design tool. Prototyping tools like Framer and Origami also make it possible to design interactions using real data.

Still Missing in Action — Designing App/Experience Flows

With the exception of a couple of Sketch plugins with very limited functionality, there really isn’t a tool out there yet, inside or outside Sketch and Photoshop, that makes it easier to design, communicate and document the relationships, logic and flow between individual screens or views within an app. Some may respond that a screen-to-screen prototype can do that, but experiencing an app’s flow through a set of animated screens does not explain the full story. First, it can be prohibitively time-consuming to include in a prototype, all the potential paths and states that users may encounter when using an app. Second, it really isn’t possible to annotate a prototype with the logic, behind-the-scenes actions, and alternate states that a developer needs to know about to build the app.

Note the different kinds of information that can be quickly communicated to the development team via this format.

I, for one, will keep wishing for a flow diagramming tool that is optimized for the needs of UX/UI design. Imagine a plugin for Sketch that would enable you to construct and then copiously annotate separate flow pages using symbols for the artboards you’ve already built. Updating an artboard would automatically update that screen in the flow. (Of course, one could do this now manually using artboard symbols, but the annotating process would still be very laborious.) Not to mention having the ability to create a responsive diagram that could easily switch between different devices and include/exclude annotations based on the current device.

If you’re a talented Sketch developer and interested in helping me build a ground-breaking tool for designing and specifying app flows and experiences, please drop me a note. Until next time.