Guía del usuario Cancelar

Trabajar con activos de documentos en Adobe XD

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

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 + Shift + Y (macOS) o Ctrl + Shift + Y ( Windows), para abrir el panel Activos de documento.

Sugerencia:

Para expandir o colapsar todos los nodos en el panel Activos a la vez, use Cmd + Clic (macOS) o Ctrl + Clic (Windows), para ahorrar tiempo y esfuerzo.

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.

Cuestiones a las que prestar atención

  • 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.
  4. Para aplicar el mismo color al borde de un objeto, seleccione el objeto, seleccione el color y presione Opt (macOS) o Alt (Windows).

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.

Cuestiones a las que prestar atención

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

Cuestiones a las que prestar atención

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

Cuestiones a las que prestar atención

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

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?