Crear variables booleanas en Figma: casilla y vista previa

Para crear una variable booleana en Figma, abre el panel de variables, añade una de tipo Boolean a una colección local y asígnale un valor inicial: true o false. Vincúlala a un cambio visible y añade la acción Set variable en el prototipo. Si «Continuar» debe abrir dos vistas distintas, usa una acción Conditional que lea la misma variable. Comprueba que una pulsación aplica el cambio y que la siguiente lo revierte.

El ejercicio parte de una exportación ficticia en Fieldnote. La casilla «Incluir elementos archivados» muestra un aviso y determina qué vista previa se abre. El prototipo no exporta nada. Sirve para observar si la persona entiende qué elementos se incluirían antes de confirmar. Al trabajar con una sola pantalla de ajustes, podrás cambiar el texto o mover el botón sin mantener dos copias que acaben divergiendo.

Antes de montarlo, revisa el acceso. La guía de variables en prototipos de Figma indica que se requiere permiso de edición y un plan Professional, Education, Organization, Government o Enterprise. Si no tienes disponible la acción, puedes ensayar el texto con marcos separados y enlazados. Indícalo en el archivo para que nadie pierda tiempo buscando un vínculo que esa versión no utiliza.

Crear una variable booleana en Figma

Prepara un marco de ajustes y dos vistas de destino: «Vista previa de elementos activos» y «Vista previa de todos los elementos». Dentro de los ajustes, dibuja una fila con la casilla, un aviso con el texto «Los elementos archivados aparecerán en la vista previa» y el botón «Continuar». Deja que se pueda continuar en ambos estados. La casilla expresa una preferencia y, si se queda sin marcar, la persona también debe poder obtener un resultado útil.

Consulta la guía de Figma para crear variables y colecciones. Crea una colección local llamada Prototipo Fieldnote y añade una variable Boolean con el nombre includeArchived. Pon su valor inicial en false. Para esta prueba basta con un modo: así puedes localizar el valor de partida sin revisar combinaciones. El nombre debe describir la decisión. Si llamas a la variable mostrarAviso, dentro de unas semanas será difícil entender por qué también la consulta la acción que decide qué registros mostrar.

Antes de añadir interacciones, anota los dos resultados junto a los marcos. Con false, la casilla está vacía, el aviso no aparece y la vista previa contiene solo elementos activos. Con true, aparece la marca, se ve el aviso y la lista incluye los archivados. Prepara datos de ejemplo fáciles de distinguir: dos filas activas que aparezcan en ambas vistas y una tercera fila, etiquetada «Archivado», solo en la vista ampliada. Si solo cambia el título, es fácil pasar por alto que se abrió la vista equivocada.

Vincular la casilla y el aviso

Para montar una versión mínima, dibuja el contorno de la casilla y deja la marca de verificación en una capa aparte. La zona donde se puede pulsar debe permanecer en la pantalla en los dos estados. Vincula a includeArchived tanto la visibilidad de la marca como la del grupo que contiene el aviso. Si vinculas el grupo entero, el fondo y el icono se ocultan junto con el texto. Figma explica cómo aplicar variables al diseño y muestra cómo usar un booleano para controlar la visibilidad en un prototipo. Selecciona la marca o el grupo correspondiente, porque si ocultas toda la fila perderás el control que permite deshacer el cambio.

En la pestaña Prototype, asigna a la fila un disparador On click u On tap y añade Set variable. Elige includeArchived como destino y escribe la expresión includeArchived == false. Usa el selector de expresiones para insertar la referencia a la variable. La documentación de expresiones de Figma detalla la comparación de igualdad y el resultado booleano. Si el valor actual es false, la comparación devuelve true. Cuando vuelves a pulsar, devuelve false. Asignar siempre el literal true solo resolvería la primera pulsación.

Si la fila está en Auto Layout, abre el prototipo y fíjate en cómo cambia el espacio al aparecer el aviso. Pon el aviso en una fila propia y prueba con una frase más larga. En una pantalla baja, el botón podría quedar debajo de lo que se ve al entrar. Comprueba cómo se llega hasta él antes de pedirle a alguien que compare opciones. Si quedan huecos inesperados al ocultar el aviso, revisa si vinculaste el contenedor completo o una de sus capas internas.

Una propiedad booleana de componente tiene otro uso. La guía de propiedades de Figma la ilustra con capas opcionales, como el icono que un diseñador puede activar en una instancia. En este ejercicio, en cambio, la marca y el aviso comparten un dato que cambia durante la sesión. Otra opción es vincular la variable a un eje de variantes que acepte valores compatibles con true y false. Empieza con un solo mecanismo para dibujar la marca: así podrás identificar de dónde sale el resultado si la prueba falla.

Decidir qué pasa al continuar

En «Continuar», añade una acción Conditional que evalúe includeArchived == true. En la rama que cumple la condición, configura Navigate to para abrir la vista de todos los elementos. En la otra rama, conecta la vista de elementos activos. Crea primero ambos destinos y dales nombres distintos en el lienzo para localizarlos en el editor. La guía de expresiones de Figma explica cómo la acción condicional evalúa una expresión booleana.

Comprueba por separado la condición y lo que se muestra en los ajustes. Entra con la casilla vacía y continúa sin tocarla: debe abrirse la vista de activos. Vuelve a los ajustes, marca la casilla y comprueba que aparece el aviso antes de continuar. Si se ve el aviso pero se abre la lista incorrecta, revisa las dos ramas y sus destinos. Si se abre la lista correcta pero falta el aviso, revisa su vínculo de visibilidad. Esta secuencia acota el fallo antes de cambiar nada en el diseño.

En una exportación real, cambiar el alcance podría afectar al número de registros, al tiempo de procesamiento o a quién puede ver el resultado. Aquí basta con enseñar el alcance y las filas de ejemplo. La bifurcación comunica qué se espera del producto; no filtra datos, comprueba permisos ni genera un archivo. Si el equipo necesita verificar esos comportamientos, deja criterios de aceptación separados. La guía sobre flujos interactivos en Figma ayuda a conectar los destinos, y estos ejemplos de pruebas con prototipos sirven para redactar una tarea sin adelantarle la solución a la persona participante.

Probar ambas rutas desde el inicio

Para repetir la prueba, crea un marco de inicio con un botón «Empezar». Configura el botón para asignar false a includeArchived y después navegar a los ajustes. Desde las vistas previas, puedes volver a ese marco con una acción «Reiniciar». Si añades también «Volver a los ajustes», evita asignarle el reinicio cuando quieras conservar la elección. Usa etiquetas que distingan ambas acciones y verifica en Present que hacen lo que prometen.

En «Empezar», coloca Set variable antes de Navigate to. Figma documenta el orden de ejecución de varias acciones en una misma interacción. Para localizar un fallo, abre primero la vista ampliada y vuelve por la ruta normal. Si eso vacía la casilla, busca un reinicio en «Volver» o una acción adicional en el marco de ajustes. Después usa «Reiniciar» y «Empezar». Si sigue apareciendo el aviso, comprueba qué variable modifica el botón y si el aviso continúa vinculado a ella.

Ensaya cuatro secuencias antes de una sesión. Empieza y continúa sin marcar: espera solo elementos activos. Empieza, marca una vez y continúa: espera el aviso y los dos tipos de registro. Empieza, pulsa dos veces y continúa: el aviso debe desaparecer y la vista debe volver a mostrar solo activos. Por último, entra en la vista ampliada y reinicia: al volver a los ajustes la casilla tiene que estar vacía y no debe verse el aviso. Anota el estado justo antes de «Continuar» y el destino que se abrió. Con esas dos observaciones puedes distinguir una expresión mal configurada de una navegación que apunta al marco equivocado.

Si cambia una segunda casilla sin haberla pulsado, comprueba si también usa includeArchived. La guía de Figma sobre variables en prototipos explica que el cambio llega a todos los elementos vinculados al mismo valor. Comparte la variable cuando esos elementos representen una única decisión. Una opción independiente, como «Incluir comentarios», necesita su propio dato y sus propias pruebas. Antes de añadirla, pregúntate qué aporta al estudio: si solo quieres saber si se entiende el alcance de los archivados, más combinaciones pueden distraer de esa pregunta.

En una sesión moderada, pide: «Muéstrame cómo previsualizarías los elementos activos y los archivados». Observa si se encuentra la opción, qué se entiende al leer el aviso y si la lista coincide con esa expectativa. En otro intento, pide que se incluyan únicamente los activos y observa cómo se revierte una selección previa. Anota también lo que la persona cree que acaba de pasar. Puede pulsar los controles correctos y aun así pensar que el archivo ya se ha descargado. En ese caso conviene aclarar el texto o el paso de confirmación antes de añadir más interacciones.

Partir de una casilla de EmviUI

La casilla del kit EmviUI ofrece un punto de partida visual para la fila de ajustes. Fíjate en cómo se distinguen una casilla vacía y otra marcada y conserva la alineación de la etiqueta en ambos estados. El texto de la captura es de muestra. Sustitúyelo por una frase que describa tu opción y revísala al ancho en que salte a otra línea. Antes de vincular la variable, inspecciona las propiedades reales del componente: los valores de sus variantes pueden tener otros nombres.

Para adaptar el kit, puedes copiar los dos tratamientos a una prueba local y vincular primero una marca independiente. Si el control cambia también el fondo y el borde, un conjunto con dos variantes puede reproducirlo mejor. Comprueba el vínculo en una instancia antes de colocarlo en varios marcos. Conserva la biblioteca original mientras distingues las decisiones del producto de las reglas visuales reutilizables. Si además necesitas compartir textos entre instancias, consulta el ejercicio de variables de texto para asignarles un responsable y comprobar sus excepciones.

En la entrega al equipo, escribe los dos resultados en lenguaje corriente. Incluye el valor inicial, la condición, el texto del aviso, las filas esperadas y qué debe pasar al volver desde la vista previa. Añade una comprobación aparte para el control de la web. El patrón de casilla de WAI describe cómo se comunica el estado y cómo se activa con la barra espaciadora. Comprueba el teclado, el foco y el nombre accesible en la implementación. Una casilla bien dibujada y un clic que funciona en Present ayudan a evaluar el flujo, pero no demuestran que un lector de pantalla reciba el estado ni que se exporten los datos correctos.