Prototipando en Figma: variables, expresiones condicionales y booleans.

Práctica y aprendizaje de Variables, expresiones y condicionales.

Introducción

Como diseñadores, nos enfrentamos constantemente al reto de elaborar prototipos que sean tanto eficientes como efectivos. Con este propósito de simplemente practicar, diseñé una aplicación ficticia de comida, concretamente hamburguesas.

No buscaba una perfección estética, solamente, la oportunidad de aprender y practicar el uso de variables, condicionales y expresiones en Figma. Fue con este enfoque que decidí sumergirme en este proyecto práctico. Aprovechando este momento, y mientras os muestro el caso práctico, lo repasaremos juntos ( sino siempre podéis pasar directamente al vídeo 😜).

Pero antes de sumergirnos en los detalles, hablemos de un concepto fundamental: los Design Tokens.

Design Tokens

Estos tokens representan características clave de los elementos de la interfaz, desde el color hasta el espaciado y las sombras.

Actúan como bloques fundamentales en el proceso de diseño. Imagina que estás construyendo con piezas de LEGO; los tokens serían las unidades más pequeñas y esenciales. Estas piezas minúsculas nos permiten crear estructuras más grandes y complejas, similar a cómo los átomos forman moléculas en el concepto de Atomic Design.

Además, los Design Tokens sirven como un punto de referencia constante y fiable en los diseños. Son pequeñas piezas de información que se reutilizan, garantizando que haya coherencia visual y funcional en todas las partes de un producto. Al adoptar estos tokens, los diseñadores y desarrolladores pueden trabajar con una fuente única y veraz, asegurando que los estándares y valores se mantengan uniformes en todo el proyecto.

Ahora que comprendemos qué son los Design Tokens, veamos las ventajas de implementarlos en nuestros diseños.

Beneficios de usar tokens

• Consistencia: Al tener definidos ciertos valores (como colores, espacios, tipografías, etc.), se asegura que se utilicen de manera uniforme en todo el diseño.
• Eficiencia: Facilita las actualizaciones de diseño. Por ejemplo, si decides cambiar un color principal, en lugar de modificar cada instancia individual, simplemente actualizas el token y este cambio se refleja en todo el diseño.
• Colaboración: Los tokens sirven como un lenguaje común entre diseñadores y desarrolladores. Ayuda a que ambos entiendan y utilicen los mismos valores y estándares.

Con estas ventajas claras en mente, veamos cómo aplicarlos en un escenario real.

Su uso en este caso práctico: A modo de práctica, utilicé tokens para definir los colores, border radius y espaciados. Esto no solo aceleró el proceso de diseño, sino que también aseguró que la apariencia y la experiencia de usuario fueran consistentes en todas las pantallas.

Variables

Las variables en Figma son espacios donde se almacenan y recuperan datos, permitiendo una mayor consistencia y flexibilidad en el diseño.

Tipos de datos: Estos pueden ser números, cadenas de texto, valores lógicos (booleanos), objetos y funciones.

Características: Cada variable tiene un identificador, por ejemplo, “button-background-primary” puede estar asociado a un tono específico. Si cambiamos el valor de esta variable en un lugar, automáticamente se reflejará en todos los lugares donde se utiliza.

Recomendación de nomenclatura: Es preferible usar el inglés y seguir convenciones como guiones o camel case (ej. colorFrankis o color-Frankis).

Tipos de Variables

• Color variables
  Guardan valores en formato hexadecimal destinados a colores de relleno o strokes.
• Number variables
  Contiene valores numéricos para usar en dimensiones, spacings, border-radius, y propiedades de autolayout.
• String variables
  Contiene valores para text layers.
• Boolean variables
  Determina la visibilidad de una layer (true, false).

Habiendo comprendido las diferentes tipos de variables, a continuación presento algunos ejemplos que utilicé en este proyecto.

Ejemplos de variables utilizados.

Expresiones

Las expresiones son operaciones con variables que, en su mayoría, son funciones matemáticas.

Utilidad: Son fundamentales para crear variables dinámicas en Figma, permitiendo adaptabilidad y reactividad en los diseños.

Las más frecuentes y las que están disponibles actualmente son:

• Addition +
• Subtraction –
• Multiplication *
• Division /

Condicionales

Las estructuras condicionales permiten variar el diseño o comportamiento basado en ciertas condiciones.

Importancia: Estas herramientas transforman la forma de prototipar en Figma. Anteriormente, era común duplicar pantallas para cada interacción posible. Ahora, con condicionales, es posible manejar múltiples escenarios con menos pantallas, lo que agiliza y optimiza el proceso de diseño.

Suelen tener una estructura if/else:

• If, cuando se cumple un criterio determinado, se inicia una acción concreta.
• else, en caso contrario, se realiza una acción diferente.

Dejo por aquí un enlace a Figma Learn dónde lo explican bastante bien.

Vídeo del prototipo

Uso práctico en éste caso concreto

Objetivo 1

Crear interacciones en el componente botón (-)(+) para modificar una cantidad.

• En la sección de prototipos, definimos una interacción para el botón.
• Al hacer clic en el botón de suma (+), queremos incrementar un contador de artículos.
• Usamos una variable llamada “itemCount” y la incrementamos en +1 cada vez que se hace clic en el botón.
• También mostramos este recuento de artículos en el componente creado de “(-)(+)” además de en el “carrito” para que el usuario vea la cantidad actual.

Reducir la Cantidad con el Botón de Resta

• Para el botón de resta (-), queremos reducir el recuento de artículos.
• Pero, hay una condición: solo queremos reducir si el recuento de artículos es mayor que cero.
• Si cumple esta condición, reducimos el recuento de artículos en uno.

Total de Artículos en el Carrito

• También queremos mostrar el total de artículos. Para ello, cada vez que se hace clic en el botón de (+), además de incrementar el recuento de artículos, queremos actualizar una variable llamada “cartCount”.
• Al hacer clic en el botón (+), también actualiza el recuento del carrito para reflejar el total.

Resumen

• Al hacer clic en el botón de suma, incrementamos el recuento de artículos y actualizamos el recuento sumando las cantidades de varios artículos.
• Al hacer clic en el botón de resta, reducimos el recuento de artículos solo si es mayor que cero.

Objetivo 2

Modificar el número total de items en el carrito.

Estado Vacío del Carrito

• Al inicio, nuestro carrito tiene un estado por defecto que indica “El carrito está vacío”.
• Este estado, denominado “isEmpty”, es verdadero (true) por defecto ya que nuestro carrito comienza vacío.

Añadir un Ítem al Carrito

• Al hacer clic en el botón de suma (+), queremos que se añada un ítem al carrito.
• Para esto, vamos a crear una condición: si la cantidad de ítems “itemCount” es mayor a cero, queremos cambiar una variable llamada “Added to cart” de falso (false) a verdadero (true).

Quitar un Ítem del Carrito

• Si presionamos el botón de resta (-), la idea es disminuir la cantidad de ese ítem en el carrito.
• Hay una condición: si la cantidad de ítems “itemCount” llega a cero, queremos cambiar la variable “Added to cart” de verdadero (true) a falso (false).

Resumen

• Al hacer clic en el botón de suma, si el ítem aún no está en el carrito, lo añadimos y cambiamos la variable “Added to cart” a verdadero.
• Al hacer clic en el botón de resta, si la cantidad de ese ítem llega a cero, lo quitamos del carrito y cambiamos la variable “Added to cart” a falso.
• Si no hay ítems en el carrito, se muestra el estado vacío del carrito.

Objetivo 3

Modificar el precio total en función de la cantidad de ítems que agregamos o quitamos del carrito.

Ajuste en el Botón de sumar

• Al hacer clic en el botón de suma (+), se debería sumar el precio del ítem al total.
• Configurar una interacción en este botón para que al ser presionado, realice la siguiente operación: total = “total” + (“itemCount” * “price”).
• Repite este proceso para cada ítem disponible.

Ajuste en el Botón de restar

• Al hacer clic en el botón de resta (-), se debería restar el precio del ítem al total.
• Configurar una interacción en este botón para que al ser presionado, realice la misma operación que el botón de suma, pero considerando la cantidad actual de ese ítem.
• Esto asegura que el precio total se actualice correctamente cuando se remueve un ítem.

Vídeo de las expresiones y condicionales

Vídeo de las expresiones y condicionales.

Conclusión

La implementación de variables, expresiones y condicionales en Figma ha revolucionado mi enfoque de diseño.

Mediante la creación de una aplicación de hamburguesas, pude experimentar de primera mano las ventajas de estas herramientas. No solo simplifican el proceso de diseño, sino que también ofrecen una mayor precisión y coherencia en los prototipos.

Debo sumergirme todavía más en estas características y experimentar por mi mismo, ya que realmente esto puede llevar mis diseños al siguiente nivel.