Guía del usuario Cancelar

Exportar y descargar activos desde especificaciones de diseño

Aprenda a exportar y descargar activos desde especificaciones de diseño.

Exportar activos desde especificaciones de diseño

Si marca capas para exportación e incluye recursos al publicar las especificaciones de diseño, puede descargarlos desde el vínculo de especificaciones de diseño publicado. Los activos vectoriales están disponibles en formatos SVG, PNG, PDF y JPG, mientras que los activos de mapa de bits se pueden exportar en formatos PNG, PDF y JPG.

Marcar capas para exportación

Las capas marcadas para exportación se incluyen como activos en las especificaciones de diseño. Para marcar activos para exportación, seleccione cualquier capa en el lienzo y use cualquiera de las siguientes opciones:

  • Haga clic en cualquier capa de la mesa de trabajo y luego en la casilla Marcar para exportación del menú emergente.
  • Haga clic con el botón derecho en la capa del lienzo y elija Marcar para exportación del menú emergente.
  • Utilice el método abreviado de teclado en macOS y el método abreviado de teclado en Windows OS .
  • Abra el panel de capas y haga clic en la marca del icono de exportación  situada al lado del nombre de la capa.

Para exportar varios activos, seleccione varias capas de una mesa de trabajo y haga clic en Marcar para exportación.

Opción Marcar para exportación

Publicar especificaciones de diseño con activos

Al incluir activos en el momento de publicar especificaciones de diseño y compartir el vínculo publicado con los desarrolladores, les proporciona una ubicación centralizada para descargar esos activos.

  1. Marcar capas para exportación en XD.

    Marcar capas para exportación
    Marcar para exportación

  2. Haga clic en Compartir para cambiar al modo Compartir. Seleccione Desarrollo.

    compartir diseños

  3. En el modo Diseño, seleccione los activos que desea exportar. En el Inspector de propiedades, seleccione la casilla Marcar para exportación. Los activos para exportación aparecen en el modo Compartir.

  4. En el modo Compartir, seleccione la casilla Activos descargables para marcar los recursos que vaya a exportar y haga clic en Crear vínculo.

    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 %)
  5. Para abrir las especificaciones de diseño publicadas en el navegador, haga clic en el icono Abrir en el navegador y seleccione una mesa de trabajo para ver los activos. El navegador muestra los activos seleccionados junto con otros detalles de la mesa de trabajo.

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

Descargar recursos a partir de especificaciones de diseño

Si es desarrollador, puede descargar recursos del vínculo publicado de las especificaciones de diseño que compartan con usted. Puede descargar todos los recursos descargables en una mesa de trabajo al mismo tiempo en la vista de detalles de pantalla. También puede descargar recursos uno a uno en la vista de detalles de capa.

Vista de detalles de pantalla

Al hacer clic fuera de una mesa de trabajo, se abrirá la vista de detalles de pantalla. 

En la vista de detalles de pantalla, verá todos los recursos descargables clasificados como imágenes, vídeo, animaciones y audio en la sección Activos del Inspector de propiedades.

Vista de detalles de pantalla
Vista de detalles de pantalla de una mesa de trabajo con recursos seleccionados para descargar

Para descargar recursos, haga lo siguiente en la sección Activos:

1. Haga clic para seleccionar los recursos que desee descargar a la vez:

  • Para seleccionar varios, puede utilizar la tecla Mayús.
  • Para seleccionar todos los recursos de una categoría, haga clic en uno y luego pulse CmdCtrl+A.

En la sección Activos seleccionados, figura el número de recursos seleccionados, clasificados como imágenes, vídeo y audio.

2. Haga clic en Descargar.

Los recursos se descargan en formato de archivo .zip en la carpeta Descargas del equipo. Al descargar imágenes, puede cambiar el formato de imágenes de vectores a SVG, PDF, PNG y JPG, y el formato de imágenes de mapa de bits a PNG, PDF y JPG.

Cuestiones a las que prestar atención

  • Si pasa el cursor sobre los recursos de vídeo y audio en la sección Activos, verá la extensión de cada archivo.
  • Si hay varias copias de un vídeo en la mesa de trabajo, verá solo una instancia de ese vídeo en la sección Activos. Cuando pase el cursor sobre un vídeo en la sección Activos, verá todas las instancias de dicho vídeo resaltadas en la mesa de trabajo.
  • Si hay varios vídeos que tienen la misma imagen de portada en la mesa de trabajo, verá cada instancia de esa imagen de portada en la sección Activos.
  • Cuando descargue activos de diferentes categorías a la vez, se añadirá una serie de subcarpetas para dichas categorías en la carpeta .zip descargada.
  • Solo puede descargar archivos de vídeo en el mismo formato con el que los diseñadores hayan importado su documento de diseño de XD. Para conocer los formatos de vídeo admitidos, consulte Cómo usar los vídeos.
  • En la vista de detalles de la pantalla, para un componente determinado solo aparecerá su último estado inspeccionado o el estado activo en la sección Activos para su descarga. Para descargar activos para todos los estados, seleccione la capa del componente en la mesa de trabajo y cambie a la vista de detalles de la capa.

Vista de detalles de capa

Al seleccionar una capa en una mesa de trabajo, se activa la vista de detalles de capa. En la vista de detalles de capa, solo puede descargar recursos para la capa seleccionada.

Vista de detalles de capa
La capa seleccionada tiene un vídeo, la imagen de portada y un archivo de audio vinculado disponible para descargar

Para descargar un recurso en la capa seleccionada, haga clic en la opción Descargar que hay junto a este en la sección Activos del Inspector de propiedades.

Descarga del vídeo

Cuando selecciona la capa de un vídeo en una mesa de trabajo:

  • Puede descargar el vídeo y la imagen del cartel.
  • Si el vídeo está conectado a una reproducción de audio, también podrá descargar el archivo de audio.

Descarga de Lottie

Cuando selecciona una capa de Lottie en una mesa de trabajo:

  • Puede descargar la animación de Lottie como archivo JSON.
  • Si la animación de Lottie está conectada a una reproducción de audio, puede descargar el archivo de audio.

Descarga del componente

Para descargar activos para un componente, seleccione el componente en el lienzo. Después, en el Inspector de propiedades, cambie a cada estado para descargar activos para los mismos.

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.

Descargar experiencia para XD 44 y versiones posteriores

En el caso de los vínculos publicados en XD 44 y versiones posteriores:

Al hacer clic en Descargar, se abrirá una ventana con el progreso. Una vez terminada la descarga, puede reanudar la inspección de mesas de trabajo o la navegación de una mesa de trabajo a otra.

Diálogo que muestra el progreso de la descarga
Cuadro de diálogo que muestra el progreso de la descarga en los vínculos publicados a partir de XD 44 y versiones posteriores.

Si recibe un error al descargar activos, pídale al diseñador que vuelva a publicar el vínculo y lo comparta otra vez.

Error al descargar activos
Error al descargar activos

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?