Aprenda a administrar activos y componentes del proyecto de Adobe XD usando el panel Activos.

¿Cómo gestionar activos en XD?

Para administrar activos de forma centralizada, como colores, degradados y estilos de carácter de los objetos que usa en el proyecto, puede agregarlos al panel Activos.

El panel Activos también muestra automáticamente todos los componentes que se creen en XD. Para más información sobre los componentes, consulte Componentes.

Para abrir el panel Activos, haga clic en , en la barra de tareas, o presione Comando + Mayús + Y (en Mac) o Ctrl + Mayús + Y (en Windows).

Panel Activos
Panel Activos

A. Colores B. Estilos de carácter C. Componentes D. Añadir activos E. Icono que indica una fuente ausente o deshabilitada 

Añadir y eliminar activos

Para agregar colores y gradientes (lineales o radiales) al panel Activos: seleccione un objeto o un grupo de objetos de la mesa de trabajo y haga clic en el icono + situado al lado de Colores, en el panel Activos. Para obtener más información, consulte Agregar y usar colores como activos.

Para agregar estilos de carácter al panel Activos: seleccione un texto o un cuadro de texto de la mesa de trabajo y haga clic en el icono + situado al lado de Estilos de carácter, en el panel Activos. Para obtener más información, consulte Agregar y usar estilos de carácter como activos.

Para eliminar un activo del panel Activos: Seleccione el activo en el panel Activos , haga clic con el botón derecho (en Windows) o Ctrl y clic (en Mac) y seleccione Eliminar en el menú contextual.

También puede seleccionar una mesa de trabajo o un grupo de mesas de trabajo y hacer clic en el icono + para añadir todos los colores y estilos de carácter de las mesas de trabajo al panel Activos.

Nota:

Los colores, degradados, estilos de carácter y componentes agregados al panel Activos permanecen allí incluso si se elimina el activo en cuestión de la mesa de trabajo, lo que permite reutilizar el activo cuando sea necesario en el futuro.

Agregar y usar colores como activos

  1. Seleccione el objeto relevante en el lienzo y aplique el color necesario desde el Inspector de propiedades.
  2. Para agregar el color como un activo, seleccione el objeto anterior y haga clic en el icono situado junto a Colores, en el panel Activos.
  3. Para aplicar el color a un objeto, seleccione el objeto en el lienzo y siga uno de los pasos que se indican a continuación:
    • Para aplicar un relleno de color, haga clic en el color, en el panel Activos, o haga clic con el botón derecho en el color y seleccione Aplicar como relleno.
    • Para aplicar un trazo de color (borde), haga clic con el botón derecho en un color del panel Activos y seleccione Aplicar como borde.
  4. Edite los colores de manera centralizada, haciendo clic con el botón derecho en el panel Activos y observe cómo se aplican por todo el documento.

Agregar y usar estilos de carácter como activos

  1. Seleccione el texto en el lienzo y aplique los estilos desde el Inspector de propiedades.
  2. Para agregar estilos como activos, seleccione el texto con estilo y haga clic en el icono + situado junto a Estilos de carácter, en el panel Activos. Si selecciona un texto con varios estilos, haga clic en el icono + para crear varios estilos de carácter.
  3. Para aplicar estilos de carácter a un texto, seleccione el texto en el lienzo y haga clic en los estilos de carácter del panel Activos.
  4. Seleccione y haga clic con el botón derecho en los estilos de carácter para editarlos y verlos aplicados por todo el documento.
Añadir estilos de carácter como activos
Añadir estilos de carácter como activos

Etiquetar activos

Puede agregar etiquetas personalizadas a los activos que agregue al panel Activos. En el panel Activos, cambie a vista de lista y haga clic en la etiqueta para cambiar el nombre. Por ejemplo, puede personalizar el nombre de un color desde el valor HEX al color de fondo de la ventana.

Al cambiar el nombre de un componente, el cambio se aplica a todas las instancias del componente en el panel Capas, para una mejor identificación.

XD también permite agregar emoticonos a las etiquetas.

Etiquetar activos
Etiquetar activos

Reordenar activos en el panel Activos

Puede reordenar los activos en el panel Activos. Puede mover los activos de uso frecuente a la parte superior de la lista u organizarlos como grupos.

Reordenar activos en el panel Activos
Reordenar activos en el panel Activos
  1. En el panel Activos, arrastre los activos a través del panel.

  2. Si desea mover varios activos por el panel al mismo tiempo, mantenga presionado Ctrl (Win) o Cmd (Mac) y seleccione dichos activos.

¿Cómo puedo resolver las fuentes ausentes?

Cuando el documento de XD contenga fuentes ausentes del equipo, XD las enumera en la sección Fuentes ausentes del Panel activos, permite resaltarlas en el lienzo, evalúa su uso en los diseños y las reemplaza por todo el diseño. Para las fuentes ausentes disponibles en la biblioteca Adobe Fonts, XD las activa automáticamente para ofrecer una experiencia de usuario impecable.

Trabajo con fuentes de Adobe

Para simplificar lo más posible la experiencia con fuentes de Adobe, XD activa automáticamente las fuentes ausentes que estén disponibles en la biblioteca de Adobe Fonts de su equipo, sin necesidad de intervenir.

Cuando esté en línea abriendo un documento con fuentes ausentes que estén disponibles en Adobe Fonts (a las que tenga acceso a través de su suscripción de Creative Cloud), XD las activará automáticamente en el equipo.

Los fuentes que se activen desde Adobe Fonts se resaltan con un ícono de activación azul y, tan pronto como estén listas para usarse, quedarán disponibles en el documento, sin ninguna intervención por su parte.

Nota:

Si carga varios documentos con diferentes fuentes, asegúrese de haber desactivado las fuentes que ya no use de la biblioteca de fuentes de Creative Cloud.

Activación automática de Adobe Fonts
Activación automática de Adobe Fonts

A. Fuentes ausentes B. Activación de fuentes 

Identificar y reemplazar las fuentes ausentes

Si tiene fuentes ausentes en el documento, aparecerá un signo de exclamación junto a la fuente ausente en el panel Activos. Para reemplazar la fuente ausente:

  1. Haga clic con el botón derecho en la fuente ausente y seleccione Reemplazar fuente para elegir una fuente de reemplazo. XD mostrará automáticamente en el lienzo la fuente de reemplazo sugerida. También puede optar alternativamente por usar la opción Resaltar en lienzo para resaltar la fuente ausente en los diseños antes de reemplazarlos.
  2. Seleccione Ok para reemplazar la fuente en el lienzo, así como en los estilos de carácter definidos.
Indicador de fuentes ausentes
Identificar, resaltar y reemplazar las fuentes ausentes

A. Resaltar en el lienzo B. Indicador de fuente ausente C. Emerge al hacer clic con el botón derecho en la fuente ausente 
Diálogo de reemplazar fuente
Diálogo de reemplazar fuente

¿Qué son los componentes y cómo puedo crearlos, editarlos y eliminarlos?

Un componente es un objeto o grupo de objetos que se puede reutilizar varias veces por las mesas de trabajo del proyecto. Todas las instancias de un componente utilizadas en el proyecto están vinculadas. Es decir, cualquier actualización realizada en una instancia se refleja instantáneamente en el resto de instancias.

Para convertir un objeto en un componente, realice una de las siguientes acciones:

  • Haga clic con el botón derecho en el objeto y seleccione Crear componente.
  • Seleccione el objeto y presione Comando + K (en Mac), o Ctrl + K (en Windows).
  • En un Mac, seleccione el objeto y luego elija Objeto > Crear componente.
  • Seleccione el objeto y haga clic en +, en la biblioteca Componentes del panel Activos.

Todos los componentes que se creen en el proyecto se muestran automáticamente en la biblioteca Componentes del panel Activos.

Biblioteca Componentes. Haga clic en '+' para convertir un objeto seleccionado en un componente y agregarlo a la biblioteca.
Biblioteca Componentes. Haga clic en '+' para convertir un objeto seleccionado en un componente y agregarlo a la biblioteca.

Editar y eliminar componentes

Para realizar cambios en la sombra y el desenfoque de fondo de un componente, deberá hacer doble clic en el componente en la mesa de trabajo, a diferencia de con los objetos normales. Al hacer doble clic en un componente de la mesa de trabajo, aparecerá con un borde más grueso. Si el componente es un grupo de objetos, al hacer doble clic podrán editarse todos los objetos del grupo. 

Para eliminar un componente de la biblioteca Componentes, haga clic con el botón derecho en el componente y seleccione Eliminar componente.

Reutilizar componentes

Para reutilizar un componente, arrástrelo desde la biblioteca Componentes a la mesa de trabajo. Alternativamente, copie y pegue un componente en una mesa de trabajo, o desde una mesa de trabajo a otra. Todas las instancias vinculadas de un componente se indican con un borde verde. También puede copiar y pegar componentes desde un documento de XD a otro.

Para realizar cambios de estilo en una instancia de un componente sin afectar al resto, haga clic con el botón derecho en la instancia y seleccione Desagrupar componente. A continuación, puede seguir adelante y realizar los cambios.

Para realizar cambios de texto o de mapas de bits en una instancia de un componente, no es necesario desagrupar el componente. Para obtener más información, consulte Cambiar manualmente texto y mapas de bits de instancias de componentes.

Nota:

Si se desagrupa un componente y se crea un componente utilizando otra vez los mismos objetos, se creará un nuevo componente.

Cambiar manualmente texto y mapas de bits de instancias de componentes

Puede realizar cambios de texto y de mapas de bits en instancias de componentes, sin afectar al original. El cambio manual le permite reutilizar el mismo componente entre sus documentos de XD con textos o mapas de bits individuales para cada instancia del componente.

El cambio manual es especialmente útil al crear botones u otros elementos de navegación que compartan el elemento de diseño pero necesiten diferentes bloques de texto o imágenes.

Para cambiar manualmente el texto o mapas de bits en instancias de componentes, seleccione el texto y escriba el nuevo texto. O bien, reemplace un mapa de bits en una instancia de componente por otro mapa de bits.

El cambio al texto o al mapa de bits solo se produce en esa única instancia. Esto no afecta al componente original.

Para propagar los cambios de texto o de mapas de bits de una instancia de un componente al resto de los componentes vinculados, haga clic con el botón derecho en el componente, en la mesa de trabajo, y seleccione Enviar cambios manuales.

Reemplazar componentes

Puede reemplazar todas las instancias de un componente por otro componente. Arrastre un componente desde el panel Activos hasta otro componente. Al arrastrarlo por la parte superior, el icono se convertirá en una flecha que indica que se reemplazarán el componente y todas sus instancias.

Reemplazar todas las instancias de un componente por otro componente
Reemplazar todas las instancias de un componente por otro componente

¿Qué son los activos vinculados?

Con los activos vinculados puedes utilizar activos (componentes, colores y estilos de carácter) de uno o varios archivos de diseño disponibles en los documentos en la nube de XD. Los activos vinculados complementan el flujo de trabajo de los componentes vinculados. Al modificar un activo vinculado en el documento de origen, XD presenta las instancias de los activos vinculados al mismo con todas las actualizaciones. A partir de ahí, puede previsualizar y aceptar las actualizaciones.  

¿Cómo agregar activos vinculados al panel Activos?

Para agregar activos vinculados al panel Activos, realice una de las siguientes acciones:

  • haga clic en el icono + próximo al panel Activos panel en el caso de que el panel de activos esté lleno

O bien,

  • haga clic en el distintivo de Vincular activos en el caso de que el panel de activos esté vacío.

La ventana Vincular activos se abre con dos pestañas; Documentos en la nube y Compartido con usted. Puede ordenar documentos en las pestañas Documentos en la nube y Compartido con usted, por Nombre, Fecha de modificación, Fecha de creación y Tamaño. Seleccione para agregar cualquier documento en la nube de XD en el proyecto de diseño.

Activos vinculados

Los activos del documento en la nube de origen vinculado se agregan al Panel Activos con su propio filtro, que toma su nombre del documento en la nube. Por ejemplo, CodeBrown_Tractiv_UI_kit.

Si ha configurado un filtro en el panel Activo, cambie a la vista Todos los activos para ver los activos recién agregados del documento en la nube, en el explorador de activos. Tenga en cuenta que los colores, los estilos de carácter y los componentes se importan automáticamente del documento vinculado.

Para obtener información sobre cómo utilizar activos vinculados, consulte Trabajar con activos vinculados.

¿Qué son los componentes vinculados?

Con los componentes vinculados, puede compartir componentes entre documentos y mantener una referencia única para los kits de UI, guías de estilo y hojas de adhesivos. Al actualizar un componente vinculado en el documento de origen y guardar los cambios, XD le notificará sobre esta actualización en el documento de destino.

Para obtener información sobre cómo utilizar componentes vinculados, consulte Trabajar con componentes vinculados.

¿Cómo puedo buscar y filtrar activos y componentes en el panel Activos?

Filtrar activos por el tipo de activo

De forma predeterminada, todos los activos agregados al panel Activos aparecerán en el mismo. Puede filtrar los activos por tipo de activo haciendo clic en la flecha desplegable del campo Buscar del panel Activos. En el menú desplegable, puede elegir el tipo de activo, como Color, Estilo de carácter o Componentes.

Filtrar activos en Adobe XD
Filtrar activos en Adobe XD

Buscar activos

Puede buscar colores, estilos de carácter y componentes en el panel Activos. Para buscar colores, escriba el código hexadecimal o la etiqueta personalizada del color que desee. Del mismo modo, para buscar estilos de carácter y componentes, escriba la cadena que coincida con el nombre del activo. Basándose en la cadena de búsqueda, XD mostrará los resultados relevantes en el panel Activos.

Buscar colores usando el código hexadecimal en Adobe XD
Buscar colores usando el código hexadecimal

XD recuerda las últimas cinco consultas de búsqueda de cada sesión. Estas consultas aparecen en el historial de búsqueda.

¿Cómo puedo encontrar activos y componentes en el lienzo usando el panel Activos?

XD permite encontrar rápidamente activos en el lienzo. Para encontrar dónde se ha colocado un activo en el lienzo, seleccione ese activo en el panel Activos, haga clic con el botón derecho y seleccione Resaltar en lienzo. El activo se resaltará en todos los lugares donde se haya colocado en el lienzo.

Encontrar y resaltar activos en el lienzo
Encontrar y resaltar activos en el lienzo

Cuando un componente ya no se utiliza en ninguna parte del proyecto, XD mostrará el mensaje: “No se utilizan copias de este componente”.

Resaltar activos en el panel Activos de los objetos seleccionados en el lienzo

XD también permite resaltar los activos del panel Activos utilizados correspondientes a un objeto que haya seleccionado en el lienzo. Al seleccionar un objeto en el lienzo, podrá encontrar rápidamente el color, el estilo de carácter o el componente que se utilice para el objeto.

Para resaltar los activos del panel Activos utilizados para un objeto, seleccione el objeto en la mesa de trabajo, haga clic en él con el botón derecho y seleccione una de las siguientes opciones:

  • Revelar color: resalta el color que se ha utilizado, en el panel Activos.
  • Revelar estilo de carácter: destaca el estilo de carácter que se ha utilizado en el elemento.
  • Revelar componente: coincide con el componente que ya se ha agregado al panel.

XD resalta los activos que se usan para el objeto seleccionado.

Revelar los activos utilizados en un objeto seleccionado en Adobe XD
Revelar los activos utilizados en un objeto seleccionado

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