Quién puede utilizar esta función

Compatible con cualquier equipo o plan.

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

Cualquier persona con acceso de puede editar al archivo puede publicar componentes en una biblioteca.

¿Acabas de empezar en el mundo del prototipado? Consulta nuestra Guía de prototipado en Figma →

Los componentes interactivos te permiten crear interacciones de prototipo entre variantes en un conjunto de componentes. Cada vez que agregas una instancia a tus diseños, esas interacciones se configuran y están listas para funcionar. Esto te ahorra tiempo al crear prototipos y evita confusiones innecesarias.

• Crea elementos interactivos que cambien automáticamente entre variantes, como botones que cambian de estado al pasar el cursor por encima o al pulsarlos.
• Establece interacciones predeterminadas a nivel de componente y elimina las conjeturas a la hora de crear prototipos.
• Reduce la cantidad de marcos y conexiones necesarias para crear prototipos de campos de entrada, como un conjunto de casillas de verificación o botones de alternancia.

Antes de las interacciones de variante

En el siguiente ejemplo, agregamos todas las conexiones posibles para crear un prototipo de un marco con cinco casillas de verificación. Sin componentes interactivos, tendríamos que duplicar el mismo marco 32 veces y crear 160 conexiones entre ellos para crear un prototipo de todas las combinaciones posibles.

Con interacciones de variante

Con los componentes interactivos, solo necesitamos agregar una instancia de la casilla de verificación a nuestro diseño y sus interacciones de variante estarán listas para utilizar. Cuando vemos el prototipo, Figma cambia automáticamente entre las variantes marcadas y desmarcadas.

Crear componentes interactivos

Solo puedes crear componentes interactivos mediante variantes del mismo conjunto de componentes. Si no tienes un conjunto de componentes con el que trabajar, primero tendrás que crear uno. Aprende cómo crear variantes →

Crear interacciones de variante

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

1. Navega hasta la pestaña Prototipo de la barra lateral derecha.
2. Haz clic en en el cuadro delimitador del marco y arrástralo hasta la variante de destino. También puedes hacer clic en en la sección Interacciones del panel de prototipo, establecer la acción en Cambiar a, y luego seleccionar la variante de destino mediante el menú desplegable.
3. Una vez que se haya establecido la conexión, utiliza el panel Interacción para ajustar el disparador y la acción.

También puedes utilizar la acción Cambiar a en una instancia anidada para cambiar la variante del componente principal. En el siguiente ejemplo, una variante de un conjunto de componentes está anidada dentro de otro conjunto de componentes Expandible. Se coloca una interacción Cambiar a en la instancia anidada para cambiar el componente principal de su variante Contraída a su variante Expandida.

Utilizar componentes interactivos

Agrega instancias de componentes interactivos a tus diseños como cualquier otro componente. La única diferencia es que las instancias ya tienen interacciones aplicadas para el prototipado.

Para utilizar componentes interactivos:

1. Agrega una instancia de un componente interactivo a un marco de tu diseño.
2. Cuando tengas todo listo para crear un prototipo de tu diseño, ve a la pestaña Prototipo de la barra lateral derecha.
3. Crea tu prototipo.
4. Obtén una vista previa de diseños e interacciones en la vista de presentación.

Agregar más interacciones

Cuando creas un prototipo con componentes interactivos, puedes agregar interacciones normales además de las interacciones de variante.

En el siguiente ejemplo, agregamos una interacción con un disparador al pasar el cursor por encima, además de la interacción de variante activada por un clic.

El orden de las interacciones dependerá de si los disparadores que se utilizan son los mismos que los de las interacciones de variante. Obtén más información sobre los disparadores de prototipos →

Disparadores idénticos

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

Por ejemplo:

1. Un botón de alternancia tiene una interacción de variante Al hacer clic → Cambiar a entre las variantes Activado y Desactivado en su conjunto de componentes.
2. Agregas una interacción Al hacer clic → Navegar a desde el botón de alternancia hacia otro marco.

Figma navegará al siguiente marco cuando el usuario haga clic en el botón de alternancia.

Disparadores diferentes

Cuando agregas una interacción con un disparador 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 cursor → Cambiar a entre las variantes predeterminada y pasar el cursor.
2. Agregas una interacción Al hacer clic → Navegar a al crear tu prototipo.

Figma Cambia a la variante pasar el cursor al pasar el cursor, luego Navega al siguiente marco Al hacer clic.

Ver interacciones

Cuando utilices componentes interactivos, verás secciones separadas para Interacciones e Interacciones de variante en la pestaña Prototipo de la barra lateral derecha.

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

Editar interacciones de variante

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

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

1. En el 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 hasta la pestaña Prototipo de la barra lateral derecha.
5. Editar las interacciones de variante.

Gestión de estados entre marcos

Es probable que tus prototipos incluyan interacciones entre varios marcos. De forma predeterminada, Figma utiliza controles de gestión de estados para determinar cómo funcionan los componentes interactivos entre marcos.

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

  Por ejemplo, es posible que tengas un componente interactivo para una casilla de verificación. Si configuras el componente interactivo en la variante marcada, Figma recuerda el estado de dicha variante. Esto significa que si sales de ese marco y vuelves a él más tarde, el componente interactivo permanecerá en el estado marcado.

• Uso compartido 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, es posible que tengas 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 y luego navegas al segundo marco, el componente coincidente en el segundo marco también se configurará en la variante marcada.

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

Obtén más información sobre la gestión de estados de prototipos →

Uso con variables

Aplica variables a los componentes interactivos para ampliar aún más sus funcionalidades.

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

• La variante se actualiza
• La variable se actualiza, lo que a su vez actualiza cualquier otro elemento vinculado a esa misma variable

Obtén más información sobre el uso de variables con componentes interactivos →

Componentes interactivos con fuentes personalizadas

Cuando utilices fuentes personalizadas para el texto dentro de componentes interactivos, ten en cuenta que es posible que los espectadores del prototipo no tengan esas fuentes personalizadas instaladas en sus dispositivos. En estos casos, Figma utiliza información almacenada en caché sobre las variantes de los componentes interactivos para mostrar correctamente las fuentes personalizadas al presentar un prototipo, pero puede sustituir una fuente por Inter cuando no podemos conservar las modificaciones del texto y cambiar la configuración de la fuente para una interacción.

Por ejemplo, supongamos que una persona que ve tu prototipo no tiene instalada en su dispositivo la fuente personalizada que se está utilizando. Si una instancia de un componente interactivo tiene modificaciones de texto:

• Figma puede sustituir la fuente personalizada por Inter si el cambio en las variantes incluye cambiar una configuración de fuente como el grosor 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 utilizar Google Fonts para prototipos que se comparten con espectadores que pueden no tener acceso a las fuentes personalizadas de tus diseños. Si tu equipo tiene el plan Organización o Empresa, puedes asegurarte de que los espectadores del prototipo tengan acceso a las fuentes personalizadas subiéndolas como fuentes compartidas.