Aprenda a usar componentes entre sistemas de diseño.

Como diseñador, a menudo creará elementos esenciales, como barras de navegación o botones, que se repetirán por todos sus diseños. Sin embargo, estos elementos fundamentales deberán personalizarse según el contexto o diseño donde se coloquen. En tales escenarios, a menudo se termina por crear varias versiones del mismo elemento fundamental, lo que hace que sea mucho más difícil mantener el diseño.

Los componentes (anteriormente conocidos como símbolos), son elementos de diseño con una flexibilidad incomparable que ayudan a crear y mantener elementos repetidos, mientras que varían las instancias en diferentes contextos y diseños. Por ejemplo, el uso de botones en diferentes contextos.

Puede crear un componente maestro para definir un elemento reutilizable, como un botón, y puede cambiar cualquiera de sus propiedades para personalizar las instancias de ese elemento. Los cambios que realice en una instancia individual son específicos de ese elemento, pero los cambios que realice en el maestro se propagan a todas las instancias en las que la propiedad no se haya personalizado. 

Componentes maestros e instancias

La primera vez que se crea un componente en XD, se convierte en componente maestro. Puede manipular los componentes maestros en el lienzo y editarlos tal y como lo haría con cualquier otro elemento. Los componentes maestros se distinguen por un diamante verde en la esquina superior izquierda.

Componente maestro señalado por un icono de diamante verde
Componente maestro señalado por un icono de diamante verde

Para crear un componente maestro, seleccione un objeto o grupo de objetos y use cualquiera de las siguientes opciones:

  1. Haga clic con el botón derecho y seleccione Crear componente (CMD+K).

  2. Haga clic en el botón +, en la sección de componentes del panel Activos.

  3. Desde la aplicación XD, seleccione Objeto > Crear componente.

Trabajar con instancias de componentes

Cada copia del componente maestro que se crea se denomina una instancia. Cuando se crean instancias:

  • Son copia exacta del componente maestro,
  • Tienen las mismas propiedades que el original, y
  • Están vinculadas intrínsecamente al maestro. 
Instancia de componente
Instancia de componente

Las propiedades de una instancia puede anularse sin romper su conexión con el componente maestro. Esta es la manera en que funciona esto:

  • Al realizar cambios en el componente maestro, los mismos cambios se aplican a todas las instancias.
  • Sin embargo, si se cambia una propiedad en una instancia, XD marcará esa propiedad como una anulación. Las Anulaciones son cambios específicos que solo se aplicarán a esa instancia y no al componente maestro.

Editar un componente maestro

Para editar un componente maestro, puede usarse cualquiera de estas opciones:

  1. Haga clic con el botón derecho en una instancia del lienzo y seleccione Editar componente maestro.

    Editar un componente maestro desde el lienzo
    Editar un componente maestro desde el lienzo
  2. Haga clic en un componente del panel Activos y seleccione Editar componente maestro.

    Editar un componente maestro
    Editar un componente maestro desde el panel de activos

Si ha eliminado un componente maestro del lienzo, XD genera un componente maestro en el lienzo, al lado de los objetos que esté editando actualmente. 

Editar un componente maestro
Editar un componente maestro

Anular propiedades

Los componentes maestros ofrecen la coherencia necesaria para mantener un sistema de diseño. Cualquier cambio realizado en el componente maestro se propaga automáticamente a sus instancias.

Los cambios del componente maestro se propagan automáticamente a sus instancias
Los cambios del componente maestro se propagan automáticamente a sus instancias

Sin embargo, un sistema de diseño es práctico en la medida del grado de flexibilidad que proporciona. Puede comenzar con el mismo elemento original, pero debe personalizarlo según el contexto en el que se use. Ahí es donde entran en juego las instancias. Al editar cualquier instancia de un componente, el componente maestro no se ve afectado. Cada propiedad que se cambie se considera como una anulación.

Anulación de instancia
Anulación de instancia

Las propiedades anuladas siempre se conservan, incluso si se edita esa misma propiedad desde el componente maestro. 

Preservar propiedades de anulación
Preservar propiedades de anulación

Las propiedades que no se hayan anulado en instancias, como el radio de vértice en estos botones, siempre se sincronizan desde el maestro. 

Las propiedades de radio de vértice de los botones se sincronizan desde el maestro
Las propiedades de radio de vértice de los botones se sincronizan desde el maestro

Si no está satisfecho con los resultados de las anulaciones, siempre puede restablecer al componente maestro original haciendo clic derecho en una instancia y seleccionando Restablecer a componente maestro. Esto borra todas las anulaciones de una instancia y la restablece de vuelta al componente maestro.

Restablecer al componente maestro
Restablecer al componente maestro

Anulaciones de estilo y apariencia

El cambio de los elementos originales según el contexto es extremadamente importante al crear elementos reutilizables. Como resultado, puede anular todas las propiedades de estilo y apariencia de una instancia. Las anulaciones permiten un margen de variaciones sin dejar de mantener sus vínculos con el elemento esencial. 

Anulaciones de estilo y apariencia
Anulaciones de estilo y apariencia

Nota:

Las propiedades de rotación y opacidad actualmente no se propagan del componente maestro a las instancias.

Cambios de tamaño y diseño

XD 12.0 aportó una función denominada redimensionamiento inteligente que le permitía cambiar el tamaño de grupos de objetos, manteniendo su colocación y escalabilidad. Todo lo que tiene que hacer es cambiar el tamaño del grupo, justamente en el lienzo de diseño, y XD mantendrá aplicado el espaciado relativo. Inevitablemente, terminará por tener elementos reutilizables que son similares, aunque variantes de diferentes tamaños. Los componentes también son redimensionables, y vienen con las potentes posibilidades de cambio de tamaño integradas.

Redimensionamiento interactivo de un componente maestro
Redimensionamiento interactivo de un componente maestro

Si se cambia el tamaño del componente maestro, las instancias cuyo tamaño no se haya cambiado se redimensionan automáticamente. En consecuencia, las instancias cuyo tamaño ya se haya cambiado conservan su posición redimensionada como una anulación. También puede cambiar independientemente el tamaño de una instancia, sin afectar al componente maestro. 

Cambiar independientemente el tamaño de una instancia sin afectar al componente maestro
Cambiar independientemente el tamaño de una instancia sin afectar al componente maestro

No solo se puede cambiar el tamaño de todo un componente, sino que también se puede alterar el diseño de los elementos que contiene. En este momento, puede realizar cambios en las instancias de los componentes, independientemente de los tamaños a los que las haya adaptado. Al igual que con el redimensionamiento inteligente, XD recrea de la mejor manera posible la colocación de los elementos en un lienzo más grande o más pequeño, a medida que los vaya cambiando de tamaño. También puede cambiar al modo manual y así editar manualmente las restricciones para un mayor control.

Editar manualmente restricciones interactivas
Editar manualmente restricciones interactivas

Las propiedades modificadas en una instancia (por ejemplo, el tamaño del texto en Joshua Tree), conservan sus anulaciones y no reciben actualizaciones de dichas propiedades del componente maestro.

Las propiedades modificadas conservan sus anulaciones
Las propiedades modificadas conservan sus anulaciones

Si edita el diseño de una instancia, los cambios en las propiedades que no se hayan anulado se propagan desde el componente maestro a las instancias.

Los cambios del componente maestro se propagan automáticamente a las instancias
Los cambios del componente maestro se propagan automáticamente a las instancias

Añadir y eliminar elementos como anulación

No solo es posible anular el tamaño de un componente o la disposición de los elementos internos, sino que también se pueden anular estructuralmente los componentes. Esto significa que puede agregar o quitar elementos en el componente maestro y sus instancias. 

Añadir un elemento a un componente maestro
Añadir un elemento a un componente maestro

Si añade un objeto al componente maestro, también se añadirá a sus instancias respectivas. Al agregar un objeto, XD aplica el algoritmo de redimensionamiento inteligente y coloca automáticamente las restricciones en el objeto. Esto depende de la posición del nuevo objeto en relación con su contenedor. Al eliminarse un objeto del componente maestro, también se elimina en todas las instancias.

Los elementos también se pueden agregar o eliminar en una instancia, y las restricciones se colocan automáticamente en los objetos cuando se agregan. Cuando se elimina un elemento en una instancia, solo se elimina el elemento de esa instancia. El mismo elemento sigue existiendo en el componente maestro. 

Intercambiar componentes anidados

Hay muchos casos en los que se ha diseñado un componente mayor que tiene componentes anidados en su interior, como barras de modos y de navegación, que necesitan una personalización adecuada al contexto. El intercambio de un componente en XD es tan sencillo como arrastrar un componente desde el panel Activos y colocarlo sobre el componente del lienzo con el que desee intercambiarlo.

El intercambio de un componente maestro con una instancia reemplaza al maestro en todas las instancias
El intercambio de un componente maestro con una instancia reemplaza al maestro en todas las instancias
El intercambio de una instancia es una anulación local solo para esa instancia
El intercambio de una instancia es una anulación local solo para esa instancia

El intercambio de un componente maestro con una instancia reemplaza al maestro en todas las instancias. 

El intercambio de una instancia se convierte en una anulación local solo para esa instancia. Puede intercambiar entre sí, a nivel global, un componente completo o un componente anidado. 

Usar componentes entre documentos

Los activos vinculados permiten utilizar activos (componentes, colores y estilos de carácter) de uno o más 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 usar una instancia vinculada en un documento dependiente, pueden usarse anulaciones (estilo y apariencia, cambio de tamaño y diseño y estructura) para personalizar las instancias locales en el documento dependiente.

Activos vinculados
Activos vinculados

Si se modifica y guarda el componente maestro en el documento de origen, eso vendrá indicado por un distintivo azul junto a cada instancia del componente vinculado en el documento dependiente. Puede pasarse el cursor sobre el distintivo azul para obtener una vista previa de las actualizaciones en el panel Activos y, si está visible, en el lienzo de diseño.

Haga clic en el distintivo azul para aceptar las actualizaciones de un componente individual y haga clic en Actualizar todo, en la parte inferior del panel Activos, para actualizar todas las instancias del documento. Para obtener más información sobre activos vinculados, consulte Trabajar con activos vinculados.

Limitaciones de funciones

Debe conocer estas limitaciones de funciones al trabajar con componentes:

  • No se puede mover el componente maestro de un documento a otro.
  • Las opciones Editar componente maestro y Restablecer al maestro no están disponibles con selección múltiple de componentes.
  • Las anulaciones se eliminan si se selecciona la opción Convertir en trazado. Si continúa editando, se eliminarán las anulaciones de las instancias del objeto.
  • La opacidad y el giro no se admiten actualmente como propiedades del maestro si se edita desde el maestro. Cada instancia tiene su propia opacidad y giro.

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