10 Tips for exporting vector assets from Sketch to Android
The advantages of vectors to rasters are obvious. Vector assets are smaller, readily editable, and much easier to micromanage (specifically in terms of size and color).
I work on a relatively complex application that supports many different platforms. With the growing screen sizes and resolutions (looking at you, Nexus 6P) for Android, we felt it was necessary to update the existing assets from raster to vector formats to keep the assets scalable due to the need to support different resolutions.
Most of the assets we currently use were originally created using Sketch. This caused some interesting problems while attempting the conversion. Since vector assets are only partially supported by Android in its current API (Android 24), the exported assets broke in many unexpected ways.
This serves as an investigative diary from the point of view of a designer, for a couple of things we learned while trying to convert all the raster assets in the app to vectors for Android. The Android Studio user guides were not particularly helpful when it comes to troubleshooting.
Many of the rules written here are specific to exporting vector assets using Sketch. However, they are also good guidelines for exporting clean and functional vector assets for use across all platforms.
1. Keep it Simple Stupid
This core principle for software design applies for assets as well: the simpler the shapes the better. Try and use simple shapes to create the complex assets you need. The general rule of thumb is, the fewer paths and anchors are used, the “cleaner” it is. Using a single shape is always preferable to using multiple overlapping shapes to create an asset.
2. Avoid using masks
Masks made using Sketch are not supported by the current version of Android API. Any maskings made in Sketch are ignored by Android VectorDrawble (AVD), and masks made in Sketch would sometimes crash Adobe Illustrator. If there’s a situation where a shading effect needs to be created, an overlapping shape on top of the existing layer should be used in favor of masks.
3. Make outlines, not strokes
In situations where possible, try to avoid using strokes to create the desired shapes. Strokes don’t always scale properly with the rest of the image. In addition, AVD does not distinguish between the different border positions, and treats all borders as “center” strokes.
So what this means is that an inside border of thickness 10 on Sketch becomes a center stroke of thickness 20 when rendered on AVD.
Since outlines are shapes, they always exhibit the desired appearance when scaled or transformed. Outlines are also much easier to work with if you wish to apply pathfinder operations.
You can easily change strokes into outlines by using CMD+Shift+O.
4. Pathfinders are your friend
Most complex shapes can be created from a composition of simpler shapes using the pathfinder operations. Get familiar with them. Shapes created this way can be properly displayed on every device.
5. Adobe Illustrator is the best troubleshooter
Adobe Illustrator renders vector assets the same way as Android’s VectorDrawable (from anecdotal experience). If an asset isn’t showing up properly in AVD, try diagnosing the problem using Illustrator. Often times the solution is as simple as just removing a fill in.
6. Combined and transformed shapes may not appear as what they seem
Transformations such as reflections and rotations made in Sketch are not fully supported in Android VectorDrawable. As a result, transformed layers don’t always appear the way you expect them to. The easiest solution to this would be to just flatten each path that has a transformation, so the transformation becomes a part of the path.
However, in situations where transformations are applied to entire groups, the only way to work around this would be to manually transform and position each individual layer.
7. Transparencies are your friend…
Transparencies are properly supported and displayed across all devices and platforms, use them to create shadows/highlights where appropriate.
8. …and gradients are not
On the other hand, AVD does not currently support gradients. The assets made this way will almost certainly break during import. Cel shading should be used in favor of gradient shading techniques.
9. Export artboards, not layers
Using a bounding box in Sketch to define the dimensions of a vector asset is an old-school technique. Although it is still a serviceable method of defining boundaries for exporting vectors, the better approach is to create an artboard that has the same dimensions as the viewport you’re trying to define. The bounding box layer in the asset is treated as a separate, but transparent path when translated to VectorDrawable xml.
10. Flattening shapes will solve most problems
Exported assets contain metadata describing its transformations and compositions while it is being edited, since this tells users as to “how” it was created. However when it comes to exporting and rendering these assets, this extraneous information on how it was composed often causes more problems than it solves (rotations and reflections performed in Sketch are not supported), in addition to increasing the file size.
The end state of the asset is the only thing being shown, and so in this case only the appearance of the end state matters.
Flattening a shape will render transforms and pathfinder operations into the asset. This reduces the file size by removing obsolete information, and allows you to preview the image accurately.
