Las expresiones condicionales en Figma te permiten crear prototipos inteligentes que reaccionan según reglas lógicas: si se cumple una condición, ocurre A; si no, ocurre B. Esta guía es para diseñadores que quieren llevar su prototipado al nivel más avanzado dentro de Figma.

En la práctica, vas a indicarle a Figma que evalúe el valor de una variable y, según ese valor, ejecute una acción distinta. Suena a programación, y un poco lo es, pero el flujo visual lo hace mucho más amigable.

¿Qué es una expresión condicional en Figma?

Una expresión condicional es una instrucción tipo if que valida si algo se cumple antes de ejecutar una acción. En el ejercicio del módulo Prototipado 3, dentro del frame Condicional, el botón principal es un isotipo de pata: cada clic hace crecer un rectángulo inferior en 8 puntos, y cuando ese rectángulo llena la pantalla, toda la barra cambia a azul [0:30].

¿Para qué sirve una expresión condicional en un prototipo? Sirve para que el prototipo tome decisiones automáticas según el estado de una variable, sin tener que duplicar pantallas ni crear flujos manuales para cada caso.

Ahí están sucediendo dos cosas en paralelo: el clic incrementa el tamaño horizontal del rectángulo, y al alcanzar el límite, se dispara una segunda regla que cambia el color principal.

¿Cómo creo la variable que controla el rectángulo?

Antes de armar la lógica, necesitas una variable de número que controle la longitud. En el panel de variables locales, das create variable, eliges tipo número y le asignas un nombre. En el ejercicio se llama largo iso, porque el isotipo es el que controla qué tan largo es el rectángulo, y arranca con un valor de 64 puntos [2:20].

Luego seleccionas el rectángulo (en este caso rectángulo 18), vas a la propiedad de longitud, quitas cualquier valor fijo y eliges aplicar variable. Cuando el valor queda enmarcado por un pequeño recuadro, sabes que la variable está vinculada correctamente.

¿Cómo conecto la interacción al isotipo?

Con la variable lista, seleccionas el componente ic isotipo y entras al modo prototipo. Ahí creas una interacción con estos parámetros:

• Trigger: on tap.
• Action: conditional, abriendo un bloque if.
• Condición: si largo iso es menor o igual a 375 (el ancho total de la pantalla).
• Resultado: set variable sobre largo iso con el valor largo iso + 8.

Al probar con shift + espacio, cada clic sobre el isotipo suma 8 puntos al rectángulo. Si haces clic en cualquier otra parte de la pantalla, no pasa nada, porque la interacción está atada solo al isotipo [3:30].

¿Cómo agrego la segunda condición que cambia el color?

La primera regla cubre el crecimiento, pero falta el caso en que el rectángulo ya ocupa toda la pantalla. Aquí entra el else o, en términos de Figma, una segunda rama dentro de la misma interacción condicional.

La lógica queda así: si largo iso sigue siendo menor o igual a 375, suma 8. Si el valor ya es mayor a 375, ejecuta una acción distinta. En el ejercicio, esa acción es un nuevo set variable sobre la variable de color llamada Shane Green, cambiándola de un verde fuerte a azul [4:40].

¿Qué pasa cuando una variable supera el valor límite en Figma? Si configuraste una segunda condición, Figma ejecuta esa rama; si no, simplemente deja de responder al clic porque ninguna regla se cumple.

Al probarlo, los clics hacen crecer el rectángulo hasta el borde y, en el último clic, todo el color cambia a azul. Esa es la expresión condicional cumpliendo su trabajo.

¿Puedo navegar a otra pantalla en lugar de cambiar el color?

Sí, y es donde el prototipo se vuelve más interesante. En vez de set variable para cambiar color, puedes reemplazar la acción por navigate to y apuntar a otra pantalla, por ejemplo una llamada Confeti, con animación instantánea [5:50].

Así, cuando largo iso supera 375, el prototipo salta a la pantalla de celebración en lugar de modificar un valor. Mismo patrón lógico, distinta consecuencia visual.

¿Qué habilidades estoy practicando con este ejercicio?

Este flujo entrena varias destrezas clave de prototipado avanzado:

• Pensamiento lógico tipo if/else, traducido a una herramienta visual.
• Manejo de variables locales, tanto numéricas (largo) como de color (estado visual).
• Encadenamiento de interacciones, donde una sola acción de tap dispara evaluaciones múltiples.
• Diseño de feedback en interfaz, usando cambios de tamaño y color para comunicar progreso.

Una vez dominas la estructura básica de trigger, condición, acción, puedes replicarla para barras de progreso, validaciones de formularios, contadores o cualquier microinteracción donde el estado importe.

Ya llegaste al nivel máximo de prototipado en Figma con este ejercicio. Te invito a experimentar con tus propias variables y a contar en los comentarios qué microinteracción condicional vas a construir primero.