Ver e inspeccionar especificaciones de diseño

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 consultar la información sobre las propiedades y especificaciones, haga clic en el icono  en la barra de la derecha.

Cuando abra la pestaña de especificaciones, podrá colocar el cursor sobre 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 diseño: active esta opción para ver las cuadrículas.

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. 

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

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. 

Subintervalos de texto

Pase el ratón sobre los subintervalos dentro de un elemento de texto para resaltar subintervalos 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. 

Fragmentos de CSS

  • Para generar el código CSS, seleccione el destino de salida como Web en la ventana Compartir para 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.

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.

Actualmente, si marca un componente para su exportación, solo se puede descargar el estado activo del componente. Como solución alternativa, puede exportar y compartir los activos a través de XD.

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