Guía del usuario Cancelar

Crear prototipos interactivos

Buscar
XD

XD

Abrir aplicación
  1. Guía del usuario de Adobe XD
  2. Introducción
    1. Novedades de Adobe XD
    2. Preguntas habituales
    3. Diseñar, crear prototipos y compartir con Adobe XD
    4. Gestión de color
    5. Requisitos del sistema
      1. Requisitos de hardware y software
      2. Adobe XD, Big Sur y Apple Silicon | macOS 11
    6. Conceptos básicos del espacio de trabajo
    7. Cambiar el idioma de la aplicación en Adobe XD
    8. Acceder a kits de diseño de interfaz de usuario
    9. Accesibilidad en Adobe XD
    10. Métodos abreviados de teclado
    11. Consejos y trucos
  3. Diseño
    1. Mesas de trabajo, guías y capas
      1. Empezar a usar mesas de trabajo
      2. Usar guías y cuadrículas
      3. Crear mesas de trabajo con desplazamiento
      4. Trabajar con capas
      5. Crear grupos de desplazamiento
    2. Formas, objetos y trazados
      1. Seleccionar, redimensionar y rotar objetos
      2. Mover, alinear, distribuir y organizar objetos
      3. Agrupar, bloquear, duplicar, copiar y voltear objetos
      4. Establecer el trazo, el relleno y las sombras paralelas de objetos
      5. Crear elementos repetidos
      6. Crear diseños en perspectiva con transformaciones 3D
      7. Editar objetos utilizando operaciones booleanas
    3. Texto y fuentes
      1. Trabajar con herramientas de dibujo y texto
      2. Fuentes en Adobe XD
    4. Componentes y estados
      1. Trabajar con componentes
      2. Trabajar con componentes anidados
      3. Añadir varios estados a componentes
    5. Máscaras y efectos
      1. Crear una máscara con formas
      2. Usar efectos de desenfoque
      3. Crear y modificar degradados
      4. Aplicar efectos de mezclas
    6. Maquetación
      1. Redimensionado interactivo y restricciones
      2. Establecer relleno fijo para componentes y grupos
      3. Crear diseños dinámicos con pilas
    7. Vídeos y animaciones de Lottie
      1. Cómo usar los vídeos
      2. Crear prototipos mediante vídeos
      3. Usar animaciones de Lottie
  4. Prototipo
    1. Crear prototipos interactivos
    2. Animar prototipos
    3. Propiedades de objetos compatibles con la animación automática
    4. Crear prototipos con teclado y mando de juego
    5. Crear prototipos utilizando comandos de voz y reproducción
    6. Crear transiciones temporizadas
    7. Añadir superposiciones
    8. Diseñar prototipos de voz
    9. Crear vínculos de anclaje
    10. Crear hipervínculos
    11. Previsualizar diseños y prototipos
  5. Compartir, exportar y revisar
    1. Compartir mesas de trabajo seleccionadas
    2. Compartir diseños y prototipos
    3. Establecer permisos de acceso de vínculos
    4. Usar prototipos
    5. Revisar prototipos
    6. Trabajar con especificaciones de diseño
    7. Compartir especificaciones de diseño
    8. Inspeccionar especificaciones de diseño
    9. Controles de las especificaciones de diseño
    10. Revisar y comentar especificaciones de diseño
    11. Exportar activos de diseño
    12. Exportar y descargar activos de especificaciones de diseño
    13. Grupos compartidos para empresas
    14. Hacer copias de seguridad de recursos de XD o transferirlos
  6. Sistemas de diseño
    1. Sistemas de diseño con Bibliotecas Creative Cloud
    2. Trabajar con activos de documentos en Adobe XD
    3. Trabajar con Bibliotecas Creative Cloud en Adobe XD
    4. Migrar activos vinculados a Bibliotecas Creative Cloud
    5. Trabajar con tokens de diseño 
    6. Usar activos de Bibliotecas Creative Cloud
  7. Documentos en la nube
    1. Documentos en la nube en Adobe XD
    2. Colaborar y coeditar diseños
    3. Coeditar documentos que compartan con usted
  8. Integraciones y complementos
    1. Trabajar con activos externos
    2. Trabajar con activos de diseño de Photoshop
    3. Copiar y pegar activos desde Photoshop
    4. Importar o abrir diseños de Photoshop
    5. Usar activos de Illustrator en Adobe XD
    6. Abrir o importar diseños de Illustrator
    7. Copiar vectores de Illustrator en XD
    8. Complementos para Adobe XD
    9. Crear y administrar complementos
    10. Integración de Jira para XD
    11. Complemento Slack para XD
    12. Complemento Zoom para XD
    13. Publicar diseño de XD en Behance
  9. XD para iOS y Android
    1. Vista previa en dispositivos móviles
    2. Preguntas frecuentes de Adobe XD para dispositivos móviles
  10. Solución de problemas
    1. Problemas conocidos y resueltos
      1. Problemas conocidos
      2. Problemas resueltos
    2. Instalación y actualizaciones
      1. XD aparece como incompatible en Windows
      2. Código de error 191
      3. Código de error 183
      4. Problemas al instalar complementos de XD
      5.  Solicitud para desinstalar y volver a instalar XD en Windows 10
      6. Problemas con la migración de preferencias
    3. Inicio y cierre inesperado
      1.  XD se cierra al iniciar la aplicación en Windows 10
      2.  XD se cierra al cerrar sesión en Creative Cloud
      3. Problema con el estado de suscripción en Windows
      4. Aviso de aplicación bloqueada al iniciar XD en Windows
      5. Generación de volcados de fallos en Windows
      6. Recopilación y uso compartido de registros de errores
    4. Documentos en la nube y bibliotecas Creative Cloud
      1. Problemas con documentos en la nube de XD
      2. Problemas con componentes vinculados
      3. Problemas con bibliotecas y enlaces
    5. Crear prototipos, publicar y revisar
      1. No se pueden grabar interacciones de prototipos en macOS Catalina
      2. Problemas con flujos de trabajo de publicación
      3. Los vínculos publicados no aparecen en los navegadores
      4. Los prototipos no se renderizan correctamente en los navegadores.
      5. El panel de comentarios aparece repentinamente en los vínculos compartidos
      6. No es posible publicar bibliotecas
    6. Importar, exportar y usar otras aplicaciones
      1. Importar y exportar en XD
      2. Archivos de Photoshop en XD
      3. Archivos de Illustrator en XD
      4. Exportar a After Effects desde XD
      5. Archivos de Sketch en XD
      6. Aplicaciones de terceros que no aparecen en Exportar

Descubra cómo crear prototipos interactivos que otras personas pueden usar para probar, optimizar y perfeccionar la experiencia del usuario.

Una vez que haya completado el diseño de sus pantallas, puede visualizar cómo los usuarios pueden usar su aplicación o sitio web creando un prototipo interactivo.

Puede conectar las pantallas en la secuencia de navegación que desee y organizar múltiples flujos conectando 2 o más mesas de trabajo. Una vez que se han configurado las pantallas, puede compartir cada flujo como vínculo compartible para su revisión, recopilar comentarios y publicarlos en diversas superficies de destino de forma inmediata.

Establecer la pantalla Inicio

La pantalla Inicio es la primera pantalla de su aplicación o sitio web. Sus usuarios comienzan a navegar por la aplicación o el sitio web desde la pantalla Inicio.

Además, cuando obtiene una vista previa de su prototipo y no hay nada seleccionado, la vista previa comienza por la pantalla Inicio. Es decir, de forma predeterminada, la pantalla Inicio es la primera mesa de trabajo a la que se agrega un cable.

  1. Cambie a modo Prototipo.

  2. Haga clic en la mesa de trabajo que desea establecer como pantalla Inicio. Aparecerá un icono de inicio gris en la esquina superior izquierda.

  3. Haga clic en el icono Inicio. Se volverá de color azul, indicando que la mesa de trabajo ha quedado configurada correctamente como pantalla Inicio.

    Establecer como opción de pantalla Inicio

    Pantalla Inicio establecida

    Para establecer una mesa de trabajo diferente como pantalla Inicio, simplemente haga clic en el icono Inicio asociado con esa mesa de trabajo. Para ver todas las mesas de trabajo después de su publicación, asegúrese de vincular todas las mesas de trabajo correspondientes.

Configurar varios flujos en el proyecto

Utilizar varios flujos permite crear y compartir varias versiones de un diseño desde el mismo documento o en el mismo archivo y aprovechar el mismo conjunto de mesas de trabajo en muchos prototipos o especificaciones de diseño. Cada flujo retiene su propio conjunto de cables y comparte detalles para que pueda realizar cambios y volver a publicar sin tener que deshacer y rehacer todos los ajustes cada vez.

Si desea crear versiones del diseño, establezca una segunda mesa de trabajo principal, conéctelas y comparta vínculos únicos para cada conjunto. Las mesas de trabajo de inicio funcionan como punto de partida para el diseño, en las que puede arrastrar cables para conectar diferentes pantallas.
Utilice el mismo conjunto de mesas de trabajo en varios prototipos sin tener que duplicar el trabajo. Realice cambios en los diseños y actualice los vínculos en la misma página.

Otro ejemplo de la configuración de distintos flujos es cuando se diseña un sitio web dirigido a varias plataformas, como móvil, escritorio, tableta, etc. Es posible definir y crear varios flujos de interacción de modo que en cada flujo se represente un recorrido del usuario y posteriormente se comparte cada flujo individual con los responsables de departamento para recopilar comentarios.

Continúe leyendo para obtener información sobre cómo configurar una o varias mesas de trabajo principales y definir varios flujos.

Vinculación de elementos interactivos a pantallas de destino
Configurar varios flujos

  1. Cambie a modo Prototipo.
  2. Configure la mesa de trabajo de inicio para definir el punto de partida del diseño.
  3. Escriba un nombre para cada flujo para organizarlos mejor.
  4. Si el diseño consiste en varios flujos, puede configurar las mesas de trabajo de inicio para cada uno de esos flujos.
  5. Haga clic en el objeto o en las mesas de trabajo siguientes que desee vincular. Aparece un controlador de conexión con una flecha desde el objeto o la mesa de trabajo. Haga clic y arrastre para soltar el controlador en el objeto o la mesa de trabajo de destino.

Agregar interacciones para objetos y mesas de trabajo

Una vez que están definidas y conectadas las pantallas, puede hacer que los prototipos sean más atractivos introduciendo desencadenadores y acciones para objetos y mesas de trabajo. Para ello:

  1. Seleccione un objeto y haga clic en + a su lado, o haga clic en + en el Inspector de propiedades. Establezca  Disparadores y Tipo de acción. Una vez que se elija el tipo de acción, configure las opciones específicas para dicho tipo de acción, incluido Destino (si corresponde).

    Por ejemplo, si desea mejorar la experiencia de navegación para sus prototipos, puede optar por agregar vínculos de anclaje configurando Desplazarse a como un tipo de acción. Para obtener más información al respecto, consulte Crear vínculos de navegación dentro de una mesa de trabajo.     

    Opciones de prototipos
    Opciones de prototipos

    A. Establecer en Tocar, Arrastrar, Pasar por encima, Hora, Teclas y Mando de juego, Voz o Fin de reproducción. B. Establecer el tiempo de espera en segundos. C. Establezca Transición, Animación automática, Superponer, Desplazarse a, Mesa de trabajo anterior, Reproducción de audio, Reproducción de voz, Reproducción de vídeo o Reproducción de Lottie. D. Cambiar la mesa de trabajo de destino si es necesario. E. Establecer en Disolver o Ninguno. F. Seleccionar el efecto de suavizado. G. Introducir la duración en segundos. 

  2. Si selecciona Tocar como el desencadenador, ahora puede combinar Transición con una acción sin transición como Reproducción de voz o audio. Para agregar la segunda acción, establezca el primer botón Acción + en el Inspector de propiedades en Transición, Animación automática, Superposición, Desplazarse a, o Mesa de trabajo anterior y establezca el segundo botón Acción + en Reproducción de audio o Reproducción de voz.

    Si selecciona Reproducción de audio o Reproducción de voz como la primera acción, no puede agregar una segunda acción

  3. También puede combinar múltiples desencadenadores para crear interacciones avanzadas sin distribuir los desencadenadores entre diferentes objetos en una mesa de trabajo. Para hacerlo, use el botón + en el lienzo o haga clic en + en el Inspector de propiedades, y seleccione Desencadenadores, Acción y Destino.

    Nota:

    Recuerde que puede aplicar los desencadenadores Tocar, Arrastrar, Pasar por encima y Hora solo una vez y Voz y Teclas y Mando de juego muchas veces. 

    Combinar múltiples desencadenadores
    Combinar múltiples desencadenadores


    Puede lograr una simulación realista del desplazamiento en sus diseños. Para mantener los elementos de diseño en una posición fija, seleccione Fijar posición al desplazarse en el Inspector de propiedades.

  4. Para obtener una vista previa del prototipo, haga clic en la vista previa del escritorio  .

Puede organizar y publicar cada flujo como un vínculo de uso compartido para su revisión, recopilación de comentarios. Para obtener más información sobre cómo compartir varios flujos, consulte Compartir diseños y prototipos.

Sugerencias

  • Para editar o eliminar un cable, seleccione los cables que desea editar o eliminar. También puede seleccionar una sola interacción desde el Inspector de propiedades y editar sus interacciones.
  • Para ocultar los cables temporalmente en el modo Prototipo, mantenga pulsada la tecla Opción (macOS) o Alt (Windows). 
  • Pase el ratón sobre el cable para ver una sugerencia de herramienta que indica el número de interacciones y su tipo. 
  • Para aplicar la interacción definida a otro objeto, seleccione el objeto o la mesa de trabajo, seleccione copiar, haga clic en el objeto o mesa de trabajo de destino y en el menú de contexto del botón derecho, seleccione Pegar interacción.

Vínculo a la mesa de trabajo anterior

  1. En el modo Prototipo, seleccione el elemento o la mesa de trabajo que desee vincular. Cuando aparezca una pequeña flecha, haga clic y arrastre la flecha a la mesa de trabajo anterior o seleccione Acción > Mesa de trabajo anterior.

    Seleccionar la mesa de trabajo anterior
    Seleccionar la mesa de trabajo anterior

  2. Cuando la Acción se establece en Mesa de trabajo anterior, aparece un icono de seguir al final del cable.

    Establecer el destino
    Establecer el destino

    Nota:

    Si desea desvincular el cable de una mesa de trabajo, haga clic en cualquier parte del cable y arrástrelo fuera de la mesa de trabajo de destino.

  3. Utilice la ventana de vista previa para obtener una vista previa del vínculo.

Desvincular mesas de trabajo

  1. En el modo Prototipo, seleccione Destino > Ninguno.

    También puede hacer clic en la conexión y arrastrarla fuera de la mesa de trabajo de destino.

    Desvincular mesas de trabajo
    Desvincular mesas de trabajo

    Nota:

    La opción Ninguno solo está disponible si la mesa de trabajo está vinculada a un elemento de destino.

  2. Obtenga una vista previa de las vinculaciones en un navegador. Se eliminan todos los vínculos de destino previamente establecidos desde el elemento.

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 ventana Vista previa.

Para probar el prototipo y las interacciones, puede obtener una vista previa del prototipo. También puede grabar la vista previa y guardar la grabación como archivo .mp4. Luego puede elegir compartir el archivo .mp4 con los interesados, quienes podrán ver (o revisar) la visita del prototipo y facilitar comentarios.

  1. Haga clic en el icono Vista previa de escritorio. La ventana Vista previa aparecerá, mostrando la mesa de trabajo en el foco.

    Para probar la navegación entre pantallas, haga clic en los elementos interactivos.

    Puede editar el diseño y las interacciones en su prototipo mientras realiza una vista previa en la ventana de vista previa. Los cambios quedan disponibles instantáneamente para su previsualización.

  2. Para grabar la interacción, haga clic en el icono Grabar de la ventana de vista previa. Para finalizar la grabación, pulse Esc o vuelva a hacer clic en el icono Grabar.

    .
    Grabar interacciones en prototipos

  3. Especifique un nombre y una ubicación donde desee guardar la grabación. La grabación se guarda como archivo .mp4.

Más información

Vea el siguiente vídeo para aprender a usar las funciones de interactividad: 

Recursos relacionados

Póngase en contacto con nosotros

Pregunte a la comunidad

Si tiene alguna pregunta que hacer o una idea que compartir, venga y participe en la Comunidad de Adobe XD. Nos gustaría conocer sus comentarios y ver sus creaciones.

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Vínculos rápidos

Ver todos los planes Administrar los planes
Ver vínculos rápidos
Ocultar vínculos rápidos

Avisos legales    |    Política de privacidad en línea