Exportar activos de diseño

Conozca cómo exportar activos listos para su producción de Adobe XD a los formatos PNG, SVG, JPG y PDF.

Puede exportar activos, como imágenes de mapa de bits, iconos y patrones de fondo, texto y mesas de trabajo de 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 Mac, también puede incorporar sus diseños a integraciones de terceros, como ZeplinAvocodeSympliKite Compositor y Protopie.

Exportar activos y mesas de trabajo

Mac

Seleccione un objeto o una mesa de trabajo, vaya a Archivo > Exportar o pulse Cmd + E.    

Windows

Seleccione un objeto o una mesa de trabajo y vaya a Archivo > Exportar.  

  • Lote: puede exportar por lotes los contenidos 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 menú 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 patrones de fondo que puede exportar en los siguientes formatos:

Archivo PDF único: puede seleccionar varios activos o mesas de trabajo y exportarlos como un único archivo PDF. 

Archivos PDF individuales: 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.

Al exportar activos como JPG, puede establecer el correspondiente nivel de calidad del JPG exportado. Elija cualquiera de las opciones de porcentaje de la lista desplegable Calidad, y en Exportar para, elija Diseño o Web.

Los JPG no se convierten a PDF. Las imágenes rasterizadas se importan como imágenes y, por lo tanto, parecen convertirse en archivos PDF.

Al exportar objetos o mesas de trabajo como SVG, puede establecer el estilo visual en Atributos de presentación o en CSS interno.

  • 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.

Puede guardarlos como 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.

Al seleccionar PNG, puede optar por exportar los activos en las siguientes plataformas:

  • Diseño: es la opción predeterminada, en la que el activo se exporta a PNG con una resolución 1x.
  • Web: los activos se exportan en resoluciones 1x y 2x.
  • iOS: los activos se exportan en resoluciones 1x, 2x y 3x.
    Los tamaños predeterminados de las mesas de trabajo para los diversos dispositivos iOS suponen que está diseñando en 1x, por lo que, si ha usado los valores predeterminados, deje su exportación en 1x. Sin embargo, también puede optar por diseñar en 2x multiplicando por dos la anchura y la altura de su mesa de trabajo.

  • 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 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

  1. Seleccione una mesa de trabajo o capa en su archivo XD y haga clic en Archivo > Exportar > Zeplin.

    Si tiene múltiples aplicaciones integradas con XD, el método abreviado de teclado (⌥⌘E) inicia la última integración que haya utilizado.

    Exportación de contenidos a Zeplin
    Exportación de contenidos a Zeplin

  2. Haga clic en Importar. Para reemplazar las pantallas existentes en Zeplin con el mismo nombre, seleccione Reemplazar pantallas con el mismo nombre. Zeplin la agrega como una nueva versión de esa misma pantalla, sin perder sus notas.

    Si tiene problemas al trabajar con Zeplin en XD, consulte este artículo para obtener soluciones.

Más información

Vea este tutorial para obtener más información sobre la exportación de activos de XD.

Duración: 2 minutos.

Solución de problemas

¿Tiene problemas con la exportación de activos? Lea este artículo para solucionar los problemas relacionados.

¿Tiene alguna pregunta o idea?

Pregunte a la comunidad

¿Desea que su herramienta de diseño favorita tenga flujos de trabajo de exportación adicionales? Vote o añada su solicitud en XD UserVoice
.

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