Conozca cómo puede diseñar íconos, gráficos, prototipos y mallas metálicas utilizando Adobe XD CC.

Adobe XD CC una herramienta basada en vectores para el diseño y la creación de prototipos de experiencias de usuarios para aplicaciones móviles y web. Cambie fácilmente entre mallas metálicas, diseño visual, diseño de interacción, creación de prototipos, vista previa y uso compartido, todo en una potente herramienta.

Cuando inicie Adobe XD, verá una pantalla Inicio que proporciona acceso rápido a ajustes preestablecidos, archivos de muestra, archivos recientes y mucho más, para ayudarle a comenzar.

Flujo de trabajo general

Diseñar, crear prototipos y compartir con Adobe XD
Diseñar, crear prototipos y compartir con Adobe XD

En pocas palabras, el flujo de trabajo puede resumirse en los siguientes pasos de alto nivel:

  • Diseño: cree elementos de formato de diseño, agregue mesas de trabajo e importe recursos desde otras aplicaciones, como Adobe Illustrator y Adobe Photoshop.
  • Prototipo: selecccione objetos o mesas de trabajo del diseño y cablee interacciones entre mesas de trabajo.
  • Compartición: una vez terminado su proyecto, puede compartir o exportar su proyecto o activos del proyecto.

Nota:

Siga leyendo para obtener más detalles del flujo de trabajo general. También puede ver los siguientes tutoriales en vídeo para obtener una visión rápida de lo que puede hacer con Adobe XD.

Diseño

Design_03

Inicie Adobe XD.

Aparecerá la Pantalla de bienvenida.

Seleccione un tamaño preestablecido de las mesas de trabajo. Si desea trabajar con un tamaño personalizado, escriba la anchura y la altura, en píxeles, en los campos de texto de la opción personalizada.  Si no desea especificar ningún tamaño de inmediato, haga clic en el icono de personalizado.


Design_02

Reúna los activos de una de las siguientes maneras:

  • Use las herramientas de diseño de Adobe XD para diseñar sus activos desde cero. Para obtener más información, consulte Herramientas de dibujo y Herramientas de texto.
  • Copie sus diseños desde Photoshop, Sketch o Illustrator y péguelos en la mesa de trabajo de Adobe XD. También puede importar o arrastrar y soltar (desde el Explorador de archivos, Finder o el navegador web) un archivo JPG, SVG, PDF, PNG o GIF. Para obtener más información, consulte Trabajar con activos externos.

Design_01

Mejore los objetos del diseño. Algunas cosas que puede hacer en Adobe XD son combinar formas, enmascarar objetos, mover, redimensionar, rotar, organizar, alinear, distribuir objetos, establecer propiedades de trazo y relleno y mucho más.

Para obtener más información, consulte:


Design_04

Distribuya los elementos de diseño sobre la mesa de trabajo. Use la función Repetir cuadrícula para crear una cuadrícula a partir de contenidos existentes, sin tener que duplicarlos manualmente. Para obtener más información, consulte Crear elementos de repetición.


Design_05

Agregue mesas de diseño a cada una de las pantallas que desee definir en el prototipo. Para obtener más información, consulte Trabajo con mesas.


Prototipo

Puede crear prototipos o mallas metálicas, estableciendo vínculos entre las mesas de trabajo (pantallas) de un único archivo de Adobe XD. La creación de prototipos ayuda a los revisores a visualizar cómo los usuarios pueden navegar a través de las pantallas o páginas. También puede grabar la interacción en forma de archivo .mp3.

Prototype_01

Vincular mesas de trabajo:

Para vincular una mesa de trabajo a otra, seleccione una mesa de trabajo o un objeto de la mesa de trabajo y haga clic en la flecha de la derecha. Aparecerá un cable. Simplemente, conéctelo a otro objeto o a otra mesa de trabajo. En la ventana emergente que aparecerá, especifique las opciones de transición y la duración de la transición. Para obtener más información, consulte Crear prototipos interactivos.


Prototype_02

Obtener una vista previa de prototipos y grabarlos:

Haga clic en el icono Vista previa de la parte superior derecha de la aplicación. XD muestra una pantalla de vista previa que le permite ver las diferentes páginas y navegar por ellas. La pantalla Vista previa tiene un icono Grabar que le permite grabar el flujo entre páginas y guardarlo en formato .mp3. 

Para obtener más información, consulte Obtener una vista previa de interacciones y grabarlas.


Nota:

La grabación de prototipos no se admite en Adobe XD en Windows.

Compartir

Share

Comparta prototipos con los interesados en el proyecto utilizando una de las siguientes maneras:

  • Cree un vínculo usando el servicio Compartir en línea. Los interesados podrán ver el prototipo e interactuar con las pantallas en sus escritorios o dispositivos móviles. Para obtener más información, consulte Crear vínculos para compartir prototipos.
  • Incruste su prototipo en otros sitios web, como Behance, Wordpress o cualquier otro sitio que admita marcos incorporados. Para obtener más información, consulte Incrustar prototipos en páginas web.