Conozca cómo exportar activos listos para producción desde Adobe XD a archivos PNG, SVG, JPG y PDF.

Puede compartir activos listos para producción con desarrolladores para usarlos en sitios web o aplicaciones móviles. Los activos de diseño pueden exportarse desde XD a PNG, SVG, JPG y PDF, optimizados para implementación en iOS, Android o la Web.

Puede exportar activos o texto específicos, mesas de trabajo específicas o todas las mesas de trabajo del proyecto. Si está utilizando XD en Mac, también puede exportar activos a otras aplicaciones. Para obtener más información, consulte Integración con terceros.

Exportación de mesas de trabajo y activos de diseño

  1. Para exportar activos de diseño en Mac, seleccione Archivo > Exportar. En Windows, haga clic en el menú Hamburguesa y luego en Exportar.

    Si tiene mesas de trabajo seleccionadas en el panel Capas, haga clic con el botón derecho y seleccione Exportar.

    Están disponibles las siguientes opciones de exportación:

    • Lote: exportar activos que están marcados usando la opción Marcar para exportación.
    • Seleccionados: exportar activos seleccionados.
    • Todas las mesas de trabajo: exportar todas las mesas de trabajo del diseño.

    Para obtener información sobre cómo incluir activos en las especificaciones de diseño, consulte Exportar activos desde especificaciones de diseño

    Opciones de exportación de activos y mesas de trabajo

    Nota:

    Para exportar varios objetos en forma de un único activo, debe agrupar los objetos antes de exportarlos.

  2. Seleccione una plataforma de destino (Web, iOS o Android) y el formato de archivo (PNG, SVG, JPG o PDF).

    Para obtener más información sobre las opciones de exportación, consulte:

  3. Para guardar los archivos de salida, especifique el directorio.

  4. Si se le solicita, especifique la resolución con la que se diseñaron los activos. Si no está seguro de la resolución, deje el ajuste en valor predeterminado (1x).

  5. Haga clic en Exportar.

Exportar activos de diseño a PNG

  1. Para exportar activos de diseño como PNG en Mac, seleccione Archivo > Exportar. En Windows, haga clic en el menú Hamburguesa y luego en Exportar.

  2. Haga clic en la lista desplegable que se encuentra junto a la opción de formato y seleccione PNG. XD exporta todas las resoluciones asociadas para ese objeto.

  3. Seleccione la plataforma a la que desea exportarlos: Diseño, Web, iOS o Android y haga clic en Exportar.

Opciones de exportación al exportar como PNG
Opciones de exportación al exportar como PNG

Diseño

Diseño es la opción predeterminada, en la que el activo se exporta a PNG con resolución 1x.

Web

Los activos se exportan con resoluciones 1x y 2x.

iOS

iOS tiene tres tamaños de exportación. Los activos se exportan con 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 doblando la anchura y la altura de su mesa de trabajo.

Utilice la siguiente infografía para conocer cómo se exportan sus activos de diseño para iOS al diseñar en 1x y 2x.

Exportar activos como PNG para iOS
Exportar activos como PNG para iOS

Android

Los activos sede 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 %)

Utilice la siguiente infografía para conocer cómo se exportan sus activos de diseño para Android al diseñar con diferentes resoluciones.

Opciones de exportación al exportar como PNG para Android
Opciones de exportación al exportar como PNG para Android

Exportar activos de diseño a SVG

  1. Para exportar activos de diseño como PNG en Mac, seleccione Archivo > Exportar. En Windows, haga clic en el menú Hamburguesa y luego en Exportar.

  2. Haga clic en la lista desplegable que se encuentra junto a la opción de formato y seleccione SVG.

  3. Configure las opciones de estilo y guárdelas como imágenes incrustadas o vinculadas.

    • Estilo: elija cómo se almacena la información de estilo visual en el marcado SVG como Atributos de presentación o CSS interno. El estilo predeterminado para SVG está establecido en Atributos de presentación, ya que mejora la compatibilidad con herramientas de desarrolladores comunes, como Android Studio.
      • 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 CSS y comparte la configuración de estilo entre objetos con los mismos estilos que conducen a tamaños de archivo más pequeños.

    Guardar imágenes: puede guardar 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.
    Exportar activos de diseño a SVG
    Exportar activos de diseño a SVG
  4. Si desea optimizar los activos, seleccione Optimizar tamaño de archivo (Minimizar) en Mac, o Optimizado (Minimizado) frente a Tamaño de archivo en Windows.

Exportar activos de diseño a JPG

  1. Para exportar activos de diseño como PNG en Mac, seleccione Archivo > Exportar. En Windows, haga clic en el menú Hamburguesa y luego en Exportar.

  2. Haga clic en la lista desplegable que se encuentra junto a la opción de formato y seleccione JPG.

    Exportar activos de diseño como JPG
    Exportar activos de diseño como JPG
  3. Al exportar activos (por ejemplo, fotos) 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 lugar de Exportar para, escoja Diseño o Web.

Exportar activos de diseño a PDF

  1. Para exportar activos de diseño como PNG en Mac, seleccione Archivo > Exportar. En Windows, haga clic en el menú Hamburguesa y luego en Exportar.

  2. Haga clic en la lista desplegable que se encuentra junto a la opción de formato y seleccione PDF. Puede elegir exportarlos como un único archivo PDF o como archivos PDF individuales.

    Exportar activos de diseño a PDF
    Exportar activos de diseño a PDF
  3. Archivo PDF único: puede seleccionar varios activos o mesas de trabajo y exportarlos como un único archivo PDF. Los diversos activos o mesas de trabajo se colocan en páginas separadas y se crea un único 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.

  4. A continuación, haga clic en Exportar.

Trabajar con la integración de terceros

Puede llevar sus diseños a otras aplicaciones que se integran con XD: Zeplin, Avocode, Sympli (solo en MAC), Kite Compositor y Protopie. 

La sección anterior ofrece una descripción general de alto nivel del flujo de trabajo, usando el ejemplo de XD ejecutándose en Mac con Zeplin.

El procedimiento funciona de la misma manera en XD ejecutándose en Windows.

Nota:

Este procedimiento varía ligeramente según la aplicación que esté utilizando. Para obtener más información, consulte la documentación de su aplicación:

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

    Exportación de activos a Zeplin
    Exportación de activos a Zeplin

    Nota:

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

  2. En el cuadro de diálogo que aparece, 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.

    Pantalla Importar en Zeplin
    Pantalla Importar en Zeplin

    Las mesas de trabajo se importan a Zeplin.

    Mesas de trabajo en Zeplin
    Mesas de trabajo en Zeplin

Extraer activos para especificaciones de diseño

Puede marcar capas como activos para exportación y enviarlas a los desarrolladores como un 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.

Para obtener más información, consulte Extraer activos para especificaciones de diseño.

Si no consigue ver las aplicaciones de terceros en la opción Archivo > Exportar, consulte No se pueden ver las aplicaciones de terceros compatibles en las opciones de exportación.

Si no consigue exportar su archivo, consulte ¿Por qué no puedo importar o exportar archivos en Adobe XD?

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