Aprovecha al Máximo las Variables en Figma: Diseño Adaptable y Eficiente para Todos tus Proyectos

Las Variables de Figma son una de las características más potentes y transformadoras que se han introducido en la herramienta. Permiten a los diseñadores crear sistemas de diseño mucho más robustos, flexibles y eficientes. Olvídate de actualizar colores, textos, tamaños o estados de componentes uno por uno; con las Variables, puedes definir estos valores una sola vez y aplicarlos en todo tu diseño, facilitando cambios masivos y la adaptación a diferentes modos (claro/oscuro), idiomas o tamaños de pantalla.

Este tutorial te sumergirá en el mundo de las Variables de Figma, desde su configuración inicial hasta su aplicación práctica en escenarios complejos. ¡Prepárate para llevar tus habilidades de diseño al siguiente nivel! 🚀

💡 ¿Qué son las Variables en Figma y por qué son tan importantes?

Imagina que tienes un botón y necesitas cambiar su color principal en cientos de instancias a lo largo de tu proyecto. Sin Variables, tendrías que seleccionar cada instancia y aplicar el nuevo color. Con Variables, defines un 'token' de color, por ejemplo, primary.500, y ese token se asigna al color del botón. Si decides que primary.500 debe ser azul en lugar de verde, simplemente cambias el valor de la Variable primary.500 en un solo lugar, ¡y todos los botones vinculados a ella se actualizan automáticamente!

Las Variables son, en esencia, contenedores para guardar valores reutilizables que pueden aplicarse a propiedades de diseño (color, número, string, booleano). Piensa en ellas como los tokens de diseño que los desarrolladores usan en el código, pero directamente integrados en tu herramienta de diseño. Esto cierra la brecha entre diseño y desarrollo, promoviendo una mayor consistencia y eficiencia.

Beneficios Clave de Usar Variables:

• Consistencia: Asegura que los valores de diseño sean uniformes en todo el proyecto.
• Eficiencia: Reduce drásticamente el tiempo de actualización y mantenimiento.
• Escalabilidad: Facilita la expansión de sistemas de diseño complejos.
• Flexibilidad: Permite la creación de temas dinámicos (modo oscuro, temas de marca).
• Handoff: Mejora la comunicación con los desarrolladores al proporcionar tokens de diseño claros.
• Prototipado Avanzado: Habilita interacciones complejas y prototipos basados en estados.

🛠️ Primeros Pasos: Creando y Gestionando Variables

Crear Variables en Figma es un proceso sencillo. Se gestionan desde el panel Local Variables en el modo Design.

1. Acceder al Panel de Variables

1. Asegúrate de no tener nada seleccionado en tu lienzo.
2. En el panel derecho (Design tab), busca la sección Local Variables.
3. Haz clic en el botón Open variables.

Se abrirá una ventana flotante donde gestionarás todas tus Variables.

2. Tipos de Variables

Figma soporta cuatro tipos de Variables, cada una con un propósito específico:

• Color: Para valores de color (RGB, Hex, HSL).
• Number: Para valores numéricos (tamaños, espaciados, radios).
• String: Para cadenas de texto (etiquetas, descripciones, nombres).
• Boolean: Para valores verdadero/falso (visibilidad, estado).

3. Crear una Colección de Variables

Las colecciones son como carpetas que organizan tus Variables por categorías, facilitando su gestión. Puedes tener colecciones para colores, espaciados, tipografía, etc.

1. En la ventana de Local Variables, haz clic en Create collection.
2. Nombra tu colección, por ejemplo, Colores Base.

4. Crear Variables Individuales

Dentro de una colección, puedes empezar a añadir Variables:

1. Selecciona tu colección (por ejemplo, Colores Base).
2. Haz clic en Create variable.
3. Elige el tipo de Variable (Color, Number, String, Boolean).
4. Define un Name para tu Variable (usa una convención de nombrado clara, como primary.500 o spacing.medium).
5. Asigna un Value inicial a la Variable.

Ejemplo:

🎨 Aplicando Variables a tus Diseños

Una vez que has creado tus Variables, el siguiente paso es aplicarlas a los elementos de tu diseño. Figma hace esto increíblemente fácil.

1. Aplicar Variables de Color y Número

1. Selecciona un objeto en tu lienzo (un rectángulo, un texto, un componente).
2. En el panel derecho (Design tab), busca la propiedad que deseas vincular a una Variable (por ejemplo, Fill para un color, Width para un número).
3. Haz clic en el icono de cuatro puntos (estilos) o el icono de Variable (un rombo) junto a la propiedad.
4. En el menú que aparece, verás tus colecciones y Variables. Selecciona la Variable que deseas aplicar.

Por ejemplo, para aplicar primary.brand al Fill de un botón:

2. Aplicar Variables de String a Textos

1. Selecciona una capa de texto.
2. En el panel Design, busca la sección Text.
3. Haz clic en el icono de Variable junto al campo de texto. (A veces puede ser necesario hacer doble clic en el texto para editarlo y luego hacer clic derecho para ver la opción 'Apply variable').
4. Selecciona la Variable de String que contenga el texto deseado.

3. Aplicar Variables Booleanas para Visibilidad

Las Variables Booleanas son perfectas para controlar la visibilidad de elementos o la presencia de un estado (por ejemplo, un icono de error).

1. Selecciona una capa o grupo de capas.
2. En el panel Design, busca la sección Layer.
3. Haz clic en el icono de Variable junto a la propiedad Layer visibility (el ojo).
4. Selecciona tu Variable Booleana (por ejemplo, icon.visible). Cuando el valor de icon.visible sea true, el elemento será visible; si es false, se ocultará.

🔄 Modos y Grupos de Variables: Temas y Adaptabilidad

Aquí es donde las Variables de Figma realmente brillan. Los Modos te permiten definir diferentes conjuntos de valores para tus Variables, lo que es esencial para crear temas, adaptaciones a idiomas o diferentes densidades de información.

1. ¿Qué son los Modos?

Un Modo es una variación de valores para un conjunto de Variables. Por ejemplo, en una colección de colores, puedes tener un Modo Oscuro y un Modo Claro.

1. En la ventana Local Variables, selecciona una colección (ej. Colores Base).
2. Verás una columna predeterminada llamada Value. Esta es tu Modo 1.
3. Haz clic en el icono + al lado de Value para Add new mode.
4. Nombra el nuevo modo (ej. Dark).
5. Ahora puedes asignar valores diferentes a tus Variables para este nuevo modo.

Ejemplo de Modos para Colores:

2. Aplicar Modos a tus Diseños

Para cambiar el modo de tus diseños, puedes hacerlo a nivel de página, marco o incluso de componente:

1. Selecciona un marco (Frame) o una página.
2. En el panel derecho (Design tab), busca la sección Layer.
3. Verás un desplegable llamado Variables o Modes (dependiendo de la versión de Figma y de si tienes colecciones asignadas).
4. Selecciona el modo deseado (ej. Dark).

Todos los elementos dentro de ese marco que estén vinculados a Variables en esa colección, se actualizarán para mostrar los valores del Modo Dark.

3. Grupos de Variables para Estructura

Dentro de una colección, puedes organizar tus Variables en grupos. Esto es especialmente útil para colecciones grandes o cuando trabajas con sistemas de diseño complejos.

1. En la ventana Local Variables, selecciona tu colección.
2. Haz clic en el icono de carpeta para Create group.
3. Arrastra y suelta tus Variables dentro de los grupos para organizarlas (ej. Colors/Brand, Colors/Neutral, Spacing/Base).

Esta estructura se reflejará cuando intentes aplicar Variables, facilitando la búsqueda y selección.

🚀 Uso Avanzado de Variables: Prototipado Interactivo y Expresiones

Las Variables no solo sirven para la consistencia visual; también son una herramienta poderosa para crear prototipos dinámicos e interactivos.

1. Variables en Prototipado

Puedes modificar el valor de una Variable como resultado de una interacción (clic, hover, etc.). Esto abre un mundo de posibilidades para prototipos complejos sin necesidad de múltiples frames.

Ejemplo: Un Contador de Carrito de Compras

1. Crea una Variable de Number llamada cart.count con un valor inicial de 0.
2. Crea un componente de botón Añadir al Carrito y un texto que muestre el valor de cart.count (vinculando la propiedad Text a cart.count).
3. En el modo Prototype:
   • Selecciona el botón Añadir al Carrito.
   • Añade una interacción On Click.
   • Selecciona Set Variable.
   • Elige cart.count como la Variable a modificar.
   • Establece el Value a cart.count + 1 (puedes usar expresiones simples).

Ahora, cada vez que hagas clic en el botón en el prototipo, el número en el carrito se incrementará.

Ejemplo: Toggle de Modo Oscuro

1. Crea una Variable Boolean llamada isDarkMode con valor inicial false.
2. Crea dos Modos en tu colección de colores: Light y Dark.
3. Configura un botón de toggle para que On Click Set Variable isDarkMode a NOT isDarkMode.
4. Para que los colores cambien, necesitas una interacción que, cuando isDarkMode cambie, aplique el Modo Dark si isDarkMode es true, y Light si es false. Esto se hace a través de expresiones más avanzadas o envolviendo el contenido en un Frame al que le asignas el Modo según la Variable.

2. Expresiones con Variables

Figma permite el uso de expresiones básicas para manipular Variables en interacciones. Puedes realizar operaciones matemáticas (+, -, *, /) y lógicas (AND, OR, NOT).

• variable + 1
• variable * 2
• NOT isTrue
• a > b ? 'Mayor' : 'Menor' (operador ternario)

3. Variables en Componentes y Variantes

Las Variables son especialmente poderosas cuando se combinan con Componentes y Variantes. Puedes usar Variables para controlar propiedades de tus Variantes (ej. ocultar un icono en una variante específica, cambiar el texto de una etiqueta).

Ejemplo: Botón con o sin Icono

1. Crea un componente Button con un icono opcional.
2. Crea una Variable Boolean llamada showIcon.
3. En el componente Button, vincula la visibilidad del icono a la Variable showIcon.
4. En tus Variantes (ej. State=Default, State=Hover), puedes controlar la visibilidad del icono modificando showIcon a true o false para cada variante si es necesario. Alternativamente, permite que la instancia herede la Variable, y controlas showIcon a nivel de instancia.

Esto te da un control granular y centralizado sobre las propiedades de tus componentes.

✅ Buenas Prácticas y Consejos para Trabajar con Variables

Para maximizar el potencial de las Variables, es crucial adoptar buenas prácticas desde el principio.

1. Convenciones de Nombramiento Claras

Utiliza una convención de nombrado consistente y fácil de entender. Prefiere nombres semánticos que describan el propósito de la Variable, no su valor actual.

• Mal: RedButtonColor, SmallGap
• Bien: color.brand.primary, spacing.stack.sm, text.heading.h1.fontFamily

2. Estructura de Colecciones y Grupos

Organiza tus Variables en colecciones lógicas y usa grupos para una jerarquía clara. Algunos ejemplos:

• Colecciones: Global, Colores, Espaciados, Tipografía, Breakpoints
• Grupos dentro de Colores: Brand, Neutral, Feedback, Semantic

3. Prioriza Variables sobre Estilos (en algunos casos)

Si bien los Estilos siguen siendo útiles para la tipografía y efectos, para colores y números, las Variables ofrecen mayor flexibilidad, especialmente con Modos. Puedes incluso vincular Estilos a Variables.

4. Prueba tus Variables Rigurosamente

Antes de aplicar tus Variables a un proyecto completo, pruébalas en un entorno controlado. Crea un pequeño conjunto de componentes y verifica que los Modos y las interacciones funcionen como esperas.

5. Documentación y Comunicación

Si trabajas en equipo, documenta cómo se usan las Variables y las convenciones de nombrado. Asegúrate de que todos los miembros del equipo entiendan su propósito y cómo aplicarlas.

🔚 Conclusión: El Futuro del Diseño con Variables en Figma

Las Variables de Figma no son solo una característica más; son un cambio de paradigma en cómo abordamos el diseño de interfaces. Nos permiten construir sistemas más inteligentes, adaptables y fáciles de mantener. Al dominar las Variables, no solo te conviertes en un diseñador más eficiente, sino que también cierras la brecha con el desarrollo, creando un lenguaje común para los tokens de diseño.

Empieza a integrar las Variables en tus flujos de trabajo hoy mismo. Comienza con cosas pequeñas, como tus colores base y espaciados, y luego expande su uso a textos, visibilidad y prototipos interactivos. Verás cómo transforman tu forma de trabajar y la calidad de tus entregas.

¡Feliz diseño con Variables! ✨