Diseñar microinteracciones en Figma con componentes interactivos te permite mostrar cambios de estado realistas en botones y elementos sin duplicar pantallas. Aquí verás cómo configurar hover, click y animaciones falsas de inputs usando variantes, ideal para diseñadores UI/UX que quieren entregar prototipos claros al equipo de desarrollo.

¿Por qué usar componentes interactivos en lugar de duplicar pantallas?

Antes, cuando querías mostrar el cambio de estado de un botón, duplicabas la tarjeta completa, cambiabas el color y conectabas las pantallas desde el panel de prototipado. El problema es que esa técnica no anima el botón: salta entre pantallas y confunde al usuario.

Con los componentes interactivos, el cambio ocurre en el propio elemento. El usuario ve que el botón reacciona, no que la pantalla cambia.

¿Qué es un componente interactivo en Figma? Es un componente con variantes que cambian de estado dentro del mismo elemento, sin necesidad de duplicar frames ni saltar entre pantallas.

¿Cómo crear las variantes de un botón con estados hover y click?

Partimos de la tarjeta original con un botón en estado por defecto. Para sumar los otros dos estados, seleccionas el componente y usas el panel de variantes para añadir nuevas opciones con el botón de “más”.

Los tres estados que vas a definir son:

• Primary: el estado por defecto, con el azul claro original.
• Hover: cambias el color a un violeta o lila para indicar que el cursor está encima.
• Click: aplicas un tono más oscuro para señalar que el botón fue presionado.

Nombrar cada variante de forma semántica es clave. Si las llamas “hover” y “click” en lugar de “botón 2” o “botón 3”, te será mucho más fácil conectarlas después en el panel de prototipado [02:30].

¿Dónde se configura la interacción dentro del componente?

En el nuevo panel de prototipado, a la derecha, seleccionas el botón y añades una interacción. La primera regla la configuras así: cuando haya un hover sobre el botón, cambia de la variante primary a la variante hover.

Luego pulsas el símbolo de “más” para sumar una segunda interacción: cuando haya un click, cambia de primary a click. Un mismo elemento puede tener varias interacciones encadenadas.

Para verlo funcionando, pulsas play y entras al preview. Al pasar el cursor verás el cambio al lila, y al hacer clic notarás el tono oscuro activarse.

¿Qué otras microinteracciones puedes prototipar con variantes?

La misma lógica se aplica a interacciones más complejas. Un ejemplo claro es una to-do list: al pasar el cursor sobre un ítem se resalta, y al hacer clic el texto se tacha.

Para lograrlo solo necesitas dos variantes principales:

• Una variante de check, que controla el estado del checkbox.
• Una variante de card, que controla el estilo del ítem (normal o tachado).

La configuración sigue el mismo patrón: con hover cambias a un estado intermedio, y con click pasas al estado tachado o de regreso al default. Esta claridad ayuda a que el equipo de desarrollo implemente el efecto exacto que diseñaste [05:10].

¿Se pueden simular inputs que se llenan solos?

Figma tiene una limitación: no puede poblar campos de texto con información real. No puedes escribir dentro de un input como lo harías en una app funcional. Pero sí puedes falsear esa animación para que parezca que el usuario está escribiendo.

La técnica consiste en crear varias variantes del input con el texto en distintos momentos y conectarlas con delays automáticos entre estados. Así el prototipo transiciona solo, mostrando cómo el cursor cambia de flecha a mano al hacer hover, y cómo aparece la animación del input al hacer clic.

¿Para qué sirve falsear una animación en Figma? Para comunicarle al equipo de desarrollo cómo debería verse y comportarse la interacción final, aunque Figma no pueda ejecutarla de forma nativa.

¿Cómo organizar tus flujos de prototipado para que sean claros?

Dentro del panel de prototipado puedes renombrar cada flow haciendo clic en la etiqueta azul o desde la barra de navegación derecha. También puedes usar el ícono del lápiz para editar el nombre o agregar una descripción de cuándo se usa esa interacción.

Esta organización es especialmente útil cuando entregas el archivo a tu equipo de desarrollo. Un flow llamado “button animation” con una descripción clara vale más que diez frames sueltos.

Usar variantes con nombres semánticos, encadenar interacciones de hover y click en el mismo componente, y simular animaciones de inputs son las tres prácticas que convierten un prototipo estático en una experiencia que tu equipo puede traducir a código sin ambigüedades.

¿Qué microinteracción quieres prototipar primero en tu próximo proyecto? Cuéntame en los comentarios.