Boceto y flujo de trabajo InVision para desarrolladores

He estado usando Sketch para todos los aspectos del trabajo de diseño desde hace bastante tiempo, pero al crear un proyecto de iOS y Android dentro del mismo archivo, he tenido problemas con la exportación de activos.

En MOBGEN Accenture Interactive, recientemente hemos estado usando la suite InVision para la transferencia de diseño a los desarrolladores y para mantener los proyectos limpios, usamos un solo proyecto con diseños de iOS y Android.

Cuando se trata de las mediciones, InVision funciona bastante bien para nosotros; Todos pueden cambiar de proyectos y tipos de medidas fácilmente. Sin embargo, cuando se trata de activos exportados, hemos tropezado con pocos problemas.

Para hacer que los activos se puedan exportar y descargar en InVision, los diseñadores deben marcar cada uno de esos elementos como exportables o usar sectores, definiendo el tamaño y el tipo a exportar.

Al investigar un poco sobre los tamaños necesarios para iOS y Android, podemos ver que hay algunos tamaños compartidos.

Archivo de configuración

Comience navegando a Sketch "Preferencias" y cree un nuevo preset para las opciones de exportación. He nombrado el mío "Todos los activos": esto incluye todas las opciones de exportación para Android e iOS combinadas (clasificaremos y cambiaremos el nombre de los activos más adelante con un script).

Preferencias de croquis

Antes de cargar cualquier pantalla en InVision, asegúrese de haber marcado todos los activos que necesita como exportables (o cortes usados). Lo mismo ocurre si no está utilizando InVision, marque todos los activos necesarios como exportables, luego haga clic en "Exportar todo" en el extremo derecho de la barra de herramientas.

Barra de herramientas de croquis

Invision

Navegue a su proyecto dentro de InVision. Haga clic en una de las pantallas e ingrese "Modo de inspección" (también puede usar "i" en el teclado). Ahora seleccione la pestaña "Activos" y "Descargar todos" los activos.

Proyecto InVision

Después de la descarga, mueva todos los activos a la carpeta que desee: le sugiero que cree una carpeta temporal en el escritorio mientras sigue los siguientes pasos de "magia" y luego copie y pegue los activos en su proyecto.

Vas a terminar con una carpeta similar a esta

Dónde sucede la magia

Va a requerir un poco de #hackerSkills utilizando el comando de shell, pero no se preocupe, en su mayoría es solo copiar y pegar .

He escrito dos scripts de comandos de shell que irán a través de la carpeta de activos y reorganizarán todos los activos en un formato adecuado.

Y va un poco más o menos así ...

Abra su Terminal y copie y pegue el código que necesita. Antes de pegar, cambie el "yourDestination" a su destino de carpeta real (por ejemplo a / Desktop / temp).

Para activos de Android

cd yourDestination
mkdir xxxhdpi; mkdir xxhdpi; mkdir xhdpi; mkdir hdpi; mkdir mdpi; mkdir ldpi
hecho
para el archivo en $ (find. -type f -name '* @ 4x *'); hacer
  mv "$ archivo" "xxxhdpi / $ {archivo / @ 4x /}"
hecho
para el archivo en $ (find. -type f -name '* @ 3x *'); hacer
  mv "$ archivo" "xxhdpi / $ {archivo / @ 3x /}"
hecho
para el archivo en $ (find. -type f -name '* @ 2x *'); hacer
  mv "$ archivo" "xhdpi / $ {archivo / @ 2x /}"
hecho
para el archivo en $ (find. -type f -name '* @ 1,5x *'); hacer
  mv "$ archivo" "hdpi / $ {archivo / @ 1,5x /}"
hecho
para el archivo en $ (find. -type f -name '* @ 0,75x *'); hacer
  mv "$ archivo" "ldpi / $ {archivo / @ 0,75x /}"
hecho
para el archivo en $ (find. -type f -name '* .png'); hacer
  mv "$ archivo" "mdpi /"
hecho

Después de ejecutar el script, debe terminar con algo que se parece a esto. Todos los archivos de activos se renombrarán y se colocarán en la carpeta correspondiente.

Para activos de iOS

cd yourDestination
para el archivo en $ (find. -type f -name '* @ 1x *'); hacer
  mv "$ archivo" "$ {archivo / @ 1x /}"
hecho
  rm -f * @ 4x *
hecho
  rm -f * @ 1,5x *
hecho
  rm -f * @ 0,75x *
hecho

Después de ejecutar el script, debería terminar con algo como esto. El script eliminará los archivos de los tamaños x4, x1.5, x0.75 y cambiará el nombre de x1.

Bono

Si aún no está utilizando un complemento de Sketch para comprimir todas sus imágenes, le sugiero que pruebe ImageOptim o TinyPNG.

Rápido y fácil

Hemos encontrado que este flujo de trabajo es muy útil. Podemos crear todos los activos para iOS y Android en un solo proyecto, lo que significa que los desarrolladores terminan con activos optimizados y organizados.

Soy Lan Belic, un diseñador que vive en Amsterdam. Creé esto no solo para hacernos la vida más fácil en MOBGEN, sino también para hacer lo mismo por ti. ¿Tienes alguna idea o tal vez un comentario? ¡Dame un grito en Twitter!