10 consejos para exportar activos vectoriales de Sketch a Android

Las ventajas de los vectores para los rásteres son obvias. Los activos vectoriales son más pequeños, fácilmente editables y mucho más fáciles de microgestión (específicamente en términos de tamaño y color).

Trabajo en una aplicación relativamente compleja que admite muchas plataformas diferentes. Con los crecientes tamaños y resoluciones de pantalla (mirándote, Nexus 6P) para Android, sentimos que era necesario actualizar los activos existentes desde los formatos de trama a los vectores para mantener los activos escalables debido a la necesidad de admitir diferentes resoluciones.

La mayoría de los activos que utilizamos actualmente se crearon originalmente con Sketch. Esto causó algunos problemas interesantes al intentar la conversión. Dado que los activos vectoriales son solo parcialmente compatibles con Android en su API actual (Android 24), los activos exportados se rompieron de muchas maneras inesperadas.

Esto sirve como un diario de investigación desde el punto de vista de un diseñador, para un par de cosas que aprendimos al tratar de convertir todos los activos ráster de la aplicación a vectores para Android. Las guías de usuario de Android Studio no fueron particularmente útiles cuando se trata de solucionar problemas.

No del todo

Muchas de las reglas escritas aquí son específicas para exportar activos vectoriales usando Sketch. Sin embargo, también son buenas pautas para exportar activos de vectores limpios y funcionales para su uso en todas las plataformas.

1. Mantenlo simple estúpido

Este principio básico para el diseño de software también se aplica a los activos: cuanto más simples sean las formas, mejor. Pruebe y use formas simples para crear los activos complejos que necesita. La regla general es que cuantos menos caminos y anclajes se utilicen, más "limpio" es. Usar una sola forma siempre es preferible a usar múltiples formas superpuestas para crear un activo.

2. Evita usar máscaras

Las máscaras realizadas con Sketch no son compatibles con la versión actual de la API de Android. Android VectorDrawble (AVD) ignora cualquier enmascaramiento realizado en Sketch, y las máscaras realizadas en Sketch a veces bloquean Adobe Illustrator. Si hay una situación en la que se debe crear un efecto de sombreado, se debe usar una forma superpuesta en la parte superior de la capa existente a favor de las máscaras.

Use la operación de búsqueda de caminos

3. Haz contornos, no trazos

En situaciones donde sea posible, trate de evitar el uso de trazos para crear las formas deseadas. Los trazos no siempre se escalan correctamente con el resto de la imagen. Además, AVD no distingue entre las diferentes posiciones de borde y trata todos los bordes como trazos "centrales".

Entonces, esto significa que un borde interior de grosor 10 en Sketch se convierte en un trazo central de grosor 20 cuando se representa en AVD.

Dado que los contornos son formas, siempre exhiben la apariencia deseada cuando se escalan o transforman. Los contornos también son mucho más fáciles de trabajar si desea aplicar operaciones de búsqueda de rutas.

Puede cambiar fácilmente los trazos en contornos utilizando CMD + Shift + O.

4. Los conquistadores son tus amigos

La mayoría de las formas complejas se pueden crear a partir de una composición de formas más simples utilizando las operaciones del buscador de caminos. Familiarízate con ellos. Las formas creadas de esta manera se pueden mostrar correctamente en todos los dispositivos.

5. Adobe Illustrator es el mejor solucionador de problemas

Adobe Illustrator procesa los activos vectoriales de la misma manera que VectorDrawable de Android (por experiencia anecdótica). Si un activo no se muestra correctamente en AVD, intente diagnosticar el problema con Illustrator. Muchas veces la solución es tan simple como simplemente eliminar un relleno.

Un problema común para exportar activos para Android usando Sketch.

6. Las formas combinadas y transformadas pueden no aparecer como lo que parecen

Las transformaciones como los reflejos y las rotaciones realizadas en Sketch no son totalmente compatibles con Android VectorDrawable. Como resultado, las capas transformadas no siempre aparecen de la manera esperada. La solución más fácil para esto sería simplemente aplanar cada ruta que tiene una transformación, para que la transformación se convierta en una parte de la ruta.

Sin embargo, en situaciones donde las transformaciones se aplican a grupos enteros, la única forma de evitar esto sería transformar y colocar manualmente cada capa individual.

7. Las transparencias son tu amigo ...

Las transparencias son compatibles y se muestran correctamente en todos los dispositivos y plataformas, úselas para crear sombras / reflejos cuando corresponda.

Tenga en cuenta la sombra debajo del bistec

8. ... y los gradientes no son

Por otro lado, AVD actualmente no admite gradientes. Los activos creados de esta manera seguramente se romperán durante la importación. El sombreado de celdas debe usarse en favor de las técnicas de sombreado de degradado.

La sombra debajo del bistec desaparece

9. Exportar mesas de trabajo, no capas

Usar un cuadro delimitador en Sketch para definir las dimensiones de un activo vectorial es una técnica de la vieja escuela. Aunque todavía es un método útil para definir límites para exportar vectores, el mejor enfoque es crear una mesa de trabajo que tenga las mismas dimensiones que la ventana gráfica que está intentando definir. La capa del cuadro delimitador en el activo se trata como una ruta separada pero transparente cuando se traduce a VectorDrawable xml.

10. Las formas planas resolverán la mayoría de los problemas

Los activos exportados contienen metadatos que describen sus transformaciones y composiciones mientras se está editando, ya que esto les dice a los usuarios "cómo" se creó. Sin embargo, cuando se trata de exportar y renderizar estos activos, esta información extraña sobre cómo se compuso a menudo causa más problemas de los que resuelve (las rotaciones y reflexiones realizadas en Sketch no son compatibles), además de aumentar el tamaño del archivo.

El estado final del activo es lo único que se muestra, por lo que en este caso solo importa la apariencia del estado final.

Al acoplar una forma, las transformaciones y las operaciones del explorador se convertirán en activos. Esto reduce el tamaño del archivo al eliminar información obsoleta y le permite previsualizar la imagen con precisión.