Trabajar con componentes

Aprenda a trabajar con componentes en sistemas de diseño en Adobe XD.

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.

Componentes

¿Es la primera vez que usa XD?

Obtener XD

Conozca los conceptos básicos de la aplicación

¿Ya está usando XD?

Actualizar la aplicación

Descubra las novedades

Pruébela

Obtener kit de IU de muestra

.xd; 80 MB

Antes de continuar

Familiarícese con estos conceptos de 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:

Inspector de propiedades
En el Inspector de propiedades

Haga clic en el icono + en la sección Componente del Inspector de propiedades.

Panel Activos
En el panel Activos

Haga clic en el botón +, en la sección Componentes del panel Activos.

Menú contextual
En el menú contextual

Haga clic con el botón derecho en un objeto y seleccione Crear componente (CMD/CTRL+K).

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

Crear componentes
Componente principal

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.

Modificación de instancia
Modificación de instancia

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. 

Componente principal
Componente principal

Instancia
Instancia

Instancia con modificaciones
Instancia con modificaciones

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.

Editar un componente principal

Al editar un componente principal, todas las instancias cambian a menos que incluyan modificaciones de esa propiedad específica. 

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

Menú contextual
En el menú contextual del lienzo

Haga clic en una instancia en el lienzo y seleccione Editar componente principal.

Panel Activos
En el panel Activos

Haga clic en un componente del panel Activos y seleccione Editar componente principal.

Inspector de propiedades
En el Inspector de propiedades

Seleccione el icono del lápiz de edición situado al lado de Estado predeterminado en la sección Componente.

Cuestiones a las que prestar atención

  • Las propiedades de rotación y opacidad no se propagan del componente principal a las instancias.
  • Para asegurarse de que edita el componente principal, fíjese en la marca verde con forma de rombo con relleno en 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

Modificar en instancia del componente
Modificar en una instancia del componente

Tipos de modificaciones

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

Modificaciones en estructura y diseño
Tipos de modificaciones: texto, mapa de bits, tamaño, aspecto y diseño

  • Texto: puede editar el contenido de texto en una instancia del componente, por ejemplo, al cambiar la etiqueta de un botón Componente. 
  • Mapa de bits: puede reemplazar el contenido de mapa de bits en una instancia del componente, por ejemplo, al reemplazar una imagen en un componente de imagen de perfil.
  • Tamaño: puede cambiar el tamaño de una instancia aplicando relleno y un redimensionamiento interactivo, por ejemplo, al modificar el tamaño de los campos de texto de un formulario.
  • Aspecto: puede modificar las propiedades de apariencia, como el color de relleno, el borde y el desenfoque, por ejemplo, al modificar el color de fondo de las notificaciones.
  • Diseño y estructura: puede agregar, eliminar y mover objetos dentro de una instancia del componente, por ejemplo, al modificar los menús desplegables con entradas de menú adicionales.

Modificaciones de tamaño

Los componentes también son redimensionables y vienen con las potentes posibilidades 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

Modificación de aspecto
Modificación 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.

Modificación de diseño y estructura
Modificaciones de diseño y estructura

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

En el modo Diseño, haga clic en el botón + junto a Estado predeterminado del componente principal en el Inspector de propiedades, y seleccione Nuevo estado.

De forma predeterminada, el nuevo estado no tiene ninguna interactividad definida en él. Para obtener más información sobre cómo conectar una interacción a componentes, consulte Agregar interactividad a los componentes.

Nuevo estado
Nuevo estado

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.

En el modo Diseño, haga clic en el botón + junto a Estado predeterminado del componente principal en el Inspector de propiedades y seleccione Estado del ratón sobre el vínculo.

De forma predeterminada, el estado tiene interactividad definida en él. 

Estado con cursor encima
Estado con cursor encima

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. 

En el modo Diseño, haga clic en el botón + junto a Estado predeterminado del componente principal en el Inspector de propiedades y seleccione Estado de alternancia.

Una vez creado el estado de alternancia, XD generará automáticamente y de forma predeterminada dos interacciones de toque bidireccionales entre el Estado predeterminado y el Estado de alternancia, garantizando una interactividad total.

Estado de alternancia
Estado de alternancia

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:

Cambiar estados

Cambiar estados
Cambiar estados

Seleccione el componente y en el Inspector de propiedades, alterne o cambie entre varios estados.

Cambiar el nombre de estados

Cambiar el nombre de estados
Cambiar el nombre de estados

Haga clic en el nombre de estado del componente en el Inspector de propiedades y añada un nuevo nombre. Solo puede cambiar el nombre de los estados y eliminarlos en el componente principal. No puede cambiar el nombre del estado predeterminado.

Eliminar estados

Eliminar estados
Eliminar estados

Haga clic con el botón derecho en el estado del componente y seleccione Eliminar. Cuando elimina un estado del componente del componente principal, las instancias del componente que tengan ese estado activo vuelven al estado predeterminado.

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

  1. Cambie a la pestaña Prototipo.
  2. Seleccione el estado del componente desde el que desea crear la interacción. 
  3. Haga clic en el icono > en el estado del componente o en el signo + en la sección Interacción en Inspector de propiedades para agregar una interacción.
  4. Elija Tocar (para eventos de clic), Pasar por encima (para acciones de mover el ratón por encima), Teclas y mando de juego (usos de navegación y accesibilidad) o Voz (usos de navegación y accesibilidad), como desencadenador.
  5. Seleccione un tipo de acción (como Animación automática o Transición).
  6. Seleccione un estado como destino.
  7. Cambie a la ventana Vista previa y pruebe la interactividad de su componente.
Crear una interacción por toque
Cableado de estados del componente para crear una interacción por toque

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 cursor por encima anidadas, como menús desplegables o elementos emergentes con botones de varios estados, también puede anidar componentes con estados de cursor 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

Ver 

Revelar componentes en activos
Mostrar componentes del panel Activos

Puede ver o arrastrar nuevas instancias al lienzo desde el panel Activos.
Para localizar todas las instancias, haga clic con el botón derecho en un componente en el panel Activos y seleccione Resaltar en el lienzo. 
Para localizar componentes en el panel Activos, haga clic con el botón derecho en una instancia del componente en el lienzo y seleccione Revelar componente en el panel Activos

Editar, cambiar de nombre o eliminar

Menú contextual del panel Activos
Menú contextual del panel Activos

Haga clic con el botón derecho en un componente en el panel Activos o seleccione una instancia en el lienzo y utilice las opciones del menú contextual para editar o eliminar. Para cambiar el nombre del componente, haga clic con el botón derecho y seleccione Cambiar nombre. 

Restablecer a un estado principal

Restablecer a un estado principal
Restablecer a un estado principal

Haga clic con el botón derecho en una instancia y seleccione Restablecer a estado principal para borrar todas las modificaciones y vincularlo de nuevo al componente principal.
Para disociar una instancia del principal, haga clic con el botón derecho en una instancia y seleccione Desagrupar un componente.
 

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?

Pregunte a la comunidad

¿Tiene alguna pregunta o idea para compartir? Entre y participe en la Comunidad de Adobe XD. ¡Nos gustaría tener noticias suyas y ver sus creaciones!

Logotipo de Adobe

Inicia sesión en tu cuenta