Guía del usuario Cancelar

Exportar y descargar activos desde especificaciones de diseño

  1. Guía del usuario de Adobe XD
  2. Introducción
    1. Novedades de Adobe XD
    2. Preguntas habituales
    3. Diseñar, crear prototipos y compartir con Adobe XD
    4. Requisitos del sistema
      1. Requisitos de hardware y software
      2. Adobe XD, Big Sur y Apple Silicon | macOS 11
    5. Conceptos básicos del espacio de trabajo
    6. Cambiar el idioma de la aplicación en Adobe XD
    7. Acceder a kits de diseño de interfaz de usuario
    8. Accesibilidad en Adobe XD
    9. Métodos abreviados de teclado
    10. Consejos y trucos
    11. Opciones de suscripción de Adobe XD
    12. Cambios en el plan de inicio de XD
  3. Diseño
    1. Mesas de trabajo, guías y capas
      1. Empezar a usar mesas de trabajo
      2. Usar guías y cuadrículas
      3. Crear mesas de trabajo con desplazamiento
      4. Trabajar con capas
      5. Crear grupos de desplazamiento
    2. Formas, objetos y trazados
      1. Seleccionar, redimensionar y rotar objetos
      2. Mover, alinear, distribuir y organizar objetos
      3. Agrupar, bloquear, duplicar, copiar y voltear objetos
      4. Establecer el trazo, el relleno y las sombras paralelas de objetos
      5. Crear elementos repetidos
      6. Crear diseños en perspectiva con transformaciones 3D
      7. Editar objetos utilizando operaciones booleanas
    3. Texto y fuentes
      1. Trabajar con herramientas de dibujo y texto
      2. Fuentes en Adobe XD
    4. Componentes y estados
      1. Trabajar con componentes
      2. Trabajar con componentes anidados
      3. Añadir varios estados a componentes
    5. Máscaras y efectos
      1. Crear una máscara con formas
      2. Usar efectos de desenfoque
      3. Crear y modificar degradados
      4. Aplicar efectos de mezclas
    6. Maquetación
      1. Redimensionado interactivo y restricciones
      2. Establecer relleno fijo para componentes y grupos
      3. Crear diseños dinámicos con pilas
    7. Vídeos y animaciones de Lottie
      1. Cómo usar los vídeos
      2. Crear prototipos mediante vídeos
      3. Usar animaciones de Lottie
  4. Prototipo
    1. Crear prototipos interactivos
    2. Animar prototipos
    3. Propiedades de objetos compatibles con la animación automática
    4. Crear prototipos con teclado y mando de juego
    5. Crear prototipos utilizando comandos de voz y reproducción
    6. Crear transiciones temporizadas
    7. Añadir superposiciones
    8. Diseñar prototipos de voz
    9. Crear vínculos de anclaje
    10. Crear hipervínculos
    11. Previsualizar diseños y prototipos
  5. Compartir, exportar y revisar
    1. Compartir mesas de trabajo seleccionadas
    2. Compartir diseños y prototipos
    3. Establecer permisos de acceso de vínculos
    4. Usar prototipos
    5. Revisar prototipos
    6. Trabajar con especificaciones de diseño
    7. Compartir especificaciones de diseño
    8. Inspeccionar especificaciones de diseño
    9. Controles de las especificaciones de diseño
    10. Revisar y comentar especificaciones de diseño
    11. Exportar activos de diseño
    12. Exportar y descargar activos de especificaciones de diseño
    13. Grupos compartidos para empresas
  6. Sistemas de diseño
    1. Sistemas de diseño con Bibliotecas Creative Cloud
    2. Trabajar con activos de documentos en Adobe XD
    3. Trabajar con Bibliotecas Creative Cloud en Adobe XD
    4. Migrar activos vinculados a Bibliotecas Creative Cloud
    5. Trabajar con tokens de diseño 
    6. Usar activos de Bibliotecas Creative Cloud
  7. Documentos en la nube
    1. Documentos en la nube en Adobe XD
    2. Colaborar y coeditar diseños
    3. Coeditar documentos que compartan con usted
  8. Integraciones y complementos
    1. Trabajar con activos externos
    2. Trabajar con activos de diseño de Photoshop
    3. Copiar y pegar activos desde Photoshop
    4. Importar o abrir diseños de Photoshop
    5. Usar activos de Illustrator en Adobe XD
    6. Abrir o importar diseños de Illustrator
    7. Copiar vectores de Illustrator en XD
    8. Complementos para Adobe XD
    9. Crear y administrar complementos
    10. Integración de Jira para XD
    11. Complemento Slack para XD
    12. Complemento Zoom para XD
    13. Publicar diseño de XD en Behance
  9. XD para iOS y Android
    1. Vista previa en dispositivos móviles
    2. Preguntas frecuentes de Adobe XD para dispositivos móviles
  10. Solución de problemas
    1. Problemas conocidos y resueltos
      1. Problemas conocidos
      2. Problemas resueltos
    2. Instalación y actualizaciones
      1. XD aparece como incompatible en Windows
      2. Código de error 191
      3. Código de error 183
      4. Problemas al instalar complementos de XD
      5.  Solicitud para desinstalar y volver a instalar XD en Windows 10
      6. Problemas con la migración de preferencias
    3. Inicio y cierre inesperado
      1.  XD se cierra al iniciar la aplicación en Windows 10
      2.  XD se cierra al cerrar sesión en Creative Cloud
      3. Problema con el estado de suscripción en Windows
      4. Aviso de aplicación bloqueada al iniciar XD en Windows
      5. Generación de volcados de fallos en Windows
      6. Recopilación y uso compartido de registros de errores
    4. Documentos en la nube y bibliotecas Creative Cloud
      1. Problemas con documentos en la nube de XD
      2. Problemas con componentes vinculados
      3. Problemas con bibliotecas y enlaces
    5. Crear prototipos, publicar y revisar
      1. No se pueden grabar interacciones de prototipos en macOS Catalina
      2. Problemas con flujos de trabajo de publicación
      3. Los vínculos publicados no aparecen en los navegadores
      4. Los prototipos no se renderizan correctamente en los navegadores.
      5. El panel de comentarios aparece repentinamente en los vínculos compartidos
      6. No es posible publicar bibliotecas
    6. Importar, exportar y usar otras aplicaciones
      1. Importar y exportar en XD
      2. Archivos de Photoshop en XD
      3. Archivos de Illustrator en XD
      4. Exportar a After Effects desde XD
      5. Archivos de Sketch en XD
      6. Aplicaciones de terceros que no aparecen en Exportar

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

Logotipo de Adobe

Inicia sesión en tu cuenta