Image for post
Image for post

10 Tips for exporting vector assets from Sketch to Android

Javan Wang
Oct 19, 2016 · 5 min read

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.

Image for post
Image for post
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.

Image for post
Image for post

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.

Image for post
Image for post
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.

You can easily change strokes into outlines by using CMD+Shift+O.

Image for post
Image for post

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.

Image for post
Image for post
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.

Image for post
Image for post

7. Transparencies are your friend…

Transparencies are properly supported and displayed across all devices and platforms, use them to create shadows/highlights where appropriate.

Image for post
Image for post
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.

Image for post
Image for post
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

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store