Published on | Prototyping: From UX to Front End — Medium Robyn Hwang

UX Designer Workflow — Early 2017

It’s an exciting time to be a UX designer, especially if you like playing with shiny new tools every other week.

This review is partly for me to keep track of the state of design tools, and partly to see if others out there are taking similar or better approaches. I love efficiency — have you heard the advice to hire a lazy person to do a task, because they’ll figure out a quicker way to do it? That’s me, and it might be you too.

2016 Tool Stack

UI design

Photoshop, with Illustrator for vector work.

Motion design

After Effects (which I personally did not use due to the learning curve; this was covered by my teammates).

Prototyping

InVision for clickable prototypes.

Design systems

Adobe CC Cloud to create shared libraries. Unfortunately, I was never quite confident enough in their capabilities to fully commit to it. The organization functions were also pretty limited (no sections — I had to organize by prefixing the name of each element we uploaded). Each project required its own library, so this became a big pain point.

Specs

Photoshop plugins like Specctr, which were sometimes finicky and required lots of manual work — i.e. days spent on speccing out even relatively simple projects.

2017 Tool Stack

UI design

I started experimenting with Sketch at a good time — nesting symbols were introduced soon after, which had a huge impact in the way I treated UI elements. I remember barely using Photoshop’s Smart Objects because they were so cumbersome (for example, they open new tabs for each one — no way to see them all at once). Lots of people have written about how Sketch has improved their workflow, so I won’t go into it.

I still use Illustrator for some vector work or just to open existing vector files — can’t beat that yet.

Motion design

Principle was approachable enough for me to learn how to do basic motion design. It’s designed for modern UI metaphors and interactions, so it makes those easy to do.

Prototyping

Still InVision, but with the benefit of using their Craft plugin. (The plugin is available for Photoshop too, but I feel much more comfortable using it in Sketch.) What that means is I can sync Sketch artboards directly to the InVision prototypes. This eliminates the extra steps of exporting whatever artboards I made tiny changes to, opening InVision in the browser, dragging over the png files, waiting for them to upload, etc.

It’s surprising how much of a difference this can make on bigger projects. Psychologically, it feels freeing to be able to create more and more screens and never worry about creating bloat and extra work.

Design systems

I tried InVision’s Craft plugin for a while, but it felt a bit precarious. You could create a library, but it had to be saved as a local file that was then shared and synced on your teammates’ machines. Basically, you needed a Dropbox or Box Sync account in order to make it work. Then, after a recent Sketch update, it stopped working altogether. (Though they’ve fixed it since then, I believe.)

I came across Brand.ai while researching alternatives, and it’s been great — it gets updated regularly, and setup is very easy. You install it and then jump right into creating libraries (with detailed version histories!). I would still like more library organization tools so as not to have a long list of elements to scroll through every time, but it’s still the best plugin for a truly collaborative design system that I’ve tried.

Specs

This is like night and day. What used to take days now takes 5 minutes, thanks to (up-to-date!) plugins like Sketch Measure and Zeplin.

What I’m excited about

I’m very excited about the trend towards bringing design closer to modern tech development practices. The tools are now specifically made for apps and websites, for touchscreens as well as for look-only-screens. They borrow essential practices like modules (so you don’t repeat the same work), version control (so you can make notches in your progress and roll back if necessary), and merging branches (so you can work with a team and not step all over each other). I think we need to push our tools further in this direction.

I’m super excited to see new tools like Subform and Figma come to life. I was skeptical about Figma because designing in the browser with other cooks in the kitchen sounds like a nightmare at first brush — but after wrestling with maintaining consistent design systems, deleting swaths of symbols, reorganizing symbols, and countless back-and-forths, being on literally the same page as my teammates sounds like an awesome idea.

You’d never have to worry about competing designs, because you would just use the same exact element. The same exact one, not a copy that’s been uploaded and synced with cloud magic and downloaded into a different machine where others can mess with it without you knowing right away. It’s more like Google Docs than Dropbox, if that makes sense.

The human element, where you’re afraid a nefarious stakeholder is going to interfere with your designs, is something we have to deal with anyway. The solution? Just don’t give them access to your working designs.

And Subform is bringing us closer to the pie-in-the-sky ideal of coding without coding. All the freedom of designing visually and experimentally, paired with all the constraints and consistency that’s become paramount (and yet so difficult to maintain) in modern tech. Sign me up.

Dear Sketch, for Christmas I would like…

Interactive prototyping. Principle already seems partway there, since it can import Sketch files directly while preserving their layers, and is a Mac-only program…coughmergercough. But not just motion design — I’m talking about InVision-type prototyping capabilities. That would be a truly all-in-one super program.
Symbols that require unique names. Thus, no more duplicates when you copy and paste an artboard from one Sketch file into another.
Sync Symbols across different files, in the cloud, in real time, with multiple machines. Or just buy Brand.ai and have them do it? We need a sane way to manage our design systems.
Improved Mirror app. It’s pretty basic right now, but would be very useful to sync to a variety of test devices.
Continued support for the healthy plugin ecosystem. Along with the others I’ve mentioned, Auto Layout by Anima App is also friggin awesome.
More filters for layers, like Photoshop’s, so you can see which are invisible, locked, broken, etc.
Select a Symbol and see where it is being used throughout your entire document. However, this is mostly useful now because Symbols management is kind of messy and you have to delete instances manually. Hopefully this won’t even be needed in the future.

What I predict will happen in the UX tool world

Continued problems with cross-compatibility

This is already a problem, and was a bit of an obstacle to trying Sketch in the first place. We do have to work with other people, often in different locations, not just by ourselves in dark rooms. So having a file that everyone can open can be useful. But Sketch Measure does a great job with providing specs in the browser, so developer handoff has so far not been a problem.

The bigger problem is compatibility between the things that go into a Sketch file, like EPS and SVG. I’ve seen these files opened in Sketch and Illustrator look different from each other, and I’m not sure why. I’m not sure how much Sketch wants to replace Illustrator for visual design, but fixing this type of issue would certainly help.

With more tools coming out, it’s not clear what form their outputs will take. It needs to be easy to import existing files into them, and export the files into widely accessible formats. But perhaps they’ve already got it all figured out and I’m worrying about nothing.

A more fragmented but competitive landscape

The flip side of a flourishing, interdependent network of tools is that if one major player goes down, the rest of it can be in danger, too. The thought of what would happen if Sketch stopped supporting its plugins, or if people stopped developing crazy useful plugins is… quite scary. There are a half dozen plugins that I consider to be fairly critical to maintaining my workflow.

Bohemian Coding (the creator of Sketch) has thus far seems to prefer working independently as a small team, and they’ve released a consistent stream of updates that make me think it’s working pretty well (especially compared to Adobe XD, which is inching along at a snail’s pace). Bohemian Coding also changed the Sketch payment model to a subscription that renews every year, which seems to show that they wanted a more sustainable business model. Judging from the slight grumble and then silence on this change (at least from what I’ve seen), I think designers and their companies will continue to pay up for the value that Sketch offers.

So, that’s good news in terms of the ecosystem’s stability and consistent improvements to the software. But the advent of exciting new tools (which know they need to allow users to easily convert their Sketch files to get traction) could convince users to split their attention.

The jump to unicorn status gets smaller and more valuable

The more time I spend designing and watching design tools progress, the more I want to learn about the development side of things. The tools are bringing design and development closer together anyway, and it would only benefit me to know more about the technical stuff — so personally, the tools motivate me in this direction.

I do think it will still be just as difficult to be fully proficient in both designing and front-end development. But designers will have to become more fluent in development practices because our tools will be closer to development practices. We won’t have a thick layer of abstractions between design and code as an excuse for not designing for code.

All in all, exciting times for the world of design.

UX Designer Workflow — Early 2017 was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

UX Designer Workflow — Early 2017

Cool stuff, every week

More Articles