Trabajar con componentes

Los componentes son elementos de diseño con una flexibilidad incomparable que ayudan a crear y mantener elementos repetidos mientras varían las instancias para diferentes contextos y diseños, como el uso de botones en diferentes contextos.

Siga leyendo para aprender a utilizar componentes para mantener fácilmente varias versiones del mismo elemento fundacional.

Familiarícese con estos conceptos antes de continuar en XD:

Crear un componente

Para crear un componente, seleccione Objeto > Crear componente. También puede seleccionar un objeto o grupo de objetos y utilizar cualquiera de estas opciones:

La primera vez que se crea un Componente en XD, se convierte en un Componente Principal, indicado mediante un diamante relleno en verde en la esquina superior izquierda. Puede editar un Componente como lo haría con cualquier otro elemento. 

Puede ver el nombre del componente seleccionado en el Inspector de propiedades. Para cambiar el nombre del componente, haga clic en el Inspector de propiedades.

Cuestiones a las que prestar atención

• XD no dispone de una vista dedicada para editar componentes principales. Cuando se edita un componente principal, lo edita en un lienzo.
• Si elimina un componente principal en un lienzo, todavía puede seleccionar una instancia y acceder a la opción Editar componente principal en el menú contexto. XD generará un componente principal en el lienzo.
• Si desea desvincular una sola instancia del componente, utilice la opción Desagrupar componente en el menú contextual. Sin embargo, si desea desvincular todas las instancias del lienzo, utilice la opción eliminar del panel Activos.
• Para asegurarse de que edita el componente principal, fíjese en la marca verde en forma de rombo con relleno en la esquina superior izquierda del cuadro delimitador.

Prácticas recomendadas

A continuación se indican algunas prácticas recomendadas para trabajar con componentes:

• ¿Está creando un gran sistema de diseño del componente? Asegúrese de organizar los componentes principales relacionados en mesas de trabajo independientes. Por ejemplo, los botones de una mesa de trabajo y las barras de navegación de otra mesa de trabajo.
• Al crear el sistema de diseño, asegúrese de crear los componentes en el nivel más estructurado para obtener la máxima flexibilidad y reutilización. Por ejemplo, al crear un componente de cuadro de diálogo, asegúrese de que los botones del cuadro de diálogo sean Instancias anidadas dentro del componente de cuadro de diálogo.

Trabajar con instancias del componente

Cada copia del componente principal se denomina instancia. Las instancias del componente se distinguen por una marca verde en forma de rombo sin relleno en la esquina superior izquierda. Al realizar cambios en el componente principal, los mismos cambios se aplican a todas las instancias.

Las modificaciones son cambios específicos que solo se aplican a esa instancia y no al componente principal. Si cambia una propiedad en una instancia, XD marca esa propiedad como una modificación. Las propiedades de una instancia pueden modificarse sin romper su conexión con el componente principal. 

Prácticas recomendadas

A continuación se indican algunas prácticas recomendadas para trabajar con instancias del componente:

• ¿Desea experimentar con una variación del componente? Seleccione Desagrupar componente en el menú contextual para separar la instancia del principal.
• Si está intentando localizar:
  • Todas las instancias de un componente en el lienzo: haga clic con el botón derecho en el componente del panel Activos y seleccione Resaltar en el lienzo.
  • El componente principal mientras se trabaja con una instancia: haga clic en la instancia y seleccione Editar componente principal.
  • La instancia del componente anterior después de editar el componente principal: haga clic con el botón derecho en el componente y seleccione Volver a la instancia anterior. 

Editar un componente principal

Al editar un componente principal, todas las instancias se actualizan a menos que contengan modificaciones para esa propiedad específica. 

Para editar un componente principal, seleccione una instancia o un componente en el lienzo y use cualquiera de estas opciones:

Una vez que haya terminado de editar el componente principal y quiera volver a la instancia anterior, haga clic con el botón derecho en el componente y seleccione Volver a la instancia anterior.

Observaciones importantes

• Las propiedades de rotación y opacidad no se propagan del componente principal a las instancias
• Para asegurarse de que edita el componente principal, tenga cuidado con la decoración del diamante relleno en verde de la esquina superior izquierda del cuadro delimitador.
  

Prácticas recomendadas

Se recomienda editar los componentes principales:

• Si elimina un Componente principal del lienzo, haga clic con el botón derecho en una instancia y seleccione Editar componente principal. XD genera un componente principal en el lienzo.

Modificar una instancia del componente

Los componentes principales ofrecen la coherencia necesaria para mantener un sistema de diseño. Cualquier cambio realizado en el componente principal se propaga automáticamente a las 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.

Las modificaciones son cambios específicos que solo se aplican a esa instancia y no al componente principal. Si cambia una propiedad en una instancia, XD marca esa propiedad como una modificación. Las propiedades anuladas siempre se conservan, incluso si se edita esa misma propiedad desde el componente principal. 

Para borrar las modificaciones y restablecer el componente maestro, haga clic con el botón derecho en una instancia y seleccione Restablecer el estado principal. 

Tipos de modificaciones

A continuación se incluyen algunos tipos de modificación y sus situaciones de uso:

Modificaciones de tamaño

Los componentes también son redimensionables y vienen con las potentes funcionalidades de redimensionamiento interactivo integradas. Si se cambia el tamaño del componente principal, las instancias cuyo tamaño no se haya cambiado manualmente como una modificación se redimensionan automáticamente. En consecuencia, las instancias cuyo tamaño se haya cambiado conservan su posición redimensionada como una modificación. 

¿Cómo funciona el cambio de tamaño en un componente principal o sus instancias?

• Puede cambiar independientemente el tamaño de una instancia, sin afectar al componente principal.
• Puede cambiar el tamaño de todo un componente y alterar el diseño de los elementos que contiene.
• Puede cambiar las instancias de los componentes, independientemente de los tamaños a los que las haya adaptado.

Al igual que con el redimensionamiento interactivo, XD recrea la ubicación de los elementos en un lienzo más grande o más pequeño, a medida que los cambie de tamaño.

En el Inspector de propiedades, puede cambiar Redimensionado interactivo de Automático a Manual , lo que le permitirá editar las restricciones para obtener un mayor control.

Modificaciones de aspecto

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

Modificaciones de diseño y estructura

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

Si añade un objeto al componente principal, 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 principal, también se elimina en todas sus 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 principal. 

Cuestiones a las que prestar atención

• Puede restablecer todas las modificaciones y no las modificaciones individuales al componente principal. 
• Si ha marcado una propiedad como una modificación en una instancia, seleccione Restablecer al estado principal para volver a sincronizarla con el principal. 

Prácticas recomendadas

A continuación se indican algunas prácticas recomendadas para modificaciones en instancias del componente:

• Para crear una variación del componente para reutilizarla, cree un estado en el componente principal en lugar de una instancia con modificaciones.
• Al modificar instancias, asegúrese de modificar la propiedad que no necesita actualizaciones del principal. Por ejemplo, en un componente de botón, la modificación del texto garantiza que la etiqueta pueda ser diferente, pero el tamaño y el color siguen sincronizados con el principal. 

Añadir estados a componentes

Los estados del componente permiten guardar diferentes variaciones del componente para cada reutilización. Una vez que haya modificado el componente principal, puede crear un estado a partir de esas modificaciones para que se pueda reutilizar fácilmente.

Por ejemplo, puede crear un componente de botón con diferentes variaciones como la primaria y la secundaria. Con los estados, puede crear variaciones utilizando modificaciones en el componente principal. 

Cuando trabaje con estados y componentes, recuerde estos puntos:

• Los estados creados en el componente principal están disponibles en todas las instancias de dicho componente. Esto le permite crear componentes con varias instancias y cambiar fácilmente los estados.
• Puede cambiarles el nombre y eliminarlos del selector de estados en el Inspector de propiedades.
• Puede agregar un desencadenador con una acción para cambiar de un estado de un componente a otro. Por ejemplo, puede cambiar del estado predeterminado al estado de ratón sobre el vínculo mientras pasa el ratón sobre un componente de botón. 

Añadir estados

Una vez que haya creado un componente, el Inspector de propiedades muestra el componente con un Estado predeterminado. Ahora puede añadir dos tipos de estados para sus componentes: Nuevo, Cursor por encima y Alternancia.

Crear un nuevo estado

Utilice Nuevo estado para situaciones en las que desee mostrar variaciones de un componente, como una versión deshabilitada o en la que se haya hecho clic de un componente.

Crear un estado de ratón sobre vínculo

Utilice Estado con cursor encima si desea que el componente cambie y muestre un estado diferente al pasar el ratón sobre el componente al interactuar con el prototipo.

Crear un estado ALTERNANCIA

Use el estado Alternancia cuando desee crear componentes con acciones interactivas de botones deslizantes, botones de opción, casillas de verificación, etc. 

Visualización y gestión de estados

Después de crear los estados para su componente, puede editar las propiedades de su componente y visualizar cómo el componente aparece al interactuar con él. Estos son algunos flujos de trabajo asociados con los estados:

Modificaciones en estados

Todas las ediciones que realice en el estado predeterminado del componente principal, se propagarán al estado predeterminado en todas las instancias. De manera similar, editar un estado específico en el componente principal resulta en todas las instancias que reciben dichas ediciones para ese estado específico. Asegúrese siempre de que edita el estado en el componente principal para que se actualice en todas las instancias.

Con los estados, puede modificar propiedades como texto, mapa de bits, tamaño, diseño y apariencia. Una vez que se modifica una propiedad de estado en una instancia, ya no recibirá actualizaciones para esas propiedades desde el componente principal.

Si no está satisfecho con los resultados de las anulaciones, restablezca al componente principal original haciendo clic con el botón derecho en una instancia y seleccionando Restablecer a estado principal. Esto borra todas las anulaciones de una instancia y la vuelve a restablecer al componente principal.

Añadir interactividad

Puede utilizar los desencadenadores Tocar, Pasar por encima, Teclas y mando de juego y Voz para conectar las interacciones entre los estados del componente en el modo Prototipo. Conectar las interacciones entre los estados del componente es parecido a conectar las interacciones entre mesas de trabajo. La principal diferencia es que, al conectar interacciones entre estados del componente, se elige un estado como destino en lugar de una mesa de trabajo.

Puede definir varias interacciones para el mismo estado del componente. Por ejemplo, si tiene un botón deslizante con los estados Tocar y Pasar por encima, puede definir esas interacciones repitiendo los pasos 4-7 dos veces para definir los estados Tocar y Pasar por encima. Después de crear varias interacciones, puede ver la sección Interacción que muestra las interacciones definidas. Alterne entre esas interacciones y modifique las propiedades de interacción para que se ajusten a sus requisitos. 

Si desea crear interacciones de paso del cursor anidadas, como menús desplegables o elementos emergentes con botones de varios estados, también puede anidar componentes con estados de pasar por encima.

Cuestiones a las que prestar atención

• Al hacer doble clic en un componente, el selector de estado dejará de aparecer en el Inspector de propiedades .
• XD solo admite Tocar y Pasar por encima y Teclas y mando de juego como desencadenadores entre estados.
• XD no propaga las modificaciones de un estado a otro en las instancias de estado.

Prácticas recomendadas

A continuación se indican algunas prácticas recomendadas al agregar estados a componentes:

• Cree siempre los estados de los componentes para reutilizar distintas variaciones del mismo.
• Puede cambiar al modo Prototipo y editar manualmente las interacciones entre distintos estados.
• Al agregar interactividad entre estados, si cambia propiedades como el color, seleccione la acción como Transición con ninguno o Disolver como animación. Si va a añadir una animación a la posición o al tamaño entre estados, seleccione Animación automática como acción.
• Al crear un nuevo estado, puede empezar replicando el estado predeterminado o un estado existente. En función del objetivo final, puede elegir seleccionar el estado predeterminado y, a continuación, hacer clic en + para duplicarlo para un nuevo estado o seleccionar un estado existente y, a continuación, hacer clic en + para duplicar dicho estado. Cuando se crea un nuevo estado a partir de un estado existente, el nuevo estado también tendrá las mismas modificaciones. Esto significa que las propiedades modificadas no recibirán ninguna actualización del estado predeterminado. En la mayoría de los casos de uso, se recomienda crear nuevos estados haciendo clic en + para el estado predeterminado. Al comenzar con el estado predeterminado, se garantiza que esté sincronizado con el componente principal y que no contenga modificaciones.

Administrar componentes

Agregar interactividad a componentes

Puede agregar interactividad a componentes y entre estados. Cuando se crea una interacción en el componente principal, todas las instancias de dicho componente reciben esa interacción. Cualquier cambio en las interacciones en el componente principal actualiza automáticamente las interacciones en las instancias.

Asimismo, puede modificar las interacciones en instancias, tras lo cual ya no recibirá actualizaciones del componente principal. Al igual que las modificaciones de diseño, puede modificar las propiedades de interacción de un componente.

Cuestiones a las que prestar atención

• No hay forma de evitar la propagación de interacciones del componente principal a las instancias.
• No hay forma de distinguir entre una interacción agregada a una instancia (como una modificación) y la interacción heredada del componente principal.
• Los estados admiten un conjunto limitado de acciones y desencadenadores. 

Prácticas recomendadas

Al agregar interactividad a un componente se recomienda lo siguiente:

• Al copiar y pegar o compartir componentes entre documentos, XD no conserva las interacciones del componente a la mesa de trabajo, ya que no podemos garantizar que las mesas de trabajo de destino estén siempre disponibles. Sin embargo, XD mantiene el estado en interacciones de estado de cada componente. Lo que significa es que para un componente que tiene un estado Pasar por encima y un desencadenador Tocar para una mesa de trabajo, al pegar esto en otro documento, XD conserva la interacción de estado Pasar por encima y descarta el desencadenador Tocar en la mesa de trabajo. 
• Elija cuándo añadir una interacción al componente principal frente a la instancia.
• Si todas las instancias comparten el mismo destino, conectar el componente principal es más eficaz, ya que se propaga automáticamente a todas ellas. Por ejemplo, un botón Inicio que va a la pantalla de inicio.
• Si todas las instancias o algunas de ellas tienen destinos diferentes, es más fácil conectar las instancias individuales en lugar del componente principal. Por ejemplo, un botón principal que se utiliza en todo el proyecto y que tiene destinos diferentes según su uso y contexto.

Más información

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

Duración: 9 minutos

¿Qué viene después?

Hemos comenzado a trabajar con componentes en XD. Dé un paso más y aprenda a utilizar componentes anidados en XD.

¿Tiene alguna pregunta o idea?