Exportar activos de diseño

Puede exportar activos, como imágenes de mapa de bits, iconos y patrones de fondo, texto y mesas de trabajo como XD a PNG, SVG, JPG y PDF. Estos activos exportados se han optimizado para su implementación en iOS, Android o las aplicaciones web.

Si utiliza XD en macOS, también puede incorporar sus diseños a integraciones de terceros, como Zeplin, Avocode, Sympli, Kite Compositor y Protopie.

Seleccionar activos y mesas de trabajo para exportar

• Lote: puede exportar por lotes los activos marcados con la opción Marcar para exportación en el Inspector de propiedades. Para exportar varios objetos en forma de un único activo, debe agrupar los objetos antes de exportarlos.
• Seleccionados: puede seleccionar y exportar activos específicos.
• Todas las mesas de trabajo: puede seleccionar todas las mesas de trabajo para exportar en un proyecto de diseño.
• After Effects: puede seleccionar el activo para exportarlo a After Effects.

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 con el botón derecho en la capa del lienzo y elija Marcar para exportación en el desplegable. 
• Abra el panel de capas y haga clic en la marca del icono de exportación  situado al lado del nombre de la capa. 

Exportar activos a diferentes formatos de archivo

Los activos son archivos de diseño que necesitan los desarrolladores para recrear en un sitio web lo que usted ha diseñado, utilizando para ello HTML/CSS/JS o lenguajes nativos como Swift o Java en aplicaciones iOS y Android.

En general, los activos más comunes son las imágenes de mapa de bits, los iconos y los motivos de fondo que se pueden exportar en estos formatos: PNG, SVG, PDF y JPG. 

Con XD 57, Adobe ha mejorado la funcionalidad de gestión de color en XD, lo que permite exportar activos JPG, PNG y PDF con representaciones de color coherentes.Para lograrlo, cambie el perfil de color del documento a sRGB. Si intenta exportar un activo desde un documento que tiene un perfil de color no gestionado, recibe un mensaje que le informa sobre una posible discrepancia de color en el activo exportado. Para obtener más información, consulte Gestión de color.

Exportar como PNG

Elija un tamaño de exportación común o específico de una plataforma, o establezca un tamaño de exportación personalizado:

• Tamaño de exportación predeterminado o personalizado: elija uno de los tamaños de exportación predeterminados: 0,5x, 1x, 1,5x, 2x, 3x, 4x. También puede ingresar tamaños de exportación personalizados desde 0.1x hasta 10x.
• Web: los activos se exportan en resoluciones 1x y 2x.
• iOS - Los activos se exportan en resoluciones 1x, 2x y 3x.
  
• Android: los activos de diseño 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 %)

Exportar como SVG

Cuando exporta objetos o mesas de trabajo como SVG, puede establecer las siguientes opciones:

Estilos visuales:

• Atributos de presentación: utiliza atributos XML separados para cada propiedad de estilo individual en cada etiqueta SVG. Este formato es necesario para usar activos de SVG con Android Studio.
• CSS interno: utiliza una sola etiqueta de estilo con clases de CSS y comparte la configuración de estilo entre objetos con los mismos estilos, por lo que los archivos generados son de menor tamaño.

Imágenes incrustadas o vinculadas:

• Incrustar: la imagen de mapa de bits está codificada en el archivo SVG.
• Vincular: la imagen de mapa de bits se almacena por separado, con una referencia al archivo SVG.

Exportar como PDF

Puede exportar activos como PDF de las formas siguientes:

• Archivo PDF único: Puede seleccionar varias mesas de trabajo o activos y exportarlos como un único archivo PDF. 
• Múltiples archivos PDF: puede seleccionar varios activos o mesas de trabajo y exportarlos como archivos PDF individuales. Se crean archivos PDF diferentes para cada uno de los activos o mesas de trabajo seleccionados.

Exportar como JPG

Cuando exporta activos como JPG, puede establecer las siguientes opciones:

Calidad: elija 20 %, 40 %, 60%, 80 % o 100 %.

Tamaño de exportación:

• Tamaño de exportación predeterminado o personalizado: elija uno de los tamaños de exportación predeterminados: 0,5x, 1x, 1,5x, 2x, 3x, 4x. También puede ingresar tamaños de exportación personalizados desde 0.1x hasta 10x.
• Web: los activos se exportan en resoluciones 1x y 2x.

Los JPG no se convierten en PDF. Las imágenes rasterizadas se importan como imágenes y, por tanto, parece que se convierten en PDF.

Exportar activos a aplicaciones de terceros

También puede llevar sus diseños desde XD a otras aplicaciones como Zeplin, Avocode, Sympli, Kite Compositor y Protopie. 

Este es un flujo de trabajo de muestra de XD en macOS con Zeplin:

Solución de problemas

¿Tiene problemas con la exportación de activos? Para solucionar problemas relacionados con la exportación, consulte ¿Por qué no puedo importar o exportar archivos en Adobe XD?

¿Tiene alguna pregunta o idea?