Cómo exportar assets con Sketch

Escrito por Cris Busquets. Publicado en Diseño UI

En este artículo te enseñaré exactamente cómo exportar assets con Sketch y enviarlos al equipo de desarrollo.

No es tan difícil como parece, pero sí hay que tener claros algunos conceptos antes de empezar para hacerlo bien. Si lo prefieres, salta directamente a los 3 métodos para exportar assets.

¡Vamos allá!

Diferencia entre puntos (PT) y pixeles (PX)

Los desarrolladores trabajan en puntos (pt), así que es necesario que antes de nada entiendas la diferencia que hay con los pixeles.

Cuando salió el primer iPhone en 2007, era muy fácil: 1pt = 1px.

Cuando años después aparecieron los teléfonos con pantalla retina, esta igualdad se rompió. 1pt equivalía a 2px… y hasta 3, con las nuevas pantallas que hay ahora en el mercado.

¿Qué me estás contando, Cris?

Que una pantalla sea retina significa que caben más pixeles por punto. Donde antes había 1, ahora hay hasta 3, por eso tienen más definición y se ve todo mejor.

¿Y hay que diseñar todo por triplicado? ¿Y sumarle Android?

No 🙂 Sigue leyendo y lo verás.

Un consejo: diseña siempre en @1x

Para evitar la locura de diseñar en decenas de pantallas distintas, se llegó a una especie de acuerdo:

Los diseñadores diseñamos en @1x y después exportamos los assets en todas las resoluciones necesarias.

Y eso es lo que hace precisamente Sketch cuando exporta assets:

Si dudas en qué tamaño escoger, en Sketch utiliza iPhone 8 a 375 x 667.

Si utilizas otro programa asegúrate de que pone este tamaño. Adobe, por ejemplo, tiene tendencia a poner los tamaños en @2x por defecto.

¿Qué se exporta como asset y qué no?

Pensemos en asset como cualquier recurso gráfico que se carga de forma externa.

De este modo podemos definir qué hay que exportar para el equipo de desarrollo y qué no es necesario.

Así, solo exportamos como asset:

• Iconos complejos (más complejos que una simple redonda o cuadrado)
• Botones
• Logotipos

El equipo de desarrollo puede generar mediante código las sombras, desenfoques, fondos… etc. así como los bloques de navegación, títulos y demás que vienen predefinidos en cada sistema operativo.

Los datos (textos e imágenes), tampoco hace falta exportarlos, ya se cargan mediante archivos JSON o similares.

Cómo exportar assets: los 3 métodos

Exportar con selección directa

Puedes exportar cualquier elemento fácilmente seleccionándolo y, en el Inspector, selecciona “Make exportable”.

Como ves, por defecto exporta a @1x. Para añadir las otras resoluciones, simplemente haz clic en el primer icono que sale a la derecha de “Presets” y selecciona iOS o Android 🙂

Este método para exportar también está accesible desde File > Export Current Selection o en el icono Export del menú de herramientas.

También puedes exportar de golpe todo lo que Sketch considera que puede ser un asset. En este caso, selecciona File > Export… y te abrirá una ventana con las opciones:

Aquí podrás escoger qué quieres exportar como asset y qué no marcando el checkbox.

Las alertas que ves salen cuando el nombre genera un conflicto con otro asset. Para solucionarlo solo hay que cambiar alguno de los nombres conflictivos.

Exportar con “slices”

Ese método para exportar es menos preciso, pero sirve para exportar grandes zonas o bloques que deben ir juntos.

Seleccionas Slices cuando aprietas S en el teclado (también está en la barra de herramientas superior). El cursor se convertirá en un pequeño cuchillo.

Después solo tienes que dibujar arrastrando qué quieres exportar. Date cuenta de todos los cambios en pantalla.

En las capas, aparecerá un icono con un rectángulo y un cuchillo, el asset quedará rodeado por un borde discontínuo y se abrirá el panel de Make exportable en el Inspector (como en el paso anterior)

Exporta assets con ‘Drag & Drop’

Es el método más curioso. Personalmente solo le veo utilidad para exportar rápido elementos para enseñarlos, pero no para trabajar con ellos.

Para ponerlo en práctica solo selecciona la capa y arrástrala al escritorio, fuera de Sketch. Se exportará automáticamente en @1x.

Si quieres configurar cómo se exporta y cambiar la resolución, debes pulsar la tecla Option del teclado a la vez que lo arrastras.

Cómo exportar assets. El resumen:

Si has leído hasta aquí, ya habrás visto lo «fácil» que es exportar assets con Sketch: lo más complejo siempre suele ser decidir qué exportar y qué no.

Todo forma parte del proceso de diseño que se establezca: cuando tengas todos los assets, envíaselos a tu equipo de desarrollo junto con un enlace de Zeplin para que vean las pantallas y tengan una referencia de cómo y dónde va cada asset.

Te recomiendo que estés encima de ellos -con cierta distancia- para asegurarte de que comprenden exactamente cómo debe ir todo. Para ti puede ser muy obvio, pero probablemente el equipo de desarrollo vea por primera vez el diseño.

Esto también te interesa 👇

Cómo diseñar en un entorno que no se para

Que es un empty state, mejores prácticas y ejemplos

Principios de UX: Efecto goal-gradient y regla peak-end