Contenido del curso
Acciones múltiples y variables en Figma
Dominar el prototipado en Figma significa combinar componentes, variantes y variables para que una sola interacción dispare varios efectos en la interfaz. Aquí aprenderás a configurar acciones múltiples con on tap, overlays y variables booleanas para lograr prototipos que se sienten como código real.
¿Cómo configurar acciones múltiples con on tap y open overlay?
El punto de partida es un componente con dos variantes: un botón para guardar senderos en estado off y on. La meta es que un solo tap dispare dos cosas a la vez: cambiar el estado del botón y mostrar un toast de confirmación en la parte inferior.
Desde el modo prototipo conectas la primera variante con la segunda usando el trigger on tap y la acción change to, con animación instantánea. Hasta ahí va una sola acción. Para sumar la segunda, presionas el botón de + dentro del panel de interacción y eliges open overlay, la quinta opción del menú.
¿Qué es una acción múltiple en Figma? Es la posibilidad de disparar dos o más acciones desde un mismo trigger, como un tap. Por ejemplo: cambiar de variante y abrir un overlay al mismo tiempo.
Al abrir el overlay llamado Guardado, Figma te pregunta dónde posicionarlo. En lugar de dejarlo en posición manual, lo anclas a bottom center para que siempre aparezca abajo y centrado. Desactivas el cierre al hacer clic afuera y omites el fondo, porque solo quieres una confirmación visual ligera.
¿Cómo cierro un overlay automáticamente con after delay?
Dentro del frame del overlay agregas una nueva interacción usando after delay como trigger. La acción es close overlay. El primer intento con 600 milisegundos resulta demasiado rápido para leer el mensaje, así que lo duplicas a 1.200 milisegundos y la lectura se siente natural [04:00].
Para probarlo seleccionas la variante off, reemplazas el botón en la interfaz con Command + Option + Shift + V y previsualizas con Shift + Espacio. Al hacer clic, aparece sendero guardado, se mantiene visible y desaparece solo.
¿Por qué necesito conectar las dos variantes en ambos sentidos?
Un detalle fácil de olvidar: si solo conectas de off a on, al volver a tocar el botón encendido no pasa nada útil. Peor aún, el tap se filtra al scroll horizontal de fotografías que está debajo y dispara una interacción que no querías.
La solución es regresar al componente principal y crear la conexión inversa: de guardado on a guardado off, también con on tap y animación instantánea. Esta vez no necesitas el overlay, solo el cambio de estado.
Como el botón en la interfaz es una instancia del componente, hereda automáticamente la nueva interacción. Al previsualizar con Shift + Espacio puedes encender el sendero, ver el toast, apagarlo y mantener intactos los scrolls vertical y horizontal.
¿Cómo uso variables booleanas para filtrar contenido en un prototipo?
El segundo ejercicio lleva las cosas más lejos: filtrar dinámicamente los senderos que no contienen árboles usando una variable booleana llamada solo árboles.
Primero seleccionas el frame de scroll vertical, presionas enter para entrar al auto layout llamado trails y copias todos los senderos fuera del frame para visualizarlos mejor. De esa lista identificas los que no aplican al filtro: por ejemplo, un sendero de desierto y otro cercano a la playa.
¿Qué es una variable booleana en Figma? Es una variable que solo tiene dos valores posibles: true o false. Sirve para encender o apagar la visibilidad de capas de forma dinámica desde un prototipo.
En el panel de apariencia a la derecha, haces clic derecho sobre el ícono del ojo y aplicas la variable solo árboles. Mientras esté en true, esos senderos siguen visibles. Cuando pase a false, desaparecerán del scroll.
Después copias todos los trails con Command + C, regresas al frame original, seleccionas el grupo trails y pegas encima con Command + Option + Shift + V para reemplazar el contenido conservando las variables aplicadas [07:30].
¿Cómo conecto un chip con set variable para activar el filtro?
En el primer frame tienes el chip árboles en dos estados: default y encendido. En modo prototipo conectas el chip apagado al encendido con on tap y change to instantáneo. Luego agregas una segunda acción con set variable.
Figma te pregunta qué variable quieres manipular. Eliges solo árboles y la pasas de true a false. Con eso, al tocar el chip se cambia el estado visual y se apagan los senderos sin árboles en el mismo gesto.
Al previsualizar funciona el filtro de ida, pero al volver a tocar el chip los senderos no regresan. Falta cerrar el ciclo.
¿Cómo regreso una variable a su estado original en el prototipo?
La interacción inversa también necesita acciones múltiples. Conectas el chip encendido al apagado con on tap, agregas el cambio de variante a off y sumas un segundo set variable que pasa solo árboles de false a true.
Los pasos clave para esta interacción de regreso son:
Al probar con Shift + Espacio, el scroll vertical muestra todos los senderos, el horizontal mantiene los chips, al encender el filtro solo quedan los senderos con bosque y al apagarlo vuelven todos. Empieza a sentirse como algo que ya tiene código, pero sigue siendo diseño.
¿Qué interacción múltiple vas a probar primero en tu próximo prototipo? Cuéntame en los comentarios.
