Guía del usuario Cancelar

Ver e inspeccionar especificaciones de diseño

  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. Requisitos del sistema
      1. Requisitos de hardware y software
      2. Adobe XD, Big Sur y Apple Silicon | macOS 11
    5. Conceptos básicos del espacio de trabajo
    6. Cambiar el idioma de la aplicación en Adobe XD
    7. Acceder a kits de diseño de interfaz de usuario
    8. Accesibilidad en Adobe XD
    9. Métodos abreviados de teclado
    10. Consejos y trucos
    11. Opciones de suscripción de Adobe XD
    12. Cambios en el plan de inicio de XD
  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
  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 ver e inspeccionar atributos como colores, texto, medidas, estados de componentes, puntos resaltados de interacción y demás en especificaciones de diseño.

En un vínculo compartido de especificaciones de diseño, puede ver y probar el prototipo, añadir comentarios y valoraciones según el contexto y obtener información sobre medidas y especificaciones del diseño.

Pestañas en el vínculo de especificaciones de diseño
Pestañas en el vínculo de especificaciones de diseño

El vínculo de especificaciones de diseño se abre en el modo de prototipo de manera predeterminada. Para obtener la información de las propiedades y especificaciones, abra la pestaña de especificaciones de diseño haciendo clic en el icono de la parte derecha.

Cuando abra la pestaña de especificaciones de diseño, podrá seleccionar los elementos e inspeccionarlos en el lienzo para conocer sus atributos como colores, texto, medidas, estados y demás propiedades que se indiquen en el Inspector de propiedades.

Haga clic en el icono {} para cambiar a la pestaña de variables. Esta pestaña está disponible cuando el diseñador publica un vínculo de especificaciones de diseño para web. Cuando el diseñador establece nombres de variables para colores y estilos de caracteres en un diseño, puede ver la información del token de diseño en la pestaña de variables. 

Siga leyendo para saber cómo ver e igualar los atributos en especificaciones de diseño.

Detalles de pantalla y propiedades

A. Detalles de pantalla: seleccione un objeto para inspeccionar las medidas y el espaciado.

B. Colores: examine los colores marcados para exportar.

C. Propiedades de la cuadrícula de maquetación: actívelas para ver las cuadrículas.

Utilice el regulador Opacidad para ajustar la transparencia de los colores.

Texto y apariencia

A. Propiedades de texto: seleccione una línea del texto para ver sus propiedades en las que figuran las unidades de medida predeterminadas, como px, pt y dp.

B. Apariencia: revise los colores que se han usado en un objeto o texto en la sección Apariencia. 

 Si marca una capa para exportar en la aplicación de XD, los colores utilizados en esa capa no aparecerán en la vista de detalles en pantalla.

Formas

Inspeccionar formas

Seleccione una forma para inspeccionar los atributos siguientes:

  • Anchura, altura y rotación.
  • Atributos de aspecto, como colores, tamaño del borde, guiones, espacios, trazos y opacidad.

Imágenes

Inspeccionar imágenes

Seleccione una imagen para inspeccionar los atributos siguientes:

  • Anchura, altura y rotación.
  • Opacidad.

Vídeos

Inspeccionar vídeo

Seleccione un vídeo para inspeccionar los atributos siguientes:

  • Anchura, altura y rotación.
  • Nombre de imagen de póster.
  • Reproducción automática, reproducción en bucle y configuración de audio.
  • Si el vídeo se va a recortar, muestra la hora a la que el clip de vídeo debe comenzar y terminar. 
  • Opacidad.

Animaciones de Lottie

Inspeccionar vídeo

Seleccione una animación de Lottie para inspeccionar los atributos siguientes:

  • Anchura, altura y rotación.
  • Configuración de la reproducción automática y la reproducción en bucle.
  • Opacidad.
  • Propiedades de CSS.
  • Interacciones.

Capas ocultas

Capas ocultas

Pase el ratón por encima del área específica y haga clic en ella con el botón derecho para que aparezca la lista de capas y sus detalles contextuales en ese punto de píxeles. 

Texto de subrango

Texto de subrango

Pase el ratón sobre los subrangos dentro de un elemento de texto para resaltar subrangos similares en dicho elemento de texto.

Superposiciones

Haga clic en los puntos resaltados de interacción para ver los detalles, los estilos, el diseño y el tamaño de la ventana gráfica en la mesa de trabajo, la posición de la superposición, los colores, los estilos de caracteres y la información de destino de la superposición aplicada. 

Puntos resaltados de interacción

Mantenga pulsada la tecla Mayús para ver los puntos resaltados de interacción. Para inspeccionarlos, haga clic en el elemento que aparece en la sección Interacciones o pulse Mayús y haga clic en los puntos de resaltado de interacción. 

Hipervínculos

Hipervínculos de objetos

Inspección de hipervínculos de objeto

  • Cuando seleccione un objeto en la mesa de trabajo, podrá ver todos sus hipervínculos en la sección Interacciones del Inspector de Propiedades.
  • Mueva el puntero sobre un hipervínculo en la sección Interacciones para identificar el objeto asociado en la mesa de trabajo.
  • Para copiar la URL de un hipervínculo al portapapeles, en la sección detalles del objeto, haga clic en el hipervínculo.
  • Al hacer clic en un hipervínculo en la sección Interacciones, el enlace se abre. Para copiar la URL del hipervínculo en la sección Interacciones, haga clic en el mismo con el botón derecho del ratón.
  • En la sección Interacciones, cuando haga clic en un hipervínculo que disponga de un protocolo diferente a https mailto, no disponga de un protocolo o presenta un dominio no válido, la URL no se abre. Recibirá un mensaje de error que le aparecerá en la parte inferior de la pantalla.
  • Si se definen en un objeto múltiples interacciones del hipervínculo, no puede copiarlas desde la sección de detalles del objeto. Haga clic con el botón derecho del ratón en los hipervínculos en la sección Interacciones para copiarlas.

Hipervínculos de texto

Inspección de hipervínculos de texto

  • Cuando seleccione un objeto del texto en una mesa de trabajo, el Inspector de Propiedades (tanto de las secciones Interacciones y detalles del objeto) muestras cualquier interacción del hipervínculo definidas para dicho objeto como un todo. 
  • Es posible inspeccionar las interacciones del hipervínculo definidas para el objeto del texto como si inspeccionara cualquier hipervínculo del objeto.
  • Cuando seleccione texto (texto del subrango) dentro del objeto y si el texto dispone de un hipervínculo separado, la sección de detalles del objeto refleja esa URL del hipervínculo. Sin embargo, la sección Interacciones continúa mostrando el hipervínculo y otras interacciones definidas por el objeto.
  • Para copiar la URL del hipervínculo del texto de subrango al portapapeles, haga clic en la sección detalles del objeto.

Para obtener más información acerca de hipervínculos en XD, consulte Crear hipervínculos.

Fragmentos de código

Código CSS

Inspección del código CSS

  • Para generar el código CSS, en la aplicación XD, seleccione Exportar para sitio Web en Compartir > desarrollo y publique las especificaciones de diseño.
  • Puede ver y copiar el código CSS de su diseño en la sección Fragmentos de CSS.
  • Para copiar y pegar el fragmento de código, pulse y arrastre los fragmentos, abra su editor de código y péguelo.

Código HTML

Inspección del código HTML de Lottie y vídeo

  • Para generar el código HTML para Lottie y los archivos de vídeo, en la aplicación XD, seleccione Exportar para sitio Web in Compartir desarrollo y publique las especificaciones de diseño.
  • Es posible copiar el código HTML desde la sección HTML del Inspector de Propiedades.
  • Para copiar y pegar el fragmento de código, pulse y arrastre los fragmentos, abra su editor de código y péguelo.

Estados de componentes

Estados de componentes en especificaciones de diseño
Estados de componentes en especificaciones de diseño

  • Seleccione un objeto en la mesa de trabajo y, si el objeto seleccionado es un componente, podrá inspeccionar sus diferentes estados. 
  • Para ver los distintos estados del componente seleccionado en la mesa de trabajo, haga clic en las opciones de la lista Componente en el Inspector de propiedades.  

  • En la sección Interacciones, examine las interacciones asociadas al estado activo del componente seleccionado. 
  • Haga clic en el estado inactivo del componente de la lista para ver los estados en la mesa de trabajo y sus interacciones.

 No puede descargar todos los estados de un componente descargable. En la aplicación XD, si el diseñador marca varias instancias de un componente para exportar, solo se exportará la última instancia en el panel Capas.

Más información

Para obtener más información sobre cómo inspeccionar especificaciones de diseño en XD, vea este vídeo.
Duración: 8 minutos

¿Qué viene después?

Ya conoce los conceptos básicos sobre cómo ver e inspeccionar especificaciones de diseño. Dé un paso más y conozca cómo revisar especificaciones de diseño y extraer activos de especificaciones de diseño.

¿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 que nos dejara sus comentarios y ver sus creaciones.

Logotipo de Adobe

Inicia sesión en tu cuenta