PASO 1. Utiliza las mesas de trabajo en Photoshop para diseñar varias pantallas dentro de tu diseño interactivo. (Un consejo: mantén pulsada la tecla Opción [Mac] o Alt [Windows] cuando añadas una mesa de trabajo nueva para copiar todas las ilustraciones, así como las propiedades de tamaño, de la mesa de trabajo anterior en la nueva).

PASO 2. Los objetos inteligentes son el equivalente de Photoshop a los símbolos de XD. En Photoshop, convierte los iconos y los elementos de la interfaz en objetos inteligentes para mantener la coherencia en todas las mesas de trabajo y capas. Esta función resulta adecuada sobre todo para aplicar elementos de navegación en varias pantallas de un diseño interactivo.

PASO 3. Asegúrate de definir estilos de párrafo en el documento de Photoshop para mantener un estilo tipográfico coherente en todo el diseño (y una experiencia de usuario uniforme). Una vez que hayas definido los estilos, aplícalos al texto seleccionado dentro de las mesas de trabajo.

PASO 4. Abre tu archivo de Photoshop con Adobe XD. Las mesas de trabajo, las capas y los grupos de capas, las ilustraciones y el texto se convierten en objetos de XD automáticamente, en función del diseño de Photoshop.

PASO 5. Cambia el modo de visualización a Prototipo. A continuación, selecciona un elemento interactivo, como un botón, y haz clic y arrastra la flecha de acción a otra mesa de trabajo para crear un vínculo entre el elemento y dicha mesa.

PASO 6. Un prototipo correcto permite al usuario visualizar una tarea completa. Asegúrate de que el usuario no acaba en un callejón sin salida y de que siempre puede volver al punto de partida. En este ejemplo, el usuario elige un país y, después, un paquete turístico; a continuación, puede reservar el viaje.

PASO 7. Elige entre una variedad de efectos de transición cuando el usuario interactúa con tu prototipo. Utiliza efectos para simular las interacciones en los dispositivos móviles, incluidas animaciones de disolución, deslizamiento y empuje.

PASO 8. Interactúa con tu prototipo en tiempo real. Conecta tu dispositivo móvil al ordenador, mediante un cable USB y, a continuación, inicia la aplicación móvil de XD. Haz clic en el botón Vista previa de dispositivo en XD en el escritorio para comenzar a interactuar con el diseño.

PASO 9. Comparte tu prototipo interactivo con el enlace Publicar prototipo que se encuentra situado bajo el botón Compartir en XD. Una vez creado el enlace, podrás compartir la URL con cualquier persona y en cualquier dispositivo; además, ellos podrán dar su opinión a través de las herramientas de comentarios incorporadas. (Echa un vistazo al prototipo que hemos creado para este tutorial).