Better Android workflows with Sketch 3 and a bit of fairy dust

Designing for a native Android apps is great; even rewarding at times. That is until you have to take your beautiful app, that your team and you have spent countless hours perfecting, and…export assets [cue dramatic music].

Exporting production assets for Android apps is probably the most monotonous thing a mobile designer has to do. Over the years I’ve looked for better and faster ways to perfect this workflow. Still, it seems that every designer has the same problem I have: There isn’t a perfect workflow. There are only marginally better ones.

With that being said, this is my marginally better one. It is the fastest I’ve found, while leaving the smallest room for error.

Setup your Sketch file

About a year ago I switched all of our mobile work at Remind over to Sketch for various reasons that other articles can do a better job of telling you about. If you haven’t had a chance to play with it, I urge you to download it and give it a try.

What works well for me is to create a separate page, at the beginning or end or my Sketch project, that is dedicated to assets that you need to export. Just copy any assets that need exported into this page. That way you have a nice little overview of all of the images going into your app and you can also select all the assets at once to assign export settings.

You’ll notice, I also break it down more by using Artboard’s to organize by different sections of the app or even app releases.

Setting it up to export

At Remind, we design at 200% (xhdpi) and scale down. We found that works well for us, but does require more forethought. This is entirely up to you though. I recommend designing at 100% (mdpi) and scaling up for export if you are new to designing for mobile. Check out this nice Bjango article on that. I will go over how to export for both ways though.

When you have all of your assets on the page, select them all at once and use the export settings in the guide below based on what dpi you are designing at:

Add a - and then the appropriate dpi, using this guide.

Exporting

1. Create a new folder named res on your Desktop.
2. Back in Sketch (with all of the layers still selected), make sure your assets are on full pixels by choosing Layer > Round to Nearest Pixel Edge.
3. Click that big ol’ Export Layers button in the Export panel and save them all to that res folder.

Will look a little something like this once you export.

The fairy dust

Spoiler alert: The fairy dust is a shell command. Deep breaths. You got this.

This nice little shell command, that I wrote with the help of Eric Holmes, will go through your res folder, create all of the export folders you need, and put the right images in the appropriate folder. All while renaming the images correctly.

When you have to manually export every file, name it correctly, and put the correct DPI in the appropriate folder, it leaves huge room for error. This removes that pesky human element☺

Not enough designers take advantage of the time saving that shell commands offer and I promise they are not as scary as they seem.

1. Simply open Terminal
2. Copy the text from here
3. Paste into your Terminal window
4. Hit return

Whew. That was rough, but look! Magic! All of your files are now neatly in their place.

End product of using the shell command.

Bonus round: Compress

Always, always, always run your files through some sort of compression before handing off to Engineers. For a quick compression, I prefer ImageOptim. Definitely also check out ImageAlpha as well. The lattter requires more manual control and time, but has the potential to make your files even smaller.

With ImageOptim, you can simply drag your res folder into the window and it will do its thing. Or if you prefer shell commands and still have that Terminal window open, just paste in this command and hit return:

open -a ImageOptim .

Voilà! Now you have perfectly organized, compressed, and Engineer ready Android assets.

Even better ways

We’ve found that this workflow works really well for us, but it is all about finding the right workflow that works best for you and/or your team. Would love to hear of any other workflows that people have found. I’ll be updating this article as our teams finds new and betters way of working.v

*Note: I did not include my workflow for 9-patch assets. Will be writing an article on that specific flow and will update with a link when it’s ready!