Expresiones condicionales if/else en Figma

Contenido del curso

No sé dónde empezar

Introducción a Figma y Diseño Básico

Organización de Proyectos

Componentes y Estilos

Herramientas Avanzadas

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:16

Expresiones condicionales if/else en Figma

Curso de Figma

Clase 19 de 22

Clase 19 / 22

Comentarios (7)7 comentarios

Rafael Enrique Sanchez Cruz

Hace 2 años

Configuracion de las interacciones

IF:

Else:

Karina Marcela Vargas Gallego

Hace 2 años

NO FUNCIONA SI NO SE PAGA AL PROFFESIONAL :(

Darien Stiven Herrera Mendez

Hace 2 años

Por tener platzi puedes acceder a una version education de figma que es igual a la licencia profesional. busca informacion en internet como figma education platzi y te sale una guia.

Liliana Mancera

Hace 8 meses

Que lastima que no tampoco se pudo practicar en esta clase, no tengo premium :((((((((((

Carolina Gómez

Hace 2 años

En este último nivel de prototipado en Figma, exploramos las expresiones condicionales, una herramienta que permite definir rutas distintas dentro de un prototipo según si una condición se cumple o no. Aunque al principio puede sonar complejo, es un proceso muy entretenido que agrega lógica y dinamismo a tus diseños.

Usando el módulo Prototipado 3 y el frame llamado "Condicional", se presenta un ejemplo práctico con un rectángulo que crece en longitud cada vez que se hace clic sobre un botón representado por un ícono. Este crecimiento se da de manera progresiva (8 puntos por clic), hasta llegar a un valor límite (375 puntos). Si se cumple esa condición (el largo llega o supera los 375), se activa una segunda acción: el cambio de color del rectángulo, de un verde fuerte a azul.

Para lograr esto, se usan variables locales. En este caso, se crea una variable numérica llamada Largo Hizo, que controla el largo del rectángulo. A través del panel de interacciones en modo prototipo, se configura una condición que revisa el valor actual de esa variable:

Si es menor o igual a 375, se le suma 8 puntos.
Si supera los 375, se activa la segunda condición que cambia el color mediante otra variable llamada Shane.

Además, se sugiere que esta segunda acción podría ir más allá del simple cambio de color. Por ejemplo, se podría configurar para que Figma navegue automáticamente a otra pantalla llamada "Confeti", haciendo que la transición sea instantánea. Esto da paso a posibilidades más avanzadas y creativas dentro del flujo de un prototipo.

Finalmente, se hace énfasis en que todo este ejercicio, aunque puede parecer técnico, se resume en solo dos condiciones bien aplicadas. El módulo termina con una demostración práctica y una felicitación para quien lo haya completado.

Javier Eduardo Rodríguez Robledo

Hace 2 años

No me salió el confetti nooo :(

William Henry Luis Sánchez

Hace 2 años

debes usar el prof supongo..a .mi .tampoco

Nicolas Alpargatero

Hace un año

es por que el gif no estaba en assets, pero agregando uno nuevo funciona.

Alexandra Garces

Hace 8 meses

Quisiera poder practicar este tema.

Jessica Coanqui

Hace 8 meses

Intente registrarme y no me permite. Ojalá se solucione pronto.

Recursos

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.

Resumen

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

¿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?

¿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.

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

¿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?

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.

Introducción a Figma y Diseño Básico

Pantalla de perfil en Figma en 7 minutos

Interfaz y colaboración en Figma para proyectos de diseño de apps

Creación de Prototipos en Figma: Elementos Básicos y Diseño de Interfaces

Tipografía en UI: jerarquía con Manrope y Figma

Duplicar figuras y crear estrellas en Figma

Rellenos, gradientes y videos en Figma

Organización de Proyectos

Creación de Íconos Vectoriales con Pen Tool en Figma

Mapa y menú de navegación en Figma

Frames y constraints para diseño responsive

Sombras y blur para dar profundidad en Figma

Auto Layout en Figma: cajas responsive

Auto layouts anidados con mínimos y máximos

Componentes y Estilos

Diseño de la App Apata: Rutas y Experiencia de Usuario

Componentes en Figma: diseña una vez, usa siempre

Variables y estilos en Figma para dark mode

Scroll, tap y drag en Figma

Herramientas Avanzadas

Smart Animate y After Delay en Figma

Acciones múltiples y variables en Figma

Expresiones condicionales if/else en Figma

Simetrías rotacionales con componentes en Figma

Buenas prácticas de grillas y componentes en Figma

4 funciones de IA en Figma que aceleran tu diseño

Expresiones condicionales if/else en Figma

Progreso del curso

Introducción a Figma y Diseño Básico

Organización de Proyectos

Componentes y Estilos

Herramientas Avanzadas

Recursos

Recursos