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á!
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.
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.
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:
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.
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.
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)
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.
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.
Inspiración de diseño UI/UX para 2020
Modo Oscuro: 5 hechos y tips para diseñarlo mejor
Zeplin: 5 secretos que no conoces
.SVG y te evitas generar 90 íconos en infinitas resoluciones. Aligeras el proyecto y además se pueden editar el color de relleno, sombreado bordes y demás con CSS.