Vea las especificaciones de diseño publicadas desde Adobe XD, lo que le permitirá inspeccionar y comentar los flujos, las medidas y los estilos.

La función de especificaciones de diseño es un primer enfoque para mejorar la comunicación entre diseñadores y desarrolladores. Los diseñadores pueden generar una dirección URL pública en XD para compartir con los desarrolladores. Al acceder al vínculo, los desarrolladores pueden inspeccionar y comentar los flujos, las medidas y los estilos de diseño.

Antes de empezar

Para ver una especificación de diseño, es necesario lo siguiente:

  • Un vínculo a la especificación de diseño (que deberá recibir del diseñador)
  • Navegador de escritorio y conexión a Internet. Para obtener más información sobre las versiones de navegador compatibles, consulte los Requisitos del sistema.

Nota: los navegadores móviles no se admiten/recomiendan para ver especificaciones de diseño.

Nota:

Los vínculos de especificaciones de diseño son públicos y accesibles a cualquier persona que disponga de un vínculo. Para que el acceso a las especificaciones de diseño sea más fluido, a partir del 21 de marzo de 2018 ya no será necesario un inicio de sesión con un Adobe ID.

Para obtener más información, consulte Cambiar a especificaciones de diseño usando Adobe XD.

Ver el flujo de trabajo de la experiencia del usuario final

Los desarrolladores pueden ver la secuencia y el flujo de mesas de trabajo en la vista Flujo de UX.

Esta vista de todas las pantallas de las especificaciones de diseño resulta útil. Permite al desarrollador conocer lo siguiente:

  • La cantidad de pantallas que deben desarrollarse (útil para planificar el trabajo de desarrollo). 
  • La secuencia y los flujos de las especificaciones de diseño (útiles para conocer el flujo de trabajo del usuario final).
  • La fecha en que las especificaciones de diseño se actualizaron por última vez.
Introducción a las especificaciones de diseño
Introducción a las especificaciones de diseño

En esta vista puede realizar las siguientes acciones:

  • Busque una pantalla específica por su nombre y véala. Si la pantalla está dentro de la ventana gráfica, dicha pantalla se resaltará. Si la pantalla no está dentro de la ventana gráfica, la especificación de diseño se desplaza a la pantalla.
  • Pase el puntero del ratón sobre pantallas individuales para ver cómo están conectadas entre sí. 
  • Zoom y panorámica para ver detalles específicos. En la vista Flujo de UX, una vez que todas las pantallas de las especificaciones de diseño se muestren en la ventana gráfica, ya no se puede ampliar la panorámica. 
    Métodos abreviados de teclado de zoom:
    • CMD/Ctrl + Rueda del ratón
    • CMD/Ctrl + teclas +/- para zoom
    • CMD + 0 para restablecer el zoom

Métodos abreviados de teclado para panorámica:
Espacio + clic y arrastre, o Mayús + tecla de flecha (para panorámica más rápida).

  • Otros métodos abreviados de teclado que puede usar:
    • Establezca el foco en una pantalla y use las teclas de flecha izquierda y derecha para recorrer las pantallas en la vista Flujo de UX.
    • Presione Entrar para ir a Vista de especificaciones. Presione Esc para volver a la vista Flujo de UX.
  • Haga clic en la mesa de trabajo para obtener una vista detallada de la mesa de trabajo.
  • Haga clic en Ver Comentarios para ver los comentarios de los usuarios sobre la pantalla de especificaciones de diseño.

Hay disponible ayuda en la aplicación, para guiarle al usar las especificaciones de diseño. Las notificaciones aparecen en la parte inferior de la pantalla, con sugerencias sobre las funciones de panorámica y zoom, clic para copiar y conexiones de retención. 

Inspeccionar las especificaciones de diseño

La vista predeterminada muestra los detalles de la pantalla, los colores, los estilos de carácter y los destinos utilizados en la pantalla. Puede utilizar la flecha plegable para expandir y contraer las secciones individuales.

También puede hacer clic en la mesa de trabajo para ver sus dimensiones. 

En el panel Propiedades, ubicado a la derecha de la pantalla, puede realizar las siguientes acciones:

  • Ver los detalles de la pantalla, los colores exclusivos y los estilos de carácter utilizados en dicha pantalla, así como la mesa de trabajo de destino a la que están vinculados.
  • Expandir o contraer las opciones enumeradas en el panel Propiedades.
  • Al desplazar el ratón sobre los colores o estilos de carácter del panel derecho, podrá ver las instancias en las que se han usado en la pantalla. Para copiar un color o estilo de carácter, haga clic en él. 
  • Vea los códigos de color hexadecimales y las etiquetas personalizadas de los colores utilizados en la pantalla.
  • Vea detalles de las diversas interacciones, como transiciones, superposiciones, voz y animación automática de la pantalla.
  • Ver comentarios relacionados con la mesa de trabajo. Para ver los comentarios, abra el panel de comentarios haciendo clic en el icono Ver Comentarios. El icono Ver Comentarios se agrega también, con un marcador y un número que indican el número de comentarios no resueltos sobre esa mesa de trabajo.

Nota:

Puede ver las etiquetas personalizadas solo si el diseñador ha cambiado los nombres de las etiquetas de color en el panel Activos.

Inspeccionar las propiedades de texto y copiar los estilos de carácter, contenido y mediciones de vista
Inspeccionar las propiedades de texto y copiar los estilos de carácter, contenido y mediciones de vista

Revisión y comentario de especificaciones de diseño

A partir de la versión XD 10.0 en adelante, Especificaciones de diseño tiene las mismas funciones de comentario que Prototipos. Puede comentar sobre las especificaciones de diseño, usar una chincheta de comentario para fijar la ubicación exacta del comentario y mover la chincheta si es necesario. Al navegar siguiendo un vínculo, el comentario y sus respuestas se mantienen en contexto. Un correo electrónico de notificación de comentarios enviado al autor facilita un vínculo contextual directo a la mesa de trabajo. Sus respuestas quedan reflejadas cuando el desarrollador actualice su navegador. 

También puede fijar o mover sus comentarios para indicar áreas específicas de la mesa de trabajo. Para fijar un comentario, haga clic en Colocar chincheta y luego haga clic en una ubicación específica de la mesa de trabajo. Luego escriba su comentario y haga clic en Enviar para enviar el comentario.

 También puede usar Cancelar para cancelar un comentario agregado en el campo de comentarios.

También puede cambiar de un comentario normal a un comentario fijado. Los correos electrónicos de notificación de comentario facilitan un vínculo directo a la mesa de trabajo donde se realiza un comentario, y no solo a la mesa de inicio. XD asigna un número a cada comentario fijado. Los comentarios del panel de comentarios también muestran estos números, lo que permite a los diseñadores identificar fácilmente el contexto del comentario.

Comentarios fijados
Comentarios fijados

A. Comentario fijado en la mesa de trabajo B. Comentario fijado en la sección de comentarios 
Comentario
Opciones de comentario

El autor puede ver los comentarios y marcarlos como resueltos cuando haya terminado. Puede revisar sus comentarios resueltos haciendo clic en Ver Comentarios resueltos.  Si cree que su comentario se ha marcado equivocadamente como resuelto, puede hacer clic en Mover a Sin resolver para mantener abierto el comentario.

Cambiar formatos de color

Puede cambiar los formatos de color. Así, por ejemplo, si prefiere trabajar en HSLA, use la lista desplegable para convertir el formato de color a HSLA. Este cambio es persistente en toda la sesión: se utilizan los mismos formatos de color al ver otras pantallas.

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

Inspeccionar mediciones

Puede inspeccionar las medidas de los elementos de la pantalla. Seleccione un elemento en la pantalla y observe los valores de altura y anchura.

Para averiguar el espacio entre objetos, seleccione el elemento y luego sitúe el cursor del ratón sobre otros elementos de la pantalla para ver la distancia relativa.

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

Inspeccionar propiedades de texto

Puede inspeccionar también las propiedades del texto de la pantalla. Seleccione una línea de texto y vea sus estilos de carácter. También puede copiar los estilos de carácter, los valores de color y el contenido de las especificaciones de diseño.

Adobe XD carece de unidades y se centra en las relaciones entre elementos. Entonces, por ejemplo, si diseña una mesa de trabajo para iPhone 6/7 con 375 x 667 unidades, y utiliza una letra 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, según sea la plataforma, a las mediciones base sin unidades, para que pueda conocer mejor las mediciones con la plataforma para la que está desarrollando. También puede cambiar la unidad de medida desde 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 las propiedades de la cuadrícula

Si el diseñador hubiera elegido cuadrículas de formato en el diseño, puede verlo e inspeccionarlo al ver las pantallas en especificaciones de diseño. 

Los valores indicados son los valores establecidos por el diseñador. Si pasa el cursor del ratón sobre las etiquetas de propiedades, se resaltarán en la pantalla mostrada. Puede establecer el número de columnas o cuadrados. Para desactivar cuadrículas de diseño, anule la selección de la casilla cuadrícula.

Antes de publicar el vínculo de especificaciones de diseño, asegúrese de dejar habilitadas las cuadrículas de diseño en las mesas de trabajo donde quiera que las vea el desarrollador. De forma predeterminada, las cuadrículas de diseño que no se utilizan en el diseño no aparecen en el vínculo de especificaciones de diseño.

Cuadrícula de diseño
Cuadrícula de diseño
Cuadrícula cuadrada
Cuadrícula cuadrada

Inspeccionar superposiciones

En la vista Especificaciones de diseño, los desarrolladores pueden inspeccionar las conexiones de superposición en la pantalla de flujo de UX de la pantalla o mesa de trabajo de origen.

Cuando desplace el ratón sobre las mesas de trabajo o cuando haga Mayús + clic en una mesa de trabajo o pantalla, aparecerá una conexión de línea punteada en el flujo de UX para indicar que se han aplicado las superposiciones.

Inspeccionar superposiciones
Inspeccionar superposiciones
Conexión punteada para identificar las superposiciones
Conexión punteada para identificar las superposiciones

Para inspeccionar las superposiciones aplicadas, vaya a la sección Superposiciones del panel Propiedades y haga clic en la miniatura de la sección Superposiciones, o pulse Mayús y haga clic en el punto correspondiente de las especificaciones de diseño.

Interacciones
Interacciones

Puede inspeccionar e inferir detalles de pantalla, estilos e información de destino de la superposición específica que se haya aplicado:

  • 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 pantalla.
  • Posición de superposición: muestra la posición de la superposición con referencia a la pantalla de origen en la mesa de trabajo, en formatos de 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.
  • Destinos: muestra información sobre las mesas de trabajo de destino.

Para volver a la mesa de trabajo de base, presione Esc o Cerrar superposición.

Inspeccionar elementos fijados

Para inspeccionar los elementos fijados de un diseño, haga clic en el icono de chincheta de la esquina superior de las especificaciones de diseño. Este icono indica que los elementos de diseño están fijados en la mesa de trabajo. 

Inspeccionar elementos fijados
Inspeccionar elementos fijados
Posición fijada
Posición fijada

Ver e inspeccionar puntos importantes

Para inspeccionar los puntos importantes de las especificaciones de diseño, haga clic en el artefacto mostrado en las secciones Superposiciones o Destino, o pulse Mayús y haga clic en el punto importante de las especificaciones de diseño.

En la vista Flujo de UX podrá ver una vista general de todas las pantallas de la especificación. Desde allí puede hacer clic en pantallas individuales y navegar por ellas.

Navegación entre pantallas
Navegación entre pantallas

En la parte inferior de la pantalla, haga clic en el icono Inicio para ir a la pantalla Inicio. Puede hacer clic en las flechas izquierda y derecha para moverse de una pantalla a otra. 

Si hace clic en objetos vinculados en la pantalla, podrá ver la pantalla de destino a la derecha. Para navegar por ella, haga clic en la pantalla de destino.

Para volver a la vista Flujo de UX desde la vista Especificación, presione Esc en el teclado.

Extraer activos para especificaciones de diseño

Puede ahorrar tiempo y ofrecer a los desarrolladores la posibilidad de extraer y descargar activos desde las especificaciones de diseño. Use la función para marcar capas como activos para exportación y enviarlas como vínculo de especificaciones de diseño. Los desarrolladores pueden descargar todos los activos vectoriales como activos SVG, PNG y PDF, y los activos de mapas de bits como PNG y PDF.

Marcar los activos en las especificaciones de diseño

Abra el panel Capas y seleccione una mesa de trabajo. Coloque el cursor del ratón sobre una capa y haga clic en el icono Marcar para exportación por lotes.

Marcar para exportación por lotes
Marcar para exportación por lotes

Nota:

Si desea seleccionar activos específico de grupos, haga clic en el icono de grupo para expandir el contenido del grupo y seleccionar los activos.

Compartir y descargar activos en la Web

En las especificaciones de diseño, puede proporcionar a los desarrolladores una ubicación central para descargar todos los activos seleccionados y otros detalles de la mesa de trabajo. Puede elegir los activos. Al compartir un vínculo de especificaciones de diseño con el desarrollador, todos los activos que marque para exportación quedarán disponibles en la Web para el desarrollador. Las especificaciones de diseño incluyen mapas de bits y activos vectoriales.

  1. Siga las instrucciones de la sección Marcar los activos en especificaciones de diseño.

  2. Haga clic en el icono Compartir de la parte superior derecha de la pantalla y seleccione Compartir para desarrollo.

    Seleccionar Compartir para desarrollo
    Seleccionar Compartir para desarrollo
  3. Desde el menú desplegable Exportar para, seleccione la plataforma para la exportación del diseño. Seleccione la opción Incluir activos para descarga , con lo que podrá ver el número de activos marcados, y elija Crear vínculo.

    Opción Incluir activos
    Opción Incluir activos

    Según la plataforma para la que cree el diseño, cada plataforma tiene un conjunto separado de ajustes de resolución:

    • Web: los activos se exportan en resoluciones 1x y 2x.
    • iOS: los activos se exportan en resoluciones 1x, 2x y 3x. 
    • Android: los activos se optimizan y exportan para las siguientes densidades de pantalla de Android:
      • ldpi - Baja densidad (75 %)
      • mdpi - Densidad media (100 %)
      • hdpi - Alta densidad (150 %)
      • xhdpi - Extra alta densidad (200 %)
      • xxhdpi - Extra extra alta densidad (300 %)
      • xxxhdpi - Extra extra extra alta densidad (400 %)
  4. Haga clic en el icono Abrir en el navegador para abrir el proyecto en el navegador. Seleccione una mesa de trabajo para ver los activos. El navegador muestra los activos seleccionados junto con otros detalles de la mesa de trabajo.

    Pantalla de activos seleccionados en el navegador
    Pantalla de activos seleccionados en el navegador

    Al desplazarse sobre los activos, la selección contextual resalta el activo seleccionado en azul.

  5. Para descargar, seleccione un activo individual o varios activos. También puede usar Cmd/Ctrl + A para seleccionar todos los activos o usar la tecla Mayús para selección múltiple. En la parte inferior de la pantalla, los activos se clasifican como vectores y mapas de bits.

    Descargar los activos seleccionados
    Descargar los activos seleccionados
  6. Puede cambiar el formato de los activos vectoriales a SVG, PDF y PNG, y el formato de los activos de mapa de bits a PNG y PDF. Los activos se descargan en forma de archivo .zip en la carpeta de descargas.

  7. Para descargar activos individuales, al seleccionar una capa marcada como activo, el panel Especificaciones de diseño de la Web incluye una sección de activos que ofrece una opción de descarga.

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