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 in when it comes to troubleshooting.

Not quite “Full Support”

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 will straight up crash Adobe Illustrator sometimes. 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.

Use the pathfinder operation “Intersect” on the shading layer with the base layer to create the shape you need

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.

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 are usually properly displayed on every device/program.

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.

A common problem for exporting assets for Android using Sketch.

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.

Note the drop shadow under the steak

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.

Drop shadow under the steak disappears

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

It makes sense for an asset to contain the information about its transformations and compositions while it is being edited, because this can tell the user 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.

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 “bake” transforms and pathfinder operations into the original path. This reduces the file size by rendering obsolete the information that is irrelevant to the drawing of the shape itself.