Trabajar con componentes en XD

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 casos, 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. 

Vamos a usar estos flujos de trabajo para aprender cómo trabajar con componentes.

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 con relleno verde en la esquina superior izquierda.

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

• Haga clic con el botón derecho en un objeto y seleccione Crear componente (CMD+K).
• Haga clic en el botón +, en la sección de componentes del panel Activos.
• Desde la aplicación XD, seleccione Objeto > Crear componente.
• Seleccione un objeto y haga clic en el icono + en la sección Componente del Inspector de propiedades.

Los componentes pueden tener múltiples estados en Adobe XD, lo que le permite desarrollar fácilmente contenido dinámico interactivo sin tener que usar varios objetos en un proyecto de diseño.

Después de crear el componente, puede continuar y crear múltiples estados para el componente y conectarlos para crear interacciones. Para obtener más información, consulte Crear componentes con estados.

Trabajar con instancias de componentes

Cada copia del componente maestro que se crea se denomina una instancia. Las instancias de componentes se distinguen por un diamante verde sin relleno en la esquina superior izquierda. 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. 

Las propiedades de una instancia pueden 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:

• Haga clic con el botón derecho en una instancia del lienzo y seleccione Editar componente maestro.
• Haga clic en un componente del panel de contenidos y seleccione Editar componente maestro.
• Seleccione una instancia en el lienzo y seleccione el icono de editar lápiz junto a Estado predeterminado en la sección Componente en el Inspector de propiedad.

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. 

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.

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.

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

Las propiedades que no se hayan anulado en instancias, como el radio de vértice en estos botones, siempre 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.

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. 

Cambios de tamaño y diseño

XD 12.0 aportó una función denominada redimensionado interactivo 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.

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. 

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.

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.

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.

Anulaciones de cableado

Al cablear componentes, es útil comprender los siguientes principios: 

• En el modo Prototipo, cuando cablea una interacción a un componente maestro, las instancias de los componentes también se cablean automáticamente de la misma manera. 
• Si edita las propiedades de una interacción en el componente maestro, todas las instancias reciben esas actualizaciones siempre que no se anulen en una instancia. 
• Puede eliminar o editar (anular) interacciones en una instancia heredada del maestro. Por ejemplo, si la instancia tiene un desencadenador por toque heredado del componente maestro, un usuario puede modificar las propiedades de dicho desencadenador por toque, como su acción o destino, etc. Esto significa que la instancia ya no recibirá actualizaciones futuras de esa interacción por toque del maestro. Esto se llama anular una interacción heredada.  
• Además, un usuario también puede añadir más interacciones a una instancia. Para obtener más información, consulte Conectar las pantallas.

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. 

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

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 pasar el cursor sobre el distintivo azul para obtener una vista previa de los cambios 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 maestroy 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.