Guía del usuario Cancelar

Trabajar con activos de documentos en Adobe XD

  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

¿Busca información sobre cómo administrar activos de documentos en XD? ¡Está en el lugar adecuado!

El panel Activos de documento es la ubicación central en la que puede crear, administrar y compartir colores, estilos de caracteres, componentes y activos de audio utilizados en los proyectos de diseño.

activos de documentos

¿Para qué sirven los activos de documento?

Conozca a Richard, jefe de diseño responsable de estandarizar la creación y el uso de activos de diseño en sistemas basados en la nube. Se está formando para gestionar colores, estilos de caracteres, componentes o activos de audio en todos los sistemas de diseño.

 

  • Está buscando información sobre cómo crear y administrar activos en XD.

 

  • Necesita ayuda para crear un sistema de administración de activos en XD.

Siga leyendo para familiarizarse con la función Activos de documento en XD y empezar a usarla.

¿Ya está usando XD?

Actualizar la aplicación

Descubra las novedades

Pruébela

Obtener archivo de muestra

.xdc; 604 KB

Antes de continuar

Familiarícese con estos conceptos de XD:

Añadir activos de documento

Para comenzar a seleccionar sus estilos y componentes de diseño, haga clic en Bibliotecas , en la barra de herramientas, o presione Cmd + Mayús + Y (en Mac) o Ctrl + Mayús + Y (en Windows), para abrir el panel Activos de documento .
Una vez que esté en el panel Activos de documento, siga estos pasos para añadir colores, estilos de carácter, componentes o pistas de audio o vídeos que desee reutilizar en el documento o publicarlos posteriormente como parte de la biblioteca. 

Añadir colores

  • Seleccione un objeto en el lienzo y haga clic en el icono + que hay junto a Colores en el panel Activos de documento. XD extraerá los colores de relleno y de los bordes asociados al objeto seleccionado.

Añadir estilos de carácter

  • Seleccione un texto en el lienzo y haga clic en el icono + que hay junto a Estilos de carácter en el panel Activos de documento. XD extrae todos los estilos asociados con la capa de texto, incluidos los estilos de subrango.

Añadir componentes

  • Seleccione un objeto en el lienzo y haga clic en el icono + que hay junto a Componentes en el panel Activos de documento para convertirlo en un componente. 
  • Cuando se crea un componente en un lienzo, XD lo añade automáticamente a la sección Componentes en el panel Activos de documento.

Añadir audio

Añadir activos de audio

  • Los archivos de audio añadidos a un prototipo en el Inspector de propiedades en el modo Prototipo aparecen automáticamente en Activos de documento.

Adición de vídeo

Adición de vídeo

  • Seleccione un vídeo en el lienzo y haga clic en el icono + que hay junto a Vídeos en el panel Activos de documento.
  • A convertir un vídeo en un componente, el vídeo se añade tanto a Componentes como a Vídeos en el panel Activos de documento.


OBSERVACIONES IMPORTANTES

  • No se pueden añadir colores desde sombras a Activos de documento.
  • No se pueden agrupar estilos de carácter con propiedades comunes. 
  • Los archivos de audio solo se pueden eliminar en Activos de documento.

  • Puede añadir archivos de audio desde el Inspector de propiedades en modo Prototipo.
  • No es posible cambiar el nombre de los archivos de audio ni reordenarlos.
  • Los archivos de audio no se vinculan al vincularse a un documento en la nube. 

Consejos y trucos

  • Utilice la vista de lista  de Activos de documento para cambiar el nombre de los activos y ordenarlos para adecuarlos a las necesidades de la organización. La vista de cuadrícula  está optimizada para reutilizar activos, dadas las representaciones de miniaturas y activos más grandes.
  • Para una comprobación previa, seleccione todas las mesas de trabajo del documento para extraer todos los colores y estilos de carácter utilizados en el documento.

Aplicar y reutilizar activos de documento

Ahora que puede ver los activos añadidos en Activos de documento, seleccione un objeto o un grupo de objetos en la mesa de trabajo y haga clic en el color o estilo de carácter para aplicarlo a la selección.

Para utilizar uno o varios componentes en su diseño, selecciónelos en el panel Activos de documento y arrástrelos al lienzo. Las instancias de esos componentes se crearán en el lienzo.

Siga estos pasos para reutilizar el color, los estilos de carácter o los componentes: 

Reutilizar color

Reutilizar color

Realice uno de estos procedimientos:
  1. Seleccione un objeto o una capa de texto y haga clic en la muestra de color para aplicarla como color de relleno.
  2. Seleccione varios objetos y aplique un color o un degradado a la selección.
  3. Haga clic con el botón derecho en una muestra de color de Activos de documento y seleccione Aplicar color de borde para aplicarlo como color de borde, o copie el valor hexadecimal para volver a utilizarlo.

Reutilizar estilos de carácter

Realice uno de estos procedimientos:
  1. Seleccione una capa de texto o una parte del texto y haga clic en el estilo de carácter para aplicarlo.
  2. Seleccione varios objetos y aplique un estilo de carácter en una selección.

Reutilizar componentes

Reutilizar componentes

Realice uno de estos procedimientos:
  1. Arrastre el componente desde Activos de documento al lienzo.
  2. Seleccione varios objetos y arrastre varios componentes en el lienzo.
  3. Al arrastrar un componente, puede pasar el puntero sobre otra instancia de componente para intercambiarlo. 

Consejos y trucos

  • Para un uso coherente, una vez que haya guardado los colores y estilos de carácter, asegúrese de aplicar a los objetos seleccionados colores y estilos de carácter desde Activos de documento.

Editar activos de documento

Una vez añadidos y reutilizados los activos, puede editarlos en Activos de documento para realizar cambios globales en el documento. Esta posibilidad ofrece una forma optimizada de modificar los estilos de color y carácter en todo el documento. 

Antes de continuar, asegúrese de estar editando el recurso correcto:

  • Haga clic con el botón derecho en el recurso de Activos de documento y seleccione Resaltar en el lienzo para buscar todos los objetos que utilicen ese color o estilo de carácter, o busque las instancias de un componente.
  • Seleccione cualquier objeto en el lienzo, haga clic con el botón derecho y elija Mostrar componentes en Activos para localizar el color, estilo de carácter o componente en Activos de documento.
Resaltar en el lienzo
Haga clic con el botón derecho en el recurso de Activos de documento y seleccione Resaltar en el lienzo.

Mostrar componentes en activos
Seleccione cualquier objeto del lienzo, haga clic con el botón derecho y elija Mostrar componentes en activos

Siga estos pasos para editar activos de documento:

Editar colores

Editar color

  • Haga clic con el botón derecho en una muestra de color y seleccione Editar para modificar el valor de color en el documento. 
  • Todos los objetos del lienzo que utilicen esa actualización de color en tiempo real. Esta es una buena forma de previsualizar un cambio de color a escala y realizar modificaciones.

Editar estilos de carácter

Editar carácter

  • Haga clic con el botón derecho en un estilo de carácter y seleccione Editar para modificarlo en el documento. 
  • Todas las capas de texto del lienzo que utilicen ese estilo se actualizan en tiempo real.

Editar componentes

Editar componente

  • Haga clic con el botón derecho en el componente del lienzo o en el panel Activos de documento y seleccione Editar componente principal para resaltar el componente principal en el lienzo o volver a crearlo si se elimina.
  • Los cambios realizados en el componente principal se aplican a otras instancias de componente.


OBSERVACIONES IMPORTANTES

  • Al editar un color o estilo de carácter utilizado en varios objetos (>100), los cambios pueden tardar en propagarse desde el panel a todos los objetos del lienzo.

Consejos y trucos

  • Para determinar el impacto de la edición en el diseño, utilice la opción Resaltar en el lienzo antes de editar los activos en Activos de documento.
  • Para editar los colores en los estilos de carácter, cambie el valor de color y luego el valor de color global para conservar los estilos de carácter.
  • Si modifica un color vinculado o un estilo de carácter vinculado, solo cambiarán los objetos con colores vinculados o estilos de carácter aplicados.

Administrar y organizar activos del documento

Después de añadir los activos, puede administrarlos y organizarlos en el panel Activos de documento de las siguientes maneras:

  • Ver y ordenar activos
  • Buscar y filtrar activos
  • Pasar el puntero sobre activos
  • Reordenar, cambiar de nombre y eliminar activos

Para saber cómo agrupar activos, consulte Organizar activos en grupos y subgrupos.

Ver y ordenar recursos

Ver y ordenar activos

  • Vista de cuadrícula: optimizada para mostrar miniaturas, puede identificar visualmente los activos.
  • Vista de lista: optimizada para la organización, puede ver los nombres de todos los activos y reordenarlos.
  • Ordenar por nombre: ordena alfabéticamente las categorías de activos y todos los activos de dentro de ellas.

Puede añadir, reutilizar y editar activos en ambas vistas. 

Buscar y filtrar activos

Buscar y filtrar activos

Utilice Buscar para buscar activos.

Utilice Filtrar por tipo para filtrar los activos del documento por Colores, Estilos de carácter o Componentes. Para obtener más información, consulte Buscar y filtrar activos.

Pasar el puntero sobre activos

Pasar el puntero sobre activos

Pase el puntero sobre las miniaturas de los activos para mostrar la siguiente información: 

  • Colores: muestra el valor hexadecimal o el nombre del color a medida. 
  • Degradados: muestra las paradas de valor de degradado.
  • Estilos de carácter: muestra propiedades como el interlineado.
  • Componentes: muestra el número de instancias de ese componente en el lienzo.

Reordenar, cambiar de nombre y eliminar activos

  • En la vista de lista , arrastre los activos de cada categoría para reordenarlos.
  • Haga clic con el botón secundario para cambiar el nombre o cambiar a la vista de lista  y cambie el nombre a todos los activos. También puede cambiar el nombre de un componente principal en el panel Capas si hace doble clic en la ruta del componente.
  • Haga clic con el botón derecho y seleccione Eliminar para eliminar un color, estilo de carácter, componente o audio de Activos de documento. Cuando se elimina un componente del panel, las instancias se desagrupan como objetos normales en el lienzo.

 OBSERVACIONES IMPORTANTES

  • Al trabajar en la vista de lista , no se puede ver una previsualización grande del Componente.
  • Reordene los activos para agruparlos en varias categorías. 

Consejos y trucos

  • Los filtros de Activos de documento permiten filtrar y ver solo una categoría u origen de activos específicos.
  • ¿No está seguro de cómo afectará un cambio al diseño? Utilice Resaltar en lienzo para ver instancias de ese recurso en el documento.
  • Para identificar los componentes no utilizados, seleccione todos los objetos del lienzo, haga clic con el botón derecho, seleccione Revelar componente en Activos y arrastre los componentes resaltados hasta la parte superior de la lista.
  • Al pasar el puntero por encima de:
    • Un degradado, la información sobre herramientas muestra el inicio y el valor final del degradado. Un signo ‘-’ entre los valores indica un degradado con dos niveles y un signo ‘...’ entre los valores indica un degradado con varios niveles de color.
    • Un componente, la información sobre herramienta muestra el número de instancias de dicho componente en el lienzo.
  • Al cambiar el nombre de los activos en la vista de lista , utilice TAB para cambiarle el nombre al recurso siguiente en la vista de lista, y MAYÚS + TAB para ir en sentido contrario.

Organizar los activos en grupos y subgrupos

Organice los activos de documentos fácilmente creando el número que quiera de grupos y subgrupos en el panel Activos de documento en la vista de árbol o de ruta:

  • Vista de árbol: aquí verá los grupos y subgrupos organizados en una jerarquía. Haga clic en el icono Árbol/Ruta situado en la esquina superior derecha del panel Activos de documento para cambiar a la vista de árbol. 
  • Vista de ruta: aquí verá una lista de las rutas de grupo y, en cada ruta, aparecerá un grupo y sus subgrupos anidados separados por barras oblicuas (/). La vista de ruta iguala la estructura del grupo de anidación, lo que permite examinar todos los activos dentro de los subgrupos. Haga clic en el icono Árbol/Ruta situado en la esquina superior derecha del panel Activos de documento para cambiar a la vista de ruta.

Tanto en la vista de árbol como en la vista de ruta, podrá organizar los activos de las siguientes maneras:

Panel Activos de documento en vista de árbol (izquierda) y vista de ruta (derecha)
Panel Activos de documento en vista de árbol (izquierda) y vista de ruta (derecha)

Cree grupos dentro de cada categoría de activos (colores, estilos de carácter, etc.) de cualquiera de las siguientes formas:

  • Seleccione varios activos, haga clic con el botón derecho y elija Nuevo grupo a partir de selección.
  • Haga clic con el botón derecho en la categoría de activos (colores, estilos de carácter, componentes, etc.) y elija Crear subgrupos.
  • Haga clic con el botón derecho en un recurso y elija Nuevo grupo a partir de elemento.
  • Haga clic con el botón derecho en un recurso, elija Mover a, haga clic en el icono de carpeta, luego en Crear y finalmente en Mover.
  • Seleccione varios activos, haga clic con el botón derecho, elija Mover elementos seleccionados a, haga clic en el icono de carpeta, luego en Crear y finalmente en Mover.
Crear un subgrupo dentro de un grupo
Seleccionar varios activos, hacer clic con el botón derecho y crear un grupo

Una vez que haya creado un grupo, haga clic con el botón derecho en él para realizar una de las siguientes acciones:

  • Crear subgrupo: cree varios subgrupos.
  • Mover a: mueva activos a otro grupo dentro de la categoría de activos.
  • Cambiar nombre a grupo: asigne un nombre de su elección.
  • Desagrupar: elimina el grupo y mueve los activos que contiene un nivel hacia arriba.
  • Eliminar: elimina el grupo y los activos que contiene.

Una vez que haya creado los grupos y subgrupos, puede arrastrar los activos para moverlos a esos grupos. También puede hacer clic con el botón derecho en los activos y seleccionar Mover a y luego elegir los grupos a los que quiera traspasar los activos.

Puede crear varios subgrupos anidados a la vez usando barras oblicuas (/) en la ruta del grupo y organizar los activos fácilmente editando las rutas. Para obtener más información, consulte Organizar activos con barras oblicuas.

Organizar activos editando rutas

Utilice barras oblicuas (/) para organizar con facilidad grupos y subgrupos dentro de cualquier categoría de activos. Puede realizar las siguientes acciones con las barras oblicuas:

  • Crear un grupo con subgrupos anidados
  • Editar rutas para desagrupar y mover activos

Crear un grupo con subgrupos anidados

Cree varios subgrupos anidados dentro de un grupo al mismo tiempo mediante las barras oblicuas (/). 

Puede crear subgrupos anidados usando barras diagonales en:

  • Vista de ruta y vista de árbol del panel Activos de documento
  • Panel Capas (solo componentes principales)

Después de escribir el nombre de un grupo, introduzca una barra oblicua, escriba el nombre del subgrupo y anide tantos niveles como sea necesario. Si ya existe un subgrupo con el mismo nombre en un nivel de anidación, los dos subgrupos se fusionarán.

Editar rutas para desagrupar y mover activos

Mediante la opción para editar rutas, use varias acciones para desagrupar a la vez o combine las acciones Mover a y Desagrupar.

Puede editar rutas en:

  • Vista de ruta del panel Activos de documento
  • Panel Capas (solo componentes principales)

Haga doble clic en la ruta para editarla. Al eliminar un grupo o un subgrupo de una ruta, todos los activos dentro de esta subirán de nivel. Puede eliminar todos los niveles de anidación que quiera de una ruta a la vez y mover activos para subirlos varios niveles. Si escribe una ruta que ya existe, todos los activos se moverán a esa ruta. 


OBSERVACIONES IMPORTANTES

  • ¿Tiene un documento de XD antiguo que incluyen nombres de activos con barras oblicuas? Cuando abra un documento de este tipo en XD 50 y versiones posteriores, recibirá un aviso para que realice una de las siguientes acciones:

a. Sustituir las barras por guiones (—) para conservar la jerarquía del grupo.

b. Convertir las barras en nuevos niveles de anidación para crear una jerarquía del grupo más compleja.

  • Cuando abra un documento de Sketch en XD, se conservarán las agrupaciones de activos y su estructura.
  •  Al editar rutas, no se elimina ninguno de los activos. Para eliminar tanto un grupo como todos sus activos, haga clic con el botón derecho en el grupo y seleccione Eliminar.
  • Cuando organice grupos de componentes principales en el panel Capas, esto se reflejará en el panel Activos de documento.
  • Al publicar una biblioteca vinculada a partir de un documento en la nube de XD, todos los grupos y subgrupos permanecerán en la biblioteca.
  • Las rutas de grupo con sus activos no aparecen al publicar especificaciones de diseño.

Consejos y trucos

  • Si ya ha organizado sus activos de documentos en una mesa de trabajo, haga clic con el botón derecho en el nombre de la mesa de trabajo y seleccione Mostrar componentes en activos, Mostrar colores en activos o Mostrar estilos de carácter en activos. Todos los activos de la categoría de activos que haya seleccionado se resaltan y seleccionan en Activos de documento. Haga clic con el botón derecho en cualquiera de esos activos y seleccione Nuevo grupo a partir de selección para crear fácilmente un grupo con todos esos activos.
  • Si los activos de documentos tienen nombres y desea agruparlos rápidamente, utilice Buscar para reducir el número de esos activos para que coincidan con sus criterios de búsqueda. A partir de ahí, puede crear rápidamente un grupo con solo esos activos filtrados.

Para obtener algunos consejos profesionales sobre la organización de los activos de documentos, vea este vídeo:

Compartir y publicar activos

Tras saber cómo crear todos sus colores, estilos de caracteres y componentes reutilizables en sus activos de documento, aprenda a usar las Bibliotecas Creative Cloud para publicar y compartir los activos de su sistema de diseño con el resto de su equipo.

Más información

Para obtener más información sobre el uso de activos, vea este vídeo:

¿Qué viene después?

Hemos comenzado a trabajar con activos y bibliotecas en XD. Dé un paso más y aprenda a utilizar las bibliotecas para compartir sus activos, componentes y diseños de sistemas o migre el documento en la nube de XD existente a las bibliotecas.

¿Tiene alguna pregunta o idea?

Pregunte a la comunidad

¿Tiene alguna pregunta o idea para compartir? Entre 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

[Feedback V2 Badge]