某些 Creative Cloud 应用程序、服务和功能在中国不可用。
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 de componentes 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.
Una vez que haya creado un componente, el Inspector de propiedades tiene una nueva sección que incluye el componente con un Estado predeterminado. Ahora puede agregar dos tipos de estados para sus componentes: Nuevo estado y Estado con cursor encima. Siga leyendo para saber cómo agregar un estado.
Utilice Nuevo estado para escenarios en los 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 maestro en el Inspector de propiedades y seleccione Nuevo estado.
Nuevo estado no tiene ningún 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.
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 maestro en el Inspector de propiedades y seleccione Estado del ratón sobre el vínculo.
Cuando se usa Estado con cursor encima, no tiene que ir al modo Prototipo para cablear la interacción. Se hace automáticamente.
Puede agregar estados solo a un componente maestro. Las instancias de componentes siempre heredan sus estados del componente maestro.
Puede cablear con el ratón y tocar las interacciones entre los estados del componente en el modo Prototipo. Conectar las interacciones de los estados de componentes es parecido a agregar interacciones entre mesas de trabajo. La principal diferencia es que al conectar interacciones de estados de componentes, elige un estado como destino en lugar de una mesa de trabajo.
1. Seleccione un componente y cambie al modo de Prototipo.
Puede ver todos los estados que creó en la sección Componentes en el Inspector de propiedades.
2. Haga clic en el icono > en el componente o el signo + en la sección Interacción en el Inspector de propiedades para agregar una interacción.
3. Seleccione el estado en el que desea agregar la interacción.
4. Elija Pulsar (para eventos de clic) o Pasar el cursor (para acciones con el cursor encima) 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 se indican encima de las mesas de trabajo en el menú desplegable separado con un divisor.
Puede definir varias interacciones para el mismo estado del componente. Por ejemplo, si tiene un interruptor de alternancia que tiene el estado de Tocar y el de Pasar el cursor, puede definir esas interacciones repitiendo los pasos 4-7 dos veces para definir los estados de Tocar y de Pasar el cursor. 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.
Cuando define una interacción en un estado del componente Maestro, 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 maestro, puede hacerlo a través de una de las siguientes opciones:
Las instancias de componentes están vinculadas con el componente maestro. Los cambios de la cascada de un componente maestro a las instancias. Para obtener más información, consulte Administrar componentes con un solo origen.
Cambiar el nombre el estado de un componente: Haga doble clic en el nombre del estado del componente en el Inspector de propiedades y escriba un nuevo nombre.
Eliminar el estado de un componente de un componente maestro: Haga clic con el botón derecho en el estado del componente y seleccione Eliminar. Cuando elimina un estado de componente del componente maestro, las instancias de componentes 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 maestro. No puede cambiar el nombre del estado predeterminado.
Para simplificar la administración de los estados de los componentes, solo puede agregar, cambiar de nombre y eliminar estados desde un componente maestro. Las instancias de ese componente heredan automáticamente cualquier cambio de estado realizado en el componente maestro. Puede identificar fácilmente el componente maestro 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.
- 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 de componente.
- Cuando edita el estado en un componente maestro, 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 maestro.
Si no está satisfecho con los resultados de las anulaciones, restablezca al componente maestro original haciendo clic con el botón 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.
Para obtener más información sobre cómo funcionan las anulaciones en componentes, consulte Trabajar con componentes en XD.
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, Pulsar 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.
- Descargue el archivo de muestra de botón de alternancia y ábralo en XD.
- Seleccione todo el objeto (asegúrese de que el círculo esté seleccionado) y presione Cmd + K (macOS) o Ctrl + K (Win).
- Añada un nuevo estado y asígnele el nombre Deshabilitado.
- 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.
- En modo Prototipo, cablee las siguientes interacciones:
- Estado predeterminado: establezca el Desencadenador en Tocar, Acción en Animación automática y Destino en Deshabilitado.
- Estado deshabilitado: establezca el Desencadenador en Tocar, Acción en Animación automática y Destino en Estado predeterminado.
- (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.
Mire este vídeo para obtener más información sobre cómo puede crear interactividad usando componentes con estados.
Tiempo de visionado: 7 minutos.
Le hemos introducido en el uso de componentes con estados. Siga esta publicación de la comunidad y descubra cómo usar esta función para crear casillas de verificación.
Si tiene alguna pregunta que hacer o una idea que compartir, venga y participe en la Comunidad de Adobe XD. Nos gustaría tener noticias suyas y ver sus creaciones.
Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.