Empiece a crear prototipos en Adobe XD

A medida que la demanda de profesionales del diseño de UX sigue creciendo, los diseñadores buscan herramientas fáciles de usar que sean lo suficientemente potentes para crear prototipos de alta calidad, pero que les resulten familiares a las herramientas que ya usan todos los días.

Adobe XD (Preview) hace precisamente eso, permitiendo a los usuarios crear, editar y socializar fácilmente prototipos para diseños móviles, todo dentro de un programa. Se trabaja en nuevas funciones todo el tiempo, pero, por ahora, estos tutoriales rápidos lo ayudarán a comenzar con la creación de prototipos en Adobe XD.

01. Crea un prototipo a partir de una estructura alámbrica

Crear prototipos es fácil con Adobe XD



Crear prototipos es fácil con Adobe XD

Para crear un prototipo a partir de una estructura alámbrica, siga estos sencillos pasos:

  • Haga clic en prototipo en la parte superior o en la pestaña de comando
  • Haga clic en el comando a para mostrar las interacciones, luego haga clic en vista previa para conectar el prototipo
  • Haga clic en las pantallas del prototipo para ver la navegación general y los efectos de la transición.

02. Creando interacciones

Para crear una interacción de una pantalla a otra, seleccione un objeto y arrastre la flecha azul al tablero de arte al que desea vincular

Para crear una interacción de una pantalla a otra, seleccione un objeto y arrastre la flecha azul al tablero de arte al que desea vincular

Lo primero que verá es un icono de botón de inicio azul en la parte superior izquierda de la pantalla, que indica la pantalla de inicio. Puede cambiar eso haciendo clic en un título diferente y luego haciendo clic en el icono de inicio gris adjunto a la pantalla que desea que sea su nueva pantalla de inicio.

Para crear una interacción de una pantalla a otra, seleccione un objeto y arrastre la flecha azul al tablero de arte que desea vincular. Puede eliminar una interacción haciendo clic en la flecha azul y arrastrándola a un espacio vacío. Cuando crea una interacción, el cuadro de diálogo le brinda automáticamente opciones para definir el tipo de transición, suavizado y duración. El clic de comando puede hacer esto fácilmente desde un prototipo.

Presione el comando enter para obtener una vista previa. Sin cerrar la ventana de vista previa, puede editar haciendo clic en la flecha azul para la interacción y cambiar desde allí.

03. Compartir prototipos

Publique para compartir en línea simplemente haciendo clic en compartir en línea en la esquina superior derecha de la pantalla

la mejor cámara canon para fotografía de vida silvestre
Publique para compartir en línea simplemente haciendo clic en compartir en línea en la esquina superior derecha de la pantalla

Con la ventana de vista previa aún abierta, toque grabar y haga clic en las interacciones en su prototipo. Una vez que haya terminado, presione grabar nuevamente y guarde el archivo de película en su escritorio. Cuando los compañeros ven el archivo de la película, hay marcas visuales para indicar los puntos de acceso en los que hizo clic al grabar.

También puede publicar para compartir en línea simplemente haciendo clic en compartir en línea en la esquina superior derecha de la pantalla, escriba un título en el espacio provisto y arrastre una imagen desde el buscador al espacio provisto para crear un panel de vista previa y luego crear un enlace. Adobe XD crea automáticamente un enlace para compartir que se puede ver en cualquier navegador web. Los marcadores indican automáticamente los puntos calientes si el revisor no hace clic en un período de tiempo definido.

También puede revisar en un dispositivo móvil pegando el mismo enlace en su navegador móvil. Los indicadores visuales no aparecen cuando se prueba en un dispositivo móvil para brindar una experiencia más realista.

Si guarda la URL en la pantalla de inicio, el icono aparecerá automáticamente como la imagen de vista previa en miniatura que seleccionó anteriormente.

Puede realizar los cambios necesarios en Adobe XD. Para compartir versiones revisadas, simplemente haga clic en compartir nuevamente. Se le dará la opción de actualizar el enlace original o crear un nuevo enlace. Gestionar enlaces. Haga clic en administrar enlaces a través de su cuenta de activos de Creative Cloud. Todos los prototipos se guardan en línea en su sección de prototipos para una fácil administración.

Words: Demian Borba

Demian Borba es gerente de producto de Adobe XD