Adobe XD permite a los diseñadores de UX diseñar experiencias de usuario interactivas para aplicaciones web y móviles, utilizando una sola aplicación.
Puede realizar diseños rápidos y sencillos en las mesas de trabajo de XD. Luego, cablee las mesas de trabajo para crear un prototipo interactivo que pueda compartir e iterar con los interesados. También puede usar complementos para repetir automáticamente operaciones o partes de flujos de trabajo de diseñador que resulten tediosas, complejas o repetitivas.
Adobe XD se integra perfectamente con Photoshop, Illustrator y After Effects.
Puede continuar diseñando en sus aplicaciones preferidas, llevar los activos a XD y luego usar XD para crear y compartir prototipos. XD admite archivos SVG y de mapa de bits, sin ninguna pérdida de fidelidad. Luego puede mejorar aún más los activos en Adobe XD o usarlos para desarrollar prototipos interactivos.
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, Adobe Photoshop y Adobe After Effects. También puede usar complementos para repetir automáticamente operaciones o partes de flujos de trabajo de diseñador que resulten tediosas, complejas o repetitivas.
- Prototipo: selecccione objetos o mesas de trabajo del diseño y cree interacciones entre las mesas de trabajo.
- Compartir: una vez que su proyecto esté listo para revisar, puede compartir prototipos o especificaciones de diseño con los interesados, o bien exportarles el proyecto o los activos.
Siga leyendo para obtener más detalles sobre el diseño, creación de prototipos y compartición en XD. 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.
Inicie Adobe XD. Aparecerá la pantalla Inicio.
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 desea especificar un tamaño personalizado, haga clic en el icono Tamaño personalizado.
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, After Effects o Illustrator y péguelos en la mesa de trabajo de Adobe XD. También puede importar, arrastrar o copiar y pegar un archivo JPG, SVG, PNG o GIF desde:
- Explorador de archivos (en Windows)
- Finder (en Mac)
- Navegador web
- Portapapeles del SO
Para obtener más información, consulte Trabajar con activos externos.
Nota:
Los archivos .PDF no se pueden abrir ni importar en Adobe XD.
Mejore los objetos del diseño. Por ejemplo, combine o enmascare objetos, cambie las propiedades de trazo y relleno, use la superposición para apilar contenido sobre una mesa de trabajo de base y mueva o gire objetos, o use el redimensionamiento inteligente para diseñar activos para múltiples tamaños y diseños de pantalla. Use activos vinculados para crear y mantener una versión única de los kits de interfaz de usuario, hojas de pegatinas o guías de estilo, y compartirla entre documentos para conseguir una escalabilidad de diseño y unos complementos coherentes para automatizar las operaciones de repetición o las partes de flujos de trabajo de diseñador que sean tediosas, complejas o repetitivas.
Para obtener más información, consulte:
- Seleccionar, redimensionar y rotar objetos
- Combinar objetos usando operaciones booleanas y enmascarar objetos con formas
- Agrupar, bloquear y duplicar objetos
- Mover, alinear, distribuir y organizar objetos
- Establecer el trazo, el relleno y las sombras paralelas de objetos
- Usar el redimensionamiento inteligente y las restricciones
- Crear y administrar complementos
- Usar componentes vinculados
Distribuya sin esfuerzo elementos repetidos usando 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.
Puede usar complementos para repetir automáticamente operaciones o partes de flujos de trabajo de diseñador que resulten tediosas, complejas o repetitivas. Para obtener más información, consulte Crear y administrar complementos.
Agregue más mesas de diseño a cada una de las pantallas que necesite en el prototipo. Para obtener más información, consulte Trabajo con mesas.
Puede crear prototipos interactivos utilizando las posibilidades voz, animación automática, gestos de arrastre y transiciones temporizadas. Para obtener más información, consulte Diseño y creación de prototipos por voz en XD, Crear prototipos usando animación automática y gestos de arrastre y Usar transiciones temporizados.
Puede obtener una vista previa de la interactividad de los prototipos y, mientras lo hace, grabar la interacción en forma de archivo MP4.
Vincular mesas de trabajo:
Para vincular mesas de trabajo o establecer interactividad, seleccione una mesa de trabajo o un objeto y haga clic en la flecha de la derecha. Aparecerá un cable. Simplemente, arrastre y conecte el cable 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.
También puede usar la superposición para simular el concepto de transiciones, sin duplicar contenido por varias mesas de trabajo.
Para obtener información detallada, consulte Crear prototipos interactivos.
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 MP4.
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. Sin embargo, existe una solución alternativa. Presione las teclas Windows + G y use la grabadora nativa para grabar la pantalla Vista previa.
Comparta prototipos con los interesados en el proyecto utilizando una de las siguientes maneras:
- Publique prototipos en la Web y facilite un vínculo web o una invitación privada (Vista previa) para que los interesados puedan ver su prototipo o comentarlo. También puede generar un código incrustado que se puede utilizar para incrustar el prototipo en cualquier sitio web que admita marcos incorporados. Para obtener más información, consulte Publicar prototipos.
- Publique especificaciones de diseño y facilite un vínculo web o una invitación privada (Vista previa) a los desarrolladores. Los desarrolladores pueden inspeccionar las especificaciones de diseño en cuanto a medidas, colores y estilos de carácter, y copiarlos. Para obtener más información, consulte Publicar especificaciones de diseño para desarrolladores.
Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.