Conozca cómo inspeccionar especificaciones de diseño en XD.

Al recibir especificaciones de diseño, puede visualizar e inspeccionar atributos como colores, texto, medidas y puntos importantes de diferentes objetos de una mesa de trabajo.

Ver e inspeccionar medidas

Seleccione un objeto de la mesa de trabajo para inspeccionar sus medidas y estilos.

Para averiguar el espaciado entre objetos, seleccione un objeto y desplace el puntero sobre otros objetos de la mesa de trabajo.

Inspección de las medidas de los objetos
Inspeccionar las medidas de los objetos

Ver colores, estilos de carácter y activos

Cuando seleccione una mesa de trabajo en el vínculo de especificaciones de diseño, todos los colores exclusivos utilizados en esa mesa de trabajo se muestran en la sección Colores. Puede ver los formatos de color disponibles y usar la lista desplegable para seleccionar el formato de su elección. Por ejemplo, si prefiere trabajar en HSLA, use la lista desplegable para convertir el formato de color a HSLA. Este cambio es persistente a lo largo de toda la sesión y se utilizan los mismos formatos de color al ver otras mesas de trabajo.

Del mismo modo, puede ver todos los estilos de carácter exclusivos de una mesa de trabajo en la sección Estilos de carácter.

Si ha marcado alguna capa en la mesa de trabajo para exportación, puede ver los colores y los estilos de carácter de esas capas en la sección Activos.

Nota:

Cuando seleccione un objeto en la mesa de trabajo, los colores utilizados para ese objeto se muestran en la sección Apariencia.

Convertir colores de un formato a otro
Convertir colores de un formato a otro

Ver, inspeccionar y copiar propiedades de texto

Para inspeccionar las propiedades del texto de una mesa de trabajo, seleccione una línea de texto. También puede copiar texto y su color desde el panel Propiedades.

Adobe XD carece de unidades y se centra en las relaciones entre objetos. Por ejemplo, si diseña una mesa de trabajo para iPhone 6/7 con 375 x 667 unidades, y utiliza texto con tamaño de fuente de 10 unidades, esa relación se mantendrá, independientemente del tamaño al que se escale el diseño.

Sin embargo, las especificaciones de diseño adjuntan las unidades predeterminadas, como px, pt y dp a las mediciones base sin unidades, según sea la plataforma, para que pueda conocer mejor las mediciones con la plataforma para la que está desarrollando. También puede cambiar la unidad de medidas de una unidad a otra en las especificaciones de diseño.

Cambio de la unidad de medidas
Cambio de la unidad de medidas

Ver e inspeccionar subintervalos de texto

Si tiene elementos de texto con varios estilos, puede desplazarse sobre los subintervalos de los elementos de texto. En ese caso, las especificaciones de diseño resaltan los subintervalos similares de dentro del elemento de texto con los mismos estilos y permiten acceder a sus propiedades individuales desde el Inspector de propiedades.  

Atributos de subtexto en un texto mayor
Atributos de subintervalos en un texto mayor

Ver y copiar fragmentos de CSS

Puede ver y copiar el código CSS de su diseño desde la sección Fragmentos de CSS. El código CSS se genera automáticamente cuando selecciona Web como destino de salida en la ventana Compartir para desarrollo cuando se publican especificaciones de diseño.

Para copiar y pegar el fragmento de código en sus archivos CSS, presione y arrastre los fragmentos de CSS, cambie a su editor de código y péguelo.

Fragmentos de CSS
Fragmentos de CSS

Ver e inspeccionar las propiedades de la cuadrícula de diseño

Para ver las cuadrículas de diseño, active las Cuadrículas de diseño en el Inspector de propiedades. Esta opción activa las cuadrículas de diseño para todas las mesas de trabajo de las especificaciones de diseño.

Use el botón de alternancia para eliminar las cuadrículas de diseño de la mesa de trabajo. Utilice el regulador de Opacidad para controlar la transparencia de la cuadrícula de diseño.

Si ha configurado los parámetros en las Cuadrículas de diseño, desplace el puntero sobre esos parámetros para resaltarlos en la mesa de trabajo que se muestra.

Nota:

Las especificaciones de diseño no muestran cuadrículas cuadradas.

Antes de publicar un vínculo de especificaciones de diseño, asegúrese de habilitar las cuadrículas de diseño en las mesas de trabajo relevantes. De forma predeterminada, si no ha usado cuadrículas de diseño en los diseños, estas no aparecen en el vínculo de especificaciones de diseño.

Propiedades de la cuadrícula de diseño
Propiedades de la cuadrícula de diseño

Ver e inspeccionar superposiciones

En la vista de especificaciones de diseño, puede inspeccionar las conexiones superpuestas en la pantalla Flujo de UX.

Para inspeccionar las superposiciones aplicadas, vaya a la sección Interacciones del Inspector de propiedades y haga clic en el elemento mostrado, o presione Mayús y haga clic en el punto correspondiente de las especificaciones de diseño. 

Ver e inspeccionar superposiciones
Ver e inspeccionar superposiciones

Puede inspeccionar los detalles de la mesa de trabajo, los estilos y la información de destino para la superposición aplicada:

  • Tamaño de ventana gráfica: muestra las dimensiones del área visible, que cambia según el tamaño del dispositivo utilizado para acceder a la página.
  • Tamaño del diseño: muestra las dimensiones del diseño de la mesa de trabajo.
  • Posición de superposición: muestra la posición de la superposición con referencia a la mesa de trabajo de origen, en formatos px, pt y dp.
  • Colores: muestra los colores utilizados en los formatos RGBA, Hex y HSLA.
  • Estilos de carácter: muestra los estilos de carácter en tamaños px, pt y dp. El formato de la posición de superposición cambia según el estilo de carácter que se haya establecido.
  • Interacciones: muestra información sobre las interacciones y acciones asociadas con la mesa de trabajo de destino.

Para volver a la mesa de trabajo de origen, presione Esc o haga clic en Cerrar superposición en la pantalla.

Ver e inspeccionar objetos fijados

En las especificaciones de diseño, los objetos fijados muestran un icono de chincheta en su esquina superior izquierda al hacer clic en ellos en la mesa de trabajo. 

Inspeccionar objetos fijados
Inspeccionar objetos fijados

Ver e inspeccionar puntos importantes

Para ver puntos importantes definidos en la mesa de trabajo, mantenga presionada la tecla Mayús. Para inspeccionar un punto importante, haga clic en el elemento mostrado en la sección Interacciones o haga Mayús más clic en el punto importante.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

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