This week I’m covering a tool for a specific type of communication that’s a frequent necessity. And often, painful. So let’s get to it: Design to developer handoff.
In an ideal process, a developer would have a nicely packaged component library to grab elements which designers defined by name in their latest design or feature. Not much more would need to be communicated, because you have a nicely thought-out, scalable system with defined and named patterns. Perhaps even a sprinkling of a new animation this time around would be added to the library and noted.
Reality and Missing Steps
When I was asking around on what tools others use to hand off specs to their developers, many met my question with virtual eye rolls and told me they use a pattern library “as you should”. Well guess what? A library for software interfaces are always changing. And what if you are working on making one right now?
How do you get the specs to make these pieces in the first place? And regularly, how do you pass off new bits as new patterns emerge?
As you lay foundations for design systems, something needs to be in place to pass off intention. To build the system in the first place; complete or not. Further, it’s pretty rare to pass of a fully designed system that is “done”. I would say when redesigning a website for a brand, it is probably possible to cover most bases with a soul content plan. But for working in an agile software development environment, it’s not.
There will always be a need to communicate specifics about designs or elements, whether you’re manually noting documents or prototyping with code. And I don’t know about you, but I’ve spent countless hours of my career using different tools to spec out designs. Many times, this was done manually noting groups of styles or dimensions.
I realize that this is where coding prototypes come in. Designing in the browser and whatnot. But for this post I’m going to treat that like an additional part of the process because teams vary so greatly.
Thankfully, there are finally some better tools to help out with this. One of the helpful suggestions I received when I asked around was Zeplin. It’s an additional tool in my workflow. But it’s worth the extra step (exporting an artboard from Sketch) because of how neatly it packages resources, dimensions and style information.
In Context
Rather than a list or information that’s off to the side somewhere, Zeplin allows the user to explore a design themselves to discover the specifications they are looking for. There aren’t notes that get in the way, and interactions help to reveal certain aspects. The sidebar provides more information on a selected element, including a custom-generated css class and properties. I think this freedom allows the developer some thinking room as to how they want to build the system as a whole as they explore.
Style Guide
Zeplin supports some subtle cues that give you control over naming colors and type styles. This is then generated with Zeplin’s style guide feature. It’s a nice little packaged guide away from the design itself which includes a color palette, css, and font book. I think this part has a lot of room for improvement, but since it requires no effort to make it’s a simple and useful tool.
Resources
The one thing I love about Zeplin is that it gives you just enough control. For example, you can define export settings of each image, but you don’t actually have to save out each file somewhere only to be moved and re-named elsewhere. You define what elements should included in the file, what type of file you want it to be available in, and the developer is in charge of exporting it when they need it. If you don’t set it up for exporting, the developer can understand it’s not ready or use the style information to build it.
Communication
Tools shouldn’t replace team discussion and collaboration. It should be said that you only get the most out of a tool like this when you spend time agreeing on the best way to use it for your team. Make sure principles you share are clear. For example: Are you supporting responsive design? If so, how should the width dimensions be translated? Also things like when to use SVG vs Bitmap images, since the designer will no longer be the exporter.
Other tools try to do this (Inspect for Invision looks hopeful) but I haven’t found one that was so simple to get started using. One thing that I would like to see Zeplin implement is a better way to share a project among a team without having to invite each user via email. But they seem to be pretty great at frequent updates, and have a very active Facebook group.