Dominar el prototipado avanzado en Figma significa ir más allá de las transiciones simples. Cuando ya manejas After Delay y Smart Animate, el siguiente paso es combinar acciones múltiples con variables booleanas para crear interacciones que se sienten casi como código, pero siguen siendo diseño puro.
¿Cómo funcionan las acciones múltiples en prototipado de Figma?
Las acciones múltiples permiten que un solo gesto del usuario desencadene dos o más respuestas en la interfaz al mismo tiempo. En el ejemplo trabajado, un componente de botón tiene dos variantes: una en estado off (sendero no guardado) y otra en estado on (sendero guardado) [0:38].
El objetivo es que al hacer tap sucedan dos cosas simultáneas:
- El botón cambie visualmente al estado guardado.
- Aparezca un toast en la parte inferior con el mensaje «Sendero guardado».
Un toast es un patrón de interfaz que muestra una confirmación temporal, una segunda señal visual de que la acción fue exitosa [0:52].
¿Cómo se agrega una segunda acción al mismo evento?
Primero se crea la interacción principal: conectar la primera variante con la segunda mediante on tap, con animación instantánea [1:18]. Después, se presiona el botón más (+) para agregar otra acción. En este caso se elige open overlay y se selecciona el frame del toast llamado "guardado" [1:35].
Figma pregunta dónde posicionar el overlay. La configuración recomendada es fijarlo en la parte inferior central del frame, desactivar el cierre al hacer clic afuera y no agregar fondo oscuro [1:58].
¿Cómo lograr que el toast desaparezca automáticamente?
Sobre el frame del toast se aplica un trigger de tipo After Delay con la acción close overlay [2:22]. Inicialmente se configura en 600 milisegundos, pero al probarlo resulta demasiado rápido para leer el mensaje. Se ajusta a 1200 milisegundos, logrando una experiencia natural donde el usuario alcanza a leer la confirmación antes de que se desvanezca [2:55].
¿Cómo completar el ciclo de interacción con la variante de regreso?
Un detalle importante: si el botón ya está en estado on y el usuario vuelve a hacer tap, debería regresar al estado off. Sin esa interacción de retorno, el tap activa acciones del fondo, como el cambio de fotografías, lo cual rompe la experiencia [3:18].
La solución es conectar la variante on de regreso hacia la variante off con animación instantánea. Al ser un componente, cualquier instancia en el prototipo hereda automáticamente este comportamiento [3:48].
¿Cómo se combinan variables booleanas con acciones múltiples para filtrar contenido?
Aquí el prototipado sube de nivel. Se crea una variable booleana llamada solo_árboles que controla la visibilidad de ciertos elementos. Los senderos que no contienen árboles reciben esta variable asignada a su propiedad de apariencia (opacidad) mediante clic derecho sobre el icono del ojo en el panel derecho [4:28].
Mientras la variable esté en true, todos los senderos permanecen visibles. El truco está en los chips de filtro:
- El chip "Árboles" tiene dos estados: default y encendido.
- Al conectar el estado default con el encendido, se agrega una segunda acción: set variable [5:30].
- Esta acción cambia
solo_árboles de true a false, ocultando los senderos sin árboles.
¿Cómo restaurar el estado original al desactivar el filtro?
Se necesita la interacción inversa. Desde el estado encendido del chip de vuelta al default, se agregan nuevamente acciones múltiples: cambiar la variante al estado off y ejecutar set variable para devolver solo_árboles a true [6:24].
El resultado es un filtro funcional dentro del prototipo:
- Scroll vertical y horizontal siguen operando.
- Al activar el chip, desaparecen los senderos sin bosque.
- Al desactivarlo, reaparecen todos.
Cada instancia del componente hereda las interacciones gracias a la técnica de pegar encima con Cmd + Option + Shift + B, que reemplaza el contenido manteniendo la estructura del frame original [5:02].
Este nivel de prototipado demuestra que las variables y las acciones múltiples pueden simular lógica real sin escribir una línea de código. ¿Ya probaste combinar overlays con variables booleanas en tus prototipos? Comparte tu experiencia y cuéntanos qué interacciones has logrado replicar.
