Cuando un prototipo no puede recordar las decisiones del usuario, cada interacción se siente vacía. No importa cuántas veces selecciones "gasto" o "ingreso", el resultado siempre es el mismo. Las variables de estado resuelven exactamente ese problema, transformando un prototipo estático en un sistema que responde, recuerda y decide en función de lo que el usuario configura.
¿Qué diferencia hay entre variables de color y variables de estado?
Ya conoces las variables de color: controlan la apariencia, como el fondo de una pantalla en light mode o dark mode. Las variables de estado cumplen un rol distinto: controlan lo que sucede dentro del prototipo. Una variable de estado responde preguntas como "¿qué seleccionó el usuario?" o "¿qué configuración está activa?" [0:44].
Para organizar estas variables, se crea una nueva colección llamada "prototipo", separada de las colecciones de color. Dentro de ella se definen variables de tipo booleano, que solo pueden tener dos valores: true o false [1:09].
- isDarkMode: indica si el modo oscuro está activado.
- isExpense: indica si la última transacción seleccionada fue un gasto.
Crear una variable booleana es sencillo: clic en crear variable, seleccionar booleano, asignar un nombre descriptivo y definir el valor por defecto [1:30].
¿Cómo se implementa el cambio entre dark mode y light mode?
El primer caso práctico consiste en que el usuario pueda alternar entre modo claro y modo oscuro desde la pantalla de settings.
¿Cómo se configura la interacción para activar dark mode?
En modo prototipo, se selecciona el elemento "Estilo oscuro" y en lugar de crear una navegación a otra pantalla, se configura la acción set variable [1:52]. Los pasos son:
- Seleccionar la variable isDarkMode de la colección "prototipo".
- Asignarle el valor true [2:14].
- Agregar una segunda interacción: set variable mode, que cambia la colección de colores a dark mode [2:31].
Para probar sin salir de Figma, se usa la opción de preview directamente en la interfaz, seleccionando el frame deseado con Shift + espacio [2:50]. Al hacer clic en "Estilo oscuro", la interfaz cambia completamente.
¿Cómo se vuelve al modo claro?
Se replica el proceso en el elemento "Claro", pero invirtiendo los valores: isDarkMode pasa a false y el variable mode se configura como light [3:22]. Con esto, el prototipo mantiene la configuración entre pantallas. Si navegas a otra sección, el modo oscuro persiste hasta que el usuario lo cambie explícitamente.
¿Cómo usar condicionales para recordar el tipo de transacción?
El segundo caso aborda un problema de usabilidad real: cuando un usuario quiere registrar varias transacciones del mismo tipo, no debería tener que seleccionar "gasto" o "ingreso" cada vez [4:07].
¿Qué es una condicional en el prototipo?
Una condicional funciona como una estructura if/else: si se cumple cierta condición, ejecuta una acción; si no, ejecuta otra [4:40].
La configuración queda así:
- Si isExpense es true: se abre un overlay con el bottom sheet de "New Transaction Expense", usando animación move in de abajo hacia arriba, ease in a 180 milisegundos [5:00].
- Si isExpense es false: se abre el overlay de "New Transaction Income" con los mismos criterios de animación pero a 160 milisegundos [5:25].
¿Cómo se actualiza la variable de forma dinámica?
Para que la variable isExpense cambie según la interacción del usuario, se agrega una acción adicional en cada pestaña del bottom sheet [5:58]:
- Al seleccionar "Ingreso", se ejecuta el swap overlay y además se hace set variable de isExpense a false [6:12].
- Al seleccionar "Gasto", se ejecuta el swap y se asigna isExpense a true [6:22].
El resultado es que el prototipo recuerda la última selección. Si el usuario registró un ingreso, la próxima vez que abra el formulario aparecerá directamente la vista de ingreso [6:50].
Con variables booleanas y condicionales, un prototipo en Figma deja de ser una presentación lineal y se convierte en un sistema que responde a las decisiones del usuario. Esa capacidad de memoria abre una pregunta fascinante: si el prototipo puede recordar y decidir, ¿cuánto código realmente necesitas? Comparte tu experiencia aplicando estas técnicas en tus propios prototipos.
