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

Las transformaciones 3D le permiten añadir componentes de diseño en espacios 3D y añaden una nueva dimensión a sus objetos de diseño.

Girando cualquier objeto a lo largo de su eje horizontal y vertical, y aplicando profundidad, 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

¿Ya está en Adobe XD?

Actualizar la aplicación

Echar un vistazo a las novedades

Pruébelo

Obtener archivo de muestra

.xd; 13 MB

Antes de continuar

Familiarícese con estas limitaciones antes de aplicar efectos 3D en sus objetos de diseño:

  • 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.

  • No se puede editar el espacio para relleno, pilas y cuadrículas de repetición en lienzos para grupos transformados en 3D. 
  • Los elementos solo se pueden reordenar desde el panel Capas. No puede arrastrar y soltar para reordenar los elementos de la pila en el lienzo.
  • 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 o las transformaciones 3D anidadas.
  • El tamaño de los objetos 3D transformados no cambia al cambiar el tamaño de un grupo.
  • No se pueden editar vectores ni voltear objetos para objetos transformados en 3D. Además, no se pueden aplicar transformaciones 3D para:
    • Especificaciones del desarrollador
    • Mesas de trabajo
    • Flujos de trabajo de exportación e importación de SVG
    • Editar vectores.

Simular profundidad y perspectiva del objeto

Habilitar transformaciones 3D

Puede aplicar transformaciones 3D a composiciones complejas como grupos de desplazamientocuadrículas de repeticiónpilasrelleno y objetos copiados y pegados en grupos transformados en 3D. Con las transformaciones 3D activadas, puede controlar la orientación de los objetos a lo largo de los ejes X e Y, y aplicar profundidad utilizando el eje Z.

Vea esta ilustración animada para aprender a activar las transformaciones 3D.

Habilitar transformaciones 3D
  1. Seleccione el objeto requerido en la sesión actual del diseño.
  2. Haga clic en el icono  en el Inspector de propiedades. Los controles de nuevo objeto aparecen en la sección Transformar del Inspector de propiedades y el icono de gizmo  está visible en el centro del objeto seleccionado.

Girar objetos

Después de activar el icono  en el Inspector de propiedades, siga estos pasos para ajustar la orientación de los objetos mediante los ejes X e Y:

  1. Seleccione el objeto que desea girar en los ejes X o Y. 
  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. Al ajustar estos valores, observe que los objetos comienzan a girar alrededor del eje 3D. 

Vea esta ilustración animada para aprender a girar objetos a lo largo de los ejes X e Y.

Girar el objeto alrededor del eje X

Girar el objeto alrededor del eje X

Coloca el objeto seleccionado a lo largo del eje horizontal.

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 mediante el eje Z

Ahora que ha aprendido a habilitar las 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. Pase el ratón sobre el punto central del gizmo y mueva el objeto seleccionado hacia arriba y hacia abajo.

Cuestiones a las que prestar atención

  • El icono  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.

Sugerencias 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.

Próximos pasos

Hemos comenzado a 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.

¿Alguna pregunta o idea?

Have a question or an idea

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