Ayer te explique por qué tienes que exportar cada página bien ordenada e identificada; debido a lo que estas viendo en la imagen inferior. Imagina buscar dentro de este directorio; que contiene 253 documentos; la gráfica del «Username» a 3x!; y no deseas tener a un programador enfogonado contigo; jejejejej.
Ahora vamos a exportar cada página.
Dentro de Adobe XD seleccionas la primera página y seleccionas File/Export/Selected… o «Command + e«. En este primer ejemplo verás que ya exporté a cada página el formato .PNG. Cada página la identifiqué en Folders enumerados desde 00- hasta 11- + el nombre de la página. Observa la siguiente imagen. Cada página; dependiendo de lo que contenga en su interior; graba archivos desde 1x a 3x de cada uno. Por eso es bueno tener un PDF impreso de cada página para visualizar cada imagen exportada.
Cuando deseas exportar a PNG te recomiendo usar estos parámetros…
Cuando desees exportar a JPG te recomiendo usar estos parámetros… y
Cuando desees exportar a SVG te recomiendo usar estos parámetros… (Recuerda que los archivos SVG los puedes abrir también en Adobe Illustrator.)
Ahora te preguntarás: ¿Para qué es el Export Batch; el cual está desactivado?
¿Recuerdas el panel de Layers? ¿Recuerdas el icono que aparece cada vez que el «mouse» hace un «roll over» sobre cada layer? Ese icono de «share» sirve para cuando un día recibes la llamada del programador y te dice: —Vale, perdí o dañé la imagen del botón de la página de Home; el botón de solicitar servicio y el botón de Regresar de la página de Gracias»; ¿Me los puedes enviar otra vez?
¡No problem!
Rápidamente abres el panel de «layers«; buscas en tu maqueta los objetos que te solicitó el programador; y cada vez que seleccionas uno; en los «layers» se va a sombrear el objeto seleccionado. Ahora con el «mouse» de tu computadora activas ese botón de «Batch Export» para cada objeto, y si deseas cambiarle el nombre el objeto o «Layer» lo puedes hacer también en estos momentos.
Una vez estes listo para exportar los botones solicitados, solo debes de presionar «Export Batch» o «Shift + Command + e«; creas un folder nuevo y luego el formato adecuado o solicitado: PNG; SVG o JPG.
En este caso cree un folder con el nombre de «solicitados» y dentro del mismo guardé la exportación.
Como podrás ver cada botón fue exportado en sus distintos tamaños.
Al final del camino comprimes todos los archivos en un archivo .ZIP; buscas un disco externo y entregas tu maqueta al programador.
Archivo .ZIP; tamaño 139 MB.
Ahora bien ¿cuál es el próximo paso? I have no idea! jejejejejejej eso deseo saber yo! Me gustaría que algún programador me dijera o me ayude a ver la luz al final del camino. A mi entender un programador usa el programa que mejor le sirva para programar y crear aplicaciones para iOS o Android OS. Los que programan para iOS suelen usar el programa llamado «Xcode 9«; con el lenguaje «Swift 4«. En este link encontrarás más información de ese mundo: https://developer.apple.com. Para ser un «Developer» debes de tener una licencia a mi entender, en fin ese mundo es todo un tema distinto. Así que si eres Programador y deseas mostrarnos cómo llevas un prototipo a una aplicación final para aprobación y distribución estoy a tu disposición para compartir ese conocimiento y requisitos.
Espero te haya gustado esta serie de escritos relacionados a la creación de una maqueta y prototipo usando Adobe XD. Juega con XD; tiene muchas probabilidades de diseño con herramientas sencillas y deja tu comentario en los escritos para ayudarte con cualquier pregunta que tengas al respecto.
Eso fue todo por el momento; visita nuevamente el link del prototipo y compártelo con un programador que conozcas para ver si logramos pasar juntos a la siguiente faceta.
https://xd.adobe.com/view/7f784932-20f1-4fed-a748-15c7a4b86882
Embed Code:
https://xd.adobe.com/embed/7f784932-20f1-4fed-a748-15c7a4b86882
¡Buen fin de semana!
PD: a ver que nos inventamos ahora!…
JRVstudio 