A workflow for sharing design assets with your Android developers
Answering an FAQ once and for all
I often get asked for recommendations for how should a designer share assets with their Android developer colleagues. While screens have become a lot easier thanks to Zeplin, issues still persist in teams when dealing with icons.
I’m describing my Sketch workflow below that has worked well for me. I hope this simplifies things for your team as well.
1. Ensure all icons in your designs are symbols
Doing so can help you maintain consistency in terms of size, plus make it possible to swap icons around in your designs when required.
2. Use color symbols where possible
Create symbols for colors that you might need across your design (black, translucent, white, accent, etc). These are essentially blank artboards, each with a rectangle of a color in them.
Use your icon layer as a mask and place a 100% black color symbol on top. You can now use the same icon symbol with different colors in different places.
3. Slice all your icon symbols
As a rule, slice all your icon symbols. This has two benefits: firstly, it’s good practice since it helps you ensure all your icons are exportable in Zeplin by your developers.
Secondly, as I suggested in the previous point, your icon symbols are essentially 100% black. This means that your developers are going to be able to export 100% black icons, which they can use android:tint to color as required. Theoretically, you could also use white, but I recommend black icons since it helps to be able to see them clearly in your design artboards, in file explorers, and other preview screens where the background is often white.
You do not need to bother with choosing the scales and formats for exports since Zeplin will handle all of that for you.
4. Export artboards to Zeplin
Just wrapping things up with this step. When you export your artboards to Zeplin, your developers can now export the sliced symbols. You do not need to slice these layers in the artboard again. Also, the asset tool will ignore the changed color in the icon symbol and use the 100% black you’ve set in the icon symbol, as you can see below.
Benefits of this system:
- Easier to maintain consistency, especially regarding sizes and padding of icons.
- Icons aren’t repeated, unless its impossible to use color symbols.
- Changing colors for icons becomes a lot simpler as well. Not necessarily beneficial in terms of handoffs with developers, but another win for our own workflows.
- Less likely to “forget to slice” an icon before exporting to Zeplin, so developers don’t need to nudge you to do that.
