Delivering Design Specifications to Developers with Sketch & Jira
As a UX designer I love the moments in which one of my product prototype designs turns into the first beta version. Developers take my prototype design, add functionality and make the user interface design actually come to life for the first time.
Sometimes however, the beta version doesn't look exactly the way I designed it. On the one hand, our developers often have really good ideas that enrich the design. On the other hand many design details also get lost or changed during the development phase.
So I started thinking about how this process could be improved. How could we make it easier for designers such as myself to handover design specifications? Was there a possibility that would allow developers to easily access every detail of a design? Of course, one could always use another tool – such as Inspect by InVision or zeplin.io – but we all already have such a rich tool stack. I thought it would be better to try to avoid this. So I examined how and with which tools our developers work every day.
That is how I came up with the idea of integrating design specifications into our existing processes by using Jira tickets. Our last hackathon gave Daria, Jens and me the chance to develop an add-on that would accomplish this. We were able to develop Inspector Sketch, an add-on that lets you Integrate Sketch design specifications directly into a Jira ticket. Now, all the design specifications our developers need are in one place. As it turned out, Inspector Sketch made it easier for us to work together and I thought that if it helps us, perhaps it will also help others.
Inspector Sketch integrates seamlessly into Jira, allowing you to access design specs right from a Jira ticket.
Work Like Before, Just Better
It's already very common for UX designers to attach designs as .png or .jpg files to a Jira ticket. I also used to do this. The process just gets easier with Inspector Sketch and Sketch Measure.
All you have to do is ...
- create your awesome designs in Sketch,
- select the artboards that are relevant for a ticket,
- export the artboards with the help of the Sketch Measure Plugin (Shortcut: Shift+Ctrl+E),
- attach the index.html and the preview folder (or just the preview .PNG files) to the corresponding Jira ticket (just like any other attachment),
- when the attachments are uploaded you'll see a preview thumbnail in your ticket,
- and then click on the thumbnail to open the design specifications.
To use Inspector Sketch you will need:
- the Sketch App (by Bohemian Coding),
- the free and extremely useful Sketch Measure Plugin,
- and Inspector Sketch (also free). At the moment, Inspector Sketch is only available for Jira Cloud.