Guía del usuario Cancelar

Crear diseños en perspectiva con transformaciones 3D

  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

¿Busca información para simular efectos 3D al crear experiencias envolventes e interactivas en Adobe XD? ¡Ha llegado al lugar correcto!

La función Transformaciones 3D le permite simular la profundidad y la perspectiva de un objeto en sus diseños con un mínimo esfuerzo. Combinando la capacidad de girar cualquier objeto a lo largo de su eje horizontal y vertical y aplicando profundidad a lo largo del eje Z, puede imitar efectos como animaciones 3D, maquetas en perspectiva, interacciones de volteo de tarjetas y muchos más. 

Trabajar con transformaciones 3D
Interacción de volteo creada con transformaciones 3D

Antes de continuar

Asegúrese de estar familiarizado con los flujos de trabajo de diseño y prototipo en XD y con estas limitaciones.

  • No se puede editar el espacio para relleno, pilas y cuadrículas de repetición en lienzos para grupos transformados en 3D. 
  • No puede arrastrar y soltar para reordenar los elementos de la pila en el lienzo. Los elementos solo se pueden reordenar desde el panel Capas.
  • Al girar imágenes en 3D, la degradación de las imágenes se produce en algunas imágenes.
  • Las sombras tienen un aspecto ligeramente diferente en las superficies de previsualización si los objetos de la composición tienen objetos fijos en mesas de trabajo desplazables, grupos desplazables las transformaciones 3D anidadas.
  • El tamaño de los objetos 3D transformados no cambia al cambiar el tamaño de un grupo.
  • La edición de vectores y el volteo de objetos no son compatibles con los objetos transformados en 3D. 
  • Transformaciones 3D aún no está disponibles en los flujos de trabajo de exportación/importación de SVG.
  • Transformaciones 3D no se puede aplicar a las mesas de trabajo, solo a su contenido.
  • Transformaciones 3D aún no es compatible con las especificaciones de los desarrolladores.
  • Al convertir un contenido 3D transformado en un componente principal, se restablece automáticamente a 2D.
  • Puede modificar las transformaciones 3D en instancias de componente, pero no es posible realizar ediciones globales desde el componente principal.
  • No se pueden aplicar transformaciones 3D dentro de componentes.
  • Cuando se aplican transformaciones 3D a los estados de tocar y pasar cursor por encima, las transformaciones se aplican a todos los estados de ese objeto.

Simular profundidad y perspectiva del objeto

Puede aplicar transformaciones 3D a composiciones complejas como grupos de desplazamientocuadrículas de repeticiónpilasrelleno. Con Transformaciones 3D activado, puede controlar la orientación de los objetos a lo largo de los ejes X e Y, así como aplicar profundidad a lo largo del eje Z.

Habilitar transformaciones 3D

Para habilitar Transformaciones 3D, seleccione el objeto requerido y haga clic en el  icono de Transformaciones 3D en el Inspector de propiedades.

Habilitar transformaciones 3D

mover el gizmo

Los controles de nuevo objeto aparecen en la sección Transformar del Inspector de propiedades y el icono de gizmo  está disponible en el centro del objeto seleccionado. Mueva el icono a la izquierda, a la derecha, arriba y abajo. 
Puede modificar los valores del eje en el Inspector de propiedades o girar el icono de gizmo  para girar objetos a lo largo del eje.

Rotar objetos a lo largo del eje X o Y

Después de activar el icono de Transformaciones 3D  en el Inspector de propiedades, siga estos pasos para ajustar la orientación del objeto a lo largo de los ejes X e Y:

  1. Seleccione el objeto que desea girar. 
  2. Introduzca los valores de orientación en el Inspector de propiedades o haga clic en el icono de gizmo  que aparece en el centro del objeto y arrástrelo.
  3. Al ajustar los valores, observe que los objetos comienzan a girar a lo largo del eje adecuado. 

Girar el objeto alrededor del eje X

Girar el objeto alrededor del eje X

Coloque el objeto seleccionado a lo largo del eje X.

Girar el objeto alrededor del eje Y

Girar el objeto alrededor del eje Y

Coloca el objeto seleccionado a lo largo del eje vertical.

Aplicar profundidad a lo largo del eje Z

Ahora que ha aprendido a habilitar Transformaciones 3D y a girar objetos a lo largo de los ejes X e Y, dé un paso más y explore cómo utilizar la tercera dimensión: el eje Z. 

Al diseñar una pila de tarjetas en perspectiva o crear interacciones de volteo de tarjetas, puede mover objetos en el eje Z para crear una sensación de profundidad para las capas. Vea esta ilustración animada para aprender a aplicar profundidad a lo largo del eje Z.

Mover el objeto a lo largo del eje Z

  1. Seleccione el objeto requerido.
  2. Coloque el cursor sobre el punto central del icono de gizmo .
  3. Aparece el icono de anclaje aparece y puede mover el objeto seleccionado hacia arriba y hacia abajo.

Cuestiones a las que prestar atención

  • El icono de Transformaciones 3D solo muestra u oculta los controles y el gizmo. No ayuda a crear un entorno 3D ni a desactivar las transformaciones ya aplicadas en el diseño.
  • Al cambiar el tamaño de los objetos que tienen rotación X o Y, el valor de profundidad Z también cambia automáticamente, lo que podría dar como resultado la reordenación del contenido. Por ejemplo, al diseñar un grupo de tarjetas, en perspectiva, cada tarjeta gira en el mismo ángulo, pero con una profundidad diferente. Si selecciona varias tarjetas y decide cambiar su tamaño, este cambiará según sea necesario. Sin embargo, el valor Z cambia para cada tarjeta y causa una reordenación del contenido.

  • Al cambiar el valor de profundidad Z de cualquier objeto, XD no admite métodos de ordenación de capas como Traer al frente, Enviar al fondo y reordenar desde el panel Capas.

Vídeo: ¿Cómo puedo trabajar con Transformaciones 3D en XD?

"Con Transformaciones 3D en Adobe XD, puede simular la profundidad y la perspectiva de un objeto con unos cuantos clics en el lienzo de diseño", Dani Beaumont, director de productos de Adobe XD.

Vea este vídeo para saber cómo usar Transformaciones 3D en XD.

Duración: 3 minutos.

Consejos y trucos

Ahora que ya sabe cómo trabajar con transformaciones 3D en XD, le ofrecemos algunos consejos y trucos prácticos:

  • Puede restablecer rápidamente el objeto a su estado 2D en cualquier momento. Haga clic con el botón derecho en el objeto seleccionado y en Restablecer transformaciones 3D. O bien, puede utilizar ⌥⌘T en macOS y Alt + Ctrl + T en Windows para restablecer las transformaciones 3D.
  • Puede elegir mostrar u ocultar los controles de Transformaciones 3D. Utilice ⌘T en macOS y Ctrl + T en Windows para mostrar u ocultar las transformaciones 3D.

¿Qué viene después?

Hemos comenzado con cómo habilitar y utilizar Transformaciones 3D en sus diseños. Dé un paso más y obtenga más información sobre cómo animarlas y compartirlas con diseñadores o partes implicadas para obtener comentarios.

¿Tiene alguna pregunta o idea?

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.

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

¿Nuevo usuario?