Improving Design to Dev Workflows: Asset Sheets

Posted on Oct 14, 2016 in Design

At its heart, working as a designer is a social job. I work with clients, users, UX specialists, developers and a collection of other designers. As a lead designer, I like to keep an eye out for how to make our processes more efficient. Sometimes it can be difficult to realize how a particular design workflow affects development. However, once I identify the problem I get excited to solve it.

I came up with this change when I was searching through an icon pack that had each icon saved out as a separate file. I got so annoyed paging through each individual icon that I created a master file for reference. That's when it hit me – I was making my developer do the exact same thing.

App design can include a lot of little icons or design elements that need to be integrated by the developer. These is a chore for them to keep organized or find months later when they need to update the app. This was particularly apparent when working on the Fluke VSA app for Android. So I decided to try out creating an asset sheet as a single point of reference to find any icon and it's file name.

Just a small slice of the icon sheet I created for Fluke's VSA app.

The addition was a big hit with our developer on the project. It improved organization, increased the speed of finding assets, and allowed him to easily see if an icon was missing. 

Having a single sheet with all the assets and file names is a huge time-saver when I lay out an interface. I can quickly find assets without scanning through individual files. Sometimes there are icons with multiple sizes and seeing them all at once helps me pick the right one on the first attempt.

Setting Up the File

Whether you favor Photoshop's generator, Slicy, or Sketch's export function, adding asset sheets to your workflow is simple.

When creating the export file, add a text layer below each icon with the file name it will be exported as.* Then group all the artwork, text layers and background to export as "_info-sheet.png". This goes in the same folder as the exported icons. The info sheet allows the developer to visually identify the icon, then search for the file name to quickly grab the exported file.

This has the pleasant side effect of being useful for me as well. I can easily find out if I forgot to include something, and my developer almost never has to ask me for help finding an asset. It's a solution that only adds a tiny amount of time on my side and saves both of us time in the future.

Download the Templates

I'm guessing that sounds pretty good to you too, so here’s two icon sheet templates for Photoshop and Sketch to get you started. As you work you’ll probably need to expand and change this template. Feel free to experiment with this process and make it your own.

Catch my blog post next week for another simple workflow adjustment to make your developer’s life easier.

Templates are licensed with Attribution-ShareAlike 4.0 International.

*If you aren't already naming your icons in a systematic and predictable manner, then may the dev gods have mercy on your soul.

Check out parts two and three of this series for advice on documentation and teamwork.

Improving Design to Dev Workflows: Dev Guides Arduino Doorbell Messenger