Guía del usuario Cancelar

Agregar varios estados a componentes

  1. Guía del usuario de Adobe XD
  2. Introducción
    1. Novedades de Adobe XD
    2. Preguntas habituales
    3. Diseñar, crear prototipos y compartir con Adobe XD
    4. Requisitos del sistema
      1. Requisitos de hardware y software
      2. Adobe XD, Big Sur y Apple Silicon | macOS 11
    5. Conceptos básicos del espacio de trabajo
    6. Cambiar el idioma de la aplicación en Adobe XD
    7. Acceder a kits de diseño de interfaz de usuario
    8. Accesibilidad en Adobe XD
    9. Métodos abreviados de teclado
    10. Consejos y trucos
    11. Opciones de suscripción de Adobe XD
    12. Cambios en el plan de inicio de XD
  3. Diseño
    1. Mesas de trabajo, guías y capas
      1. Empezar a usar mesas de trabajo
      2. Usar guías y cuadrículas
      3. Crear mesas de trabajo con desplazamiento
      4. Trabajar con capas
      5. Crear grupos de desplazamiento
    2. Formas, objetos y trazados
      1. Seleccionar, redimensionar y rotar objetos
      2. Mover, alinear, distribuir y organizar objetos
      3. Agrupar, bloquear, duplicar, copiar y voltear objetos
      4. Establecer el trazo, el relleno y las sombras paralelas de objetos
      5. Crear elementos repetidos
      6. Crear diseños en perspectiva con transformaciones 3D
      7. Editar objetos utilizando operaciones booleanas
    3. Texto y fuentes
      1. Trabajar con herramientas de dibujo y texto
      2. Fuentes en Adobe XD
    4. Componentes y estados
      1. Trabajar con componentes
      2. Trabajar con componentes anidados
      3. Añadir varios estados a componentes
    5. Máscaras y efectos
      1. Crear una máscara con formas
      2. Usar efectos de desenfoque
      3. Crear y modificar degradados
      4. Aplicar efectos de mezclas
    6. Maquetación
      1. Redimensionado interactivo y restricciones
      2. Establecer relleno fijo para componentes y grupos
      3. Crear diseños dinámicos con pilas
    7. Vídeos y animaciones de Lottie
      1. Cómo usar los vídeos
      2. Crear prototipos mediante vídeos
      3. Usar animaciones de Lottie
  4. Prototipo
    1. Crear prototipos interactivos
    2. Animar prototipos
    3. Propiedades de objetos compatibles con la animación automática
    4. Crear prototipos con teclado y mando de juego
    5. Crear prototipos utilizando comandos de voz y reproducción
    6. Crear transiciones temporizadas
    7. Añadir superposiciones
    8. Diseñar prototipos de voz
    9. Crear vínculos de anclaje
    10. Crear hipervínculos
    11. Previsualizar diseños y prototipos
  5. Compartir, exportar y revisar
    1. Compartir mesas de trabajo seleccionadas
    2. Compartir diseños y prototipos
    3. Establecer permisos de acceso de vínculos
    4. Usar prototipos
    5. Revisar prototipos
    6. Trabajar con especificaciones de diseño
    7. Compartir especificaciones de diseño
    8. Inspeccionar especificaciones de diseño
    9. Controles de las especificaciones de diseño
    10. Revisar y comentar especificaciones de diseño
    11. Exportar activos de diseño
    12. Exportar y descargar activos de especificaciones de diseño
    13. Grupos compartidos para empresas
  6. Sistemas de diseño
    1. Sistemas de diseño con Bibliotecas Creative Cloud
    2. Trabajar con activos de documentos en Adobe XD
    3. Trabajar con Bibliotecas Creative Cloud en Adobe XD
    4. Migrar activos vinculados a Bibliotecas Creative Cloud
    5. Trabajar con tokens de diseño 
    6. Usar activos de Bibliotecas Creative Cloud
  7. Documentos en la nube
    1. Documentos en la nube en Adobe XD
    2. Colaborar y coeditar diseños
    3. Coeditar documentos que compartan con usted
  8. Integraciones y complementos
    1. Trabajar con activos externos
    2. Trabajar con activos de diseño de Photoshop
    3. Copiar y pegar activos desde Photoshop
    4. Importar o abrir diseños de Photoshop
    5. Usar activos de Illustrator en Adobe XD
    6. Abrir o importar diseños de Illustrator
    7. Copiar vectores de Illustrator en XD
    8. Complementos para Adobe XD
    9. Crear y administrar complementos
    10. Integración de Jira para XD
    11. Complemento Slack para XD
    12. Complemento Zoom para XD
    13. Publicar diseño de XD en Behance
  9. XD para iOS y Android
    1. Vista previa en dispositivos móviles
    2. Preguntas frecuentes de Adobe XD para dispositivos móviles
  10. Solución de problemas
    1. Problemas conocidos y resueltos
      1. Problemas conocidos
      2. Problemas resueltos
    2. Instalación y actualizaciones
      1. XD aparece como incompatible en Windows
      2. Código de error 191
      3. Código de error 183
      4. Problemas al instalar complementos de XD
      5.  Solicitud para desinstalar y volver a instalar XD en Windows 10
      6. Problemas con la migración de preferencias
    3. Inicio y cierre inesperado
      1.  XD se cierra al iniciar la aplicación en Windows 10
      2.  XD se cierra al cerrar sesión en Creative Cloud
      3. Problema con el estado de suscripción en Windows
      4. Aviso de aplicación bloqueada al iniciar XD en Windows
      5. Generación de volcados de fallos en Windows
      6. Recopilación y uso compartido de registros de errores
    4. Documentos en la nube y bibliotecas Creative Cloud
      1. Problemas con documentos en la nube de XD
      2. Problemas con componentes vinculados
      3. Problemas con bibliotecas y enlaces
    5. Crear prototipos, publicar y revisar
      1. No se pueden grabar interacciones de prototipos en macOS Catalina
      2. Problemas con flujos de trabajo de publicación
      3. Los vínculos publicados no aparecen en los navegadores
      4. Los prototipos no se renderizan correctamente en los navegadores.
      5. El panel de comentarios aparece repentinamente en los vínculos compartidos
      6. No es posible publicar bibliotecas
    6. Importar, exportar y usar otras aplicaciones
      1. Importar y exportar en XD
      2. Archivos de Photoshop en XD
      3. Archivos de Illustrator en XD
      4. Exportar a After Effects desde XD
      5. Archivos de Sketch en XD
      6. Aplicaciones de terceros que no aparecen en Exportar

Obtenga información sobre cómo agregar varios estados a componentes en su sistema de diseño para desarrollar contenido interactivo fácilmente.

Los componentes que cambian su apariencia en función de las interacciones del usuario son extremadamente útiles para crear prototipos de alta fidelidad.

Puede crear un componente, agregarle múltiples variaciones (estados) y conectarlo para imitar el comportamiento del usuario del mundo real (sin tener que copiar sus componentes varias veces). 

Tener componentes con estados también facilita la administración de sus contenidos y la creación de sistemas de diseño interactivos. 

Algunos ejemplos comunes del componente con estados son los botones, las casillas de verificación y los botones de alternar animados. Estos componentes deben cambiar cuando los usuarios interactúen con ellos al tocarlos o al pasar el cursor sobre ellos.

Agregar estados del componente

Una vez que haya creado un componente, en el Inspector de propiedades hay disponible una nueva sección que incluye el componente con un Estado predeterminado. Ahora puede añadir tres tipos de estados para sus componentes: Nuevo estadoEstado con cursor encima o Estado de alternancia. Siga leyendo para saber cómo añadir un estado.

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.

Haga clic en el botón + junto al estado predeterminado del componente principal en el Inspector de propiedades y seleccione Nuevo estado.

Nuevo estado no tiene ninguna interactividad definida en el estado. Tiene que cablear la interacción en modo Prototipo. Para obtener más información, consulte Agregar interactividad a componentes.

Estado con cursor encima

Utilice Estado con cursor encima si desea que su componente cambie y muestre un estado diferente cuando un usuario pasa el cursor sobre el componente. 

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

Cuando se usa Estado con cursor encima, no tiene que ir al modo Prototipo para cablear la interacción. Se hace automáticamente.

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

Adición de estados a un componente
Adición de estados a un componente

 Puede añadir estados solo a un componente principal. Las instancias del componente siempre heredan sus estados del componente principal.

Visualizar componentes en diferentes estados

Después de crear los estados para su componente, puede editar las propiedades de su componente y visualizar cómo el componente aparece para el usuario que interactúa con él. 

  1. Seleccione el componente.
  2. Vaya al Inspector de propiedades y alterne o cambie entre varios estados.
Cambiar de estado utilizando el Inspector de propiedades.
Cambiar de estado utilizando el Inspector de propiedades.

Agregar interactividad a los componentes

Puede utilizar los desencadenadores Tocar, Pasar el cursorTeclas 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.

Añadir interactividad
Cableado de estados del componente para crear una interacción por toque

  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 el cursor (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.

 Los estados vienen indicados sobre las mesas de trabajo en el menú desplegable separados por una raya.

 

Varias interacciones para un estado del componente
Varias interacciones para un estado del componente

Puede definir varias interacciones para el mismo estado del componente. Por ejemplo, si el botón deslizante está en estado activado, estado desactivado y estado con cursor encima de forma predeterminada, puede elegir las interacciones una a una en el estado predeterminado. Repita los pasos 4 a 7 para definir la interacción con el estado adicional. 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.

Editar estados del componente

Cuando define una interacción en un estado del componente principal, todas las instancias de ese componente heredan automáticamente esas interacciones. Esto significa que si conecta un componente a una mesa de trabajo o estado específico, todas las instancias de ese componente también contienen esas interacciones. 

Cuando tiene una instancia seleccionada en el lienzo y desea editar estados existentes o agregar nuevos estados al componente principal, puede hacerlo a través de una de las siguientes opciones:

Opción 2

Haga clic en Editar para cambiar la selección al componente principal para agregar o editar estados.

Haga clic en Editar para cambiar la selección al componente maestro para agregar o editar estados

Opción 1

Haga clic con el botón derecho en la instancia del componente y seleccione Editar componente principal.

Las instancias del componente están vinculadas con el componente principal. Los cambios de la cascada de un componente principal a las instancias. Para obtener más información, consulte Administrar componentes con un solo origen.

Cambiar de nombre, reordenar y eliminar estados de componentes

Cambiar el nombre del estado de un componente: Haga doble clic en el nombre del estado del componente en el Inspector de propiedades y escriba un nuevo nombre.

Reordenar los estados de los componentes principales: arrastre los estados de un componente principal del Inspector de Propiedades para reordenarlos.

Eliminar un estado del componente de un componente principal: haga clic con el botón derecho del ratón 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 en el lienzo vuelven al estado predeterminado.

 Solo puede cambiar el nombre de los estados y eliminarlos en el componente principal. No puede cambiar el nombre del estado predeterminado.

Publicar y compartir estados del componente

Puede publicar componentes y sus estados asociados en una biblioteca Creative Cloud desde el panel Bibliotecas y distribuirlos como parte de un sistema de diseño. Para obtener más información, consulte Trabajar con Bibliotecas Creative Cloud en XD.

Administrar componentes con un único origen

Para simplificar la administración de los estados de los componentes, solo puede agregar, cambiar de nombre y eliminar estados desde un componente principal. Las instancias de ese componente heredan automáticamente cualquier cambio de estado realizado en el componente principal. Puede identificar fácilmente el componente principal desde el diamante con relleno verde en el lienzo o desde la sección Componente en el Inspector de propiedades. Las instancias tienen un diamante verde sin relleno. 

Herencia de estados del componente

Siga estos principios mientras edita estados en componentes principales e instancias:

  • Puede anular las propiedades (texto, mapa de bits, tamaño, apariencia o cambios de estructura) de los estados, al igual que puede anular una instancia del componente. 
  • Cuando edita el estado en un componente principal, ese estado se actualiza en todas las instancias.
  • Cuando edita el estado en una instancia, se trata como una anulación única y ya no sincroniza esa propiedad con los cambios del estado del 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.

Restablecer una anulación de estado al componente principal original
Restablecer una anulación de estado al componente principal original

Para obtener más información sobre cómo funcionan las anulaciones en componentes, consulte Trabajar con componentes en XD.

Estados del componente vinculados en los documentos

Puede crear y mantener un único origen para todos sus componentes reutilizables junto con sus estados e interacciones definidos. Por ejemplo, si tiene un componente de botón con 5 estados definidos: Primario, Secundario, Pasar el cursor, Tocar y Desactivado, cuando copia y pega ese componente en los documentos, XD crea un componente vinculado que mantiene todos los estados del componente definidos junto con las interacciones de estado. 

Si cambia las propiedades de su componente vinculado (estilo, interacciones, etc.) en el documento de origen, XD notifica a los documentos con instancias de dicho componente vinculado con esas actualizaciones. En este punto, puede obtener una vista previa de los cambios y elegir aceptarlos o pasarlos por alto. 

Los componentes vinculados solo admiten interacciones definidas entre estados y no mesas de trabajo.

Ejemplos y archivos de muestra

¿Desea crear un conmutador que se active y se desactive cuando un usuario lo toque? 

Crear un botón de conmutador animado utilizando nuestro contenido de muestra
Crear un botón de conmutador animado utilizando nuestro contenido de muestra

  1. Descargue el archivo de muestra de botón de alternancia y ábralo en XD.
  2. Seleccione todo el objeto (asegúrese de que el círculo esté seleccionado) y presione Cmd + K (macOS) o Ctrl + K (Win).
  3. Añada un nuevo estado y asígnele el nombre Deshabilitado.
  4. En el estado Desactivado, seleccione el rectángulo redondeado y cambie el relleno a gris. Seleccione el círculo y muévalo hacia la izquierda.
  5. En modo Prototipo, cablee las siguientes interacciones:
    • Estado predeterminado: Elija el Desencadenador Tocar, la Acción Animación automática y el Destino Deshabilitado.
    • Estado deshabilitado: establezca el Desencadenador en TocarAcción en Animación automáticaDestino en Estado predeterminado.
  6. (Opcional): si desea que el botón conmutador se ilumine al pasar el cursor sobre él, seleccione el componente, añada un Estado con cursor encima y luego edite el componente para tener un efecto de brillo.

Más información

Mire este vídeo para obtener más información sobre cómo puede crear interactividad usando componentes con estados. 

Duración: 7 minutos.

¿Qué viene después?

Le hemos introducido en el uso del componente con estados. Siga esta publicación de la comunidad y descubra cómo usar esta función para crear casillas de verificación.

¿Tiene alguna pregunta o idea?

Pregunte a la comunidad

Si tiene alguna pregunta que hacer o una idea que compartir, venga y participe en la Comunidad de Adobe XD. Nos gustaría que nos dejara sus comentarios y ver sus creaciones.

Logotipo de Adobe

Inicia sesión en tu cuenta