Quién puede utilizar esta función

Está disponible en cualquier equipo o plan.

Cualquier persona con acceso de tipo Puede editar puede crear componentes interactivos.

Cualquier persona con acceso de tipo Puede editar puede publicar componentes en una biblioteca.

¿Acabas de empezar en la creación de prototipos? Echa un vistazo a nuestra Guía de creación de prototipos en Figma →

Los componentes interactivos te permiten crear interacciones de prototipo entre variantes en un conjunto de componentes. Cada vez que añades una instancia a tus diseños, esas interacciones están configuradas y listas para usar. Esto te ahorra tiempo al crear prototipos y evita el lío de conexiones innecesario.

• Crea elementos interactivos que cambian automáticamente entre variantes, como botones que cambian de estado de flotación a presionado.
• Establece interacciones predeterminadas a nivel de componente y elimina las suposiciones al construir prototipos.
• Reduce la cantidad de marcos y conexiones necesarias para prototipar campos de entrada, como un conjunto de casillas de verificación o interruptores.

Antes de las interacciones de variante

En el ejemplo a continuación, hemos añadido todas las posibles conexiones para prototipar un marco con cinco casillas de verificación. Sin componentes interactivos, necesitaríamos duplicar el mismo marco 32 veces y crear 160 conexiones entre ellos para crear un prototipo posible de cada combinación.

Con interacciones de variantes

Con componentes interactivos, solo necesitamos añadir una instancia del componente interactivo a nuestro diseño y sus variantes de interacción estarán listas para usar. Cuando vemos el prototipo, Figma cambia automáticamente entre las variantes marcadas y desmarcadas.

Crear componentes interactivos

Solo puedes crear componentes interactivos usando variantes del mismo conjunto de componentes. Si no tienes un conjunto de componentes para trabajar, primero necesitarás crear uno. Aprende a crear variantes →

Crear interacciones de variantes

Los componentes interactivos presentan una nueva acción de prototipo: Cambiar a.

1. Navega a la pestaña Prototipo de la barra lateral derecha.
2. Haz clic en el del cuadro de límite del marco y arrástralo al destino variante. También puedes hacer clic en el de la sección de Interacciones del panel de Prototipo, establecerla acción en Cambiar a y luego seleccionar la variante de destino usando el menú desplegable.
3. Una vez hecha la conexión, utiliza el panel de Interacción para ajustar el desencadenante y la acción.

También puedes usar la acción Cambiar a en una instancia anidada para cambiar la variante del componente principal. En el ejemplo a continuación, una variante de un conjunto de componentes está anidada dentro de otro conjunto de componentes Desplegado. Una interacción de Cambiar a se coloca en la instancia anidada para cambiar el componente principal de su variante Contraído a su variante Desplegado.

Usar componentes interactivos

Añade instancias de componentes interactivos a tus diseños como cualquier otro componente. La única diferencia es que las instancias ya tienen interacciones aplicadas para la creación de prototipos.

Para usar componentes interactivos:

1. Añadir una instancia de un componente interactivo a un marco en tu diseño.
2. Cuando estés listo para el prototipo de tu diseño, navega a la pestaña Prototipo en la barra lateral derecha.
3. Construye tu prototipo.
4. Vista previa de diseños e interacción en la vista de presentación.

Añadir más interacciones

Cuando estás creando un prototipo con componentes interactivos, puedes añadir interacciones regulares además de las interacciones de las variantes.

En el ejemplo a continuación, hemos añadido una interacción con un desencadenante al pasar el cursor sobre la interacción de variante desencadenada por un clic.

El orden de interacción dependerá de si los desencadenantes que usas son los mismos que los de las interacciones de variantes. Aprende más sobre desencadenantes de prototipos →

Mismos desencadenantes

Cuando ambas interacciones usan el mismo desencadenante, Figma utilizará la interacción del prototipo e ignorará la interacción de la variante.

Por ejemplo:

1. Un interruptor tiene una interacción de variante Al hacer clic → Cambiar a entre las variantes Encendido y Apagado en su conjunto de componentes.
2. Añades una interacción de Al hacer clic → Navegar a desde el interruptor a otro marco.

Figma navegará al siguiente marco cuando el usuario haga clic en el interruptor.

Diferentes desencadenantes

Cuando añades una interacción con un desencadenante diferente, Figma reproducirá tanto la interacción como las interacciones de variante.

Por ejemplo:

1. Un botón tiene una interacción de variante Al pasar el ratón → Cambiar a entre las variantes predeterminada y al pasar el ratón.
2. Añades una interacción Al hacer clic → Navegar a al crear tu prototipo.

Figma pasará de la variante Cambiar a a pasar el ratón en pasar el ratón, luego de Navegar a el siguiente marco Al hacer clic.

Ver interacciones

Cuando uses componentes interactivos verás secciones separadas para las Interacciones y las Interacciones de variantes en la pestaña Prototipo de la barra lateral derecha.

• Utiliza la sección de Interacciones para crear interacciones y animaciones de prototipo
• Utiliza la sección Interacciones de variantes para ver los detalles de la interacción de variante

Editar interacciones de variantes

Puedes anular una interacción de variante para una instancia en tu prototipo. Si deseas editar una interacción de variante para el componente principal, necesitarás hacerlo desde el archivo fuente.

Para acceder a un conjunto de componentes desde una instancia y editar:

1. En modo de diseño, selecciona la instancia.
2. En la parte superior de la barra lateral derecha, haz clic en .
3. Selecciona Ir al componente principal.
4. Navega a la pestaña Prototipo de la barra lateral derecha.
5. Haz tus ediciones a las interacciones de variantes.

Gestión de estados a través de marcos

Es probable que tus prototipos involucren interacción a través de múltiples marcos. De forma predeterminada, Figma usa controles de gestión de estados para determinar cómo funcionan los componentes interactivos a través de los marcos.

• Memorización de estados: Figma memoriza la última variante establecida de tu componente interactivo.

  Por ejemplo, podrías tener un componente interactivo para una casilla de verificación. Si configuras el componente interactivo en la variante marcada, Figma recuerda el estado de esa variante. Esto significa que si navegas fuera de ese marco y vuelves a él más tarde, el componente interactivo permanecerá en el estado marcado.

• Intercambio de estados: Figma comparte estados entre componentes interactivos coincidentes. Los estados solo se comparten después de que se haya interactuado inicialmente con el componente.

  Por ejemplo, podrías tener un componente interactivo para una casilla de verificación, con una instancia del componente en cada uno de los dos marcos. Si configuras el componente interactivo en la variante marcada en el primer marco, luego navegas al segundo marco y el componente correspondiente en el segundo marco también se establecerá en la variante marcada.

Si no deseas mantener los estados entre marcos, desmarca Restablecer estado del componente en el panel de Detalles de la interacción de la interacción del prototipo.

Más información sobre la gestión de estados de los prototipos →

Usar con variables

Aplica variables a los componentes interactivos para extender aún más su poder.

Cuando haces clic en un componente interactivo con una variable aplicada:

• La variante se actualiza
• La variable se actualiza, lo que, por su parte, hace que se actualicen también el resto de elementos que estén enlazados a esa misma variable

Obtén más información sobre usar variables con componentes interactivos →

Componentes interactivos con fuentes personalizadas

Cuando uses fuentes personalizadas para texto dentro de componentes interactivos, ten en cuenta que los visualizadores de prototipos podrían no tener esas fuentes personalizadas instaladas en sus dispositivos. En estos casos, Figma utiliza información en caché sobre variantes de componentes interactivos para mostrar correctamente las fuentes personalizadas al presentar un prototipo, pero puede reemplazar una fuente con Inter cuando no podemos preservar tanto las modificaciones de texto como cambiar la configuración de fuente para una interacción.

Por ejemplo, digamos que una persona que está viendo tu prototipo no tiene instalada la fuente personalizada que se está utilizando en su dispositivo. Si una instancia de un componente interactivo tiene una modificación de texto:

• Figma puede reemplazar la fuente personalizada con Inter si el cambio en las variantes incluye cambiar una configuración de fuente como el peso o el subrayado.
• Figma mostrará la fuente correcta si el cambio en la variante no está relacionado con una configuración de fuente, como el color de fondo de un botón.

Recomendamos usar fuentes de Google para prototipos que se comparten con espectadores que pueden no tener acceso a fuentes personalizadas en tus diseños. Si tu equipo está en el plan Organización o plan Empresa, puedes asegurarte de que los visualizadores de prototipos tengan acceso a fuentes personalizadas subiéndolas como fuentes compartidas.