Llegaste al punto donde el prototipado en Figma se cruza con la lógica de programación. Las expresiones condicionales permiten que tu prototipo tome decisiones: si una condición se cumple, ocurre una acción; si no, ocurre otra. Este mecanismo transforma interfaces estáticas en experiencias interactivas con comportamiento dinámico real, y todo sin escribir una sola línea de código.
¿Cómo funciona una expresión condicional en Figma?
Una expresión condicional sigue la estructura clásica if/else: si algo es verdadero, se ejecuta el camino A; si es falso, se ejecuta el camino B. En el ejemplo trabajado, un ícono de isotipo funciona como botón principal. Cada vez que se hace clic sobre él, un rectángulo en la parte inferior de la pantalla crece horizontalmente en ocho puntos [01:00]. Cuando ese rectángulo alcanza el ancho total de la pantalla, se activa una segunda condición que cambia su color a azul.
Para lograr esto se necesitan dos elementos fundamentales:
- Una instrucción que aumente el tamaño horizontal del rectángulo con cada clic.
- Una segunda condición que detecte cuándo el rectángulo ocupa toda la pantalla y ejecute un cambio visual.
¿Qué son las variables y cómo se configuran?
Las variables son el corazón de este sistema. Funcionan como contenedores de valores que Figma puede leer, modificar y evaluar durante la interacción del prototipo.
¿Cómo crear la variable de longitud?
El primer paso es controlar el largo del rectángulo. Para esto se crea una variable de tipo número llamada "Largo ISO" con un valor inicial de sesenta y cuatro puntos [02:22]. Se accede a create variable, se le asigna un nombre descriptivo y se establece el valor de arranque.
Después, esa variable se aplica directamente a la propiedad de longitud del rectángulo. Cuando no tiene variable asignada, aparece un pequeño hexágono como indicador. Al aplicar la variable, el valor queda envuelto en un rectángulo visual que confirma la vinculación [03:04].
¿Cómo se construye la interacción condicional?
Desde el isotipo, en modo prototipo, se crea una interacción con el trigger on tap. La condición dice: si la variable "Largo ISO" es menor o igual a 375 (el ancho completo de la pantalla), entonces se ejecuta un set variable que suma ocho al valor actual [03:20]. La fórmula queda así: largo_iso = largo_iso + 8.
Cada clic incrementa la longitud del rectángulo en ocho puntos, generando una barra de progreso visual que crece con cada interacción.
¿Cómo agregar una segunda condición al prototipo?
Cuando el rectángulo supera los 375 puntos, la primera condición deja de cumplirse. Ahí entra el else: si el valor ya es mayor a 375, Figma debe ejecutar una acción diferente [04:36].
¿Qué opciones existen para la segunda acción?
La primera opción mostrada es cambiar una variable de color. Se modifica la variable llamada "shame green", pasando de un verde intenso a un valor azul [04:55]. Esto transforma visualmente toda la barra al completarse el progreso.
Pero existe una alternativa más interesante: en lugar de cambiar un color, la acción puede ser navegar a otra pantalla [05:46]. En el ejemplo, cuando se cumple la condición, Figma redirige a un frame llamado "confeti" con una animación instantánea. El resultado es una experiencia donde el usuario hace clic repetidamente, la barra crece, y al completarse aparece una pantalla de celebración con confeti [06:10].
Los pasos clave para replicar este ejercicio son:
- Crear la variable numérica con valor inicial y vincularla a la propiedad del elemento.
- Configurar el primer condicional: si el valor es menor o igual al límite, sumar puntos.
- Configurar el segundo condicional: si el valor supera el límite, cambiar color o navegar a otra pantalla.
Este nivel de prototipado abre posibilidades enormes para simular flujos reales sin salir de Figma. La combinación de variables, condicionales y acciones encadenadas permite crear prototipos que responden de forma inteligente a la interacción del usuario. Si quieres llevar tus prototipos más lejos, experimenta con diferentes tipos de variables y condiciones que reflejen los escenarios de tu propia interfaz.
