Crear interfaces consistentes en Figma se vuelve mucho más sencillo cuando dominas las variables y estilos, dos herramientas que permiten reutilizar colores, números, textos y decisiones de diseño en cada rincón de tu proyecto. Si trabajas en product design o construyes sistemas escalables, entender estos cuatro tipos de variables te ahorra horas de trabajo manual y te asegura coherencia visual en cualquier pantalla.

¿Qué son las variables en Figma y para qué sirven?

Una variable guarda un valor reutilizable que puedes asignar en distintos puntos de la interfaz. A diferencia de las variantes, que controlan estados de un componente, las variables almacenan datos puntuales como un color, un número o una palabra.

Figma permite crear cuatro tipos de variables, cada una pensada para un uso específico [3:30]:

• Variables de color, ideales para fondos, tipografías o íconos.
• Variables de número, útiles para paddings, gaps y corner radius.
• Variables de string, que guardan textos como un call to action.
• Variables booleanas, que funcionan como un interruptor encendido/apagado.

¿Cuál es la diferencia entre variable y variante en Figma? Una variante define estados visuales de un componente (hover, activo, deshabilitado). Una variable almacena un valor puntual reutilizable, como un color o un número, y puede aplicarse en cualquier propiedad.

¿Cómo creo mi primera variable de color?

Para empezar necesitas la licencia profesional de Figma, que ya viene incluida con tu cuenta de Platzi. En la barra de propiedades de la derecha busca Local variables, abre el panel y haz clic en Create variable. Figma te preguntará qué tipo quieres crear.

Al elegir color, puedes nombrar la variable (por ejemplo, blanco) y asignarle un valor inicial. Después seleccionas cualquier objeto, vas a Relleno, abres el menú de los cuatro puntos y aplicas estilos y variables desde tu biblioteca.

Lo poderoso aparece cuando cambias el valor original: si decides que el blanco tenga un toque rojo, todos los objetos que usan esa variable se actualizan al instante. Identificas que un objeto tiene una variable aplicada porque el relleno muestra un pequeño borde distintivo en la barra de propiedades.

¿Cómo aplicar variables de número y string en componentes?

Las variables numéricas se aplican sobre cualquier propiedad medible: distancias, espaciados o curvaturas. En un botón típico puedes guardar valores como [5:50]:

• Padding vertical de 12 puntos, aplicado arriba y abajo.
• Gap horizontal, que es la distancia entre el ícono y el texto.
• Corner radius, que define qué tan redondo se ve el botón.

Después de definir estos números, cualquier botón nuevo puede heredar las mismas medidas con un par de clics, lo que mantiene la armonía visual sin tener que recordar valores específicos.

¿Qué guarda una variable string?

Una variable string almacena un valor de texto. Si tu botón siempre debe decir Descargar, creas una variable llamada CTA y le asignas ese texto. El nombre interno (CTA) es solo tu referencia, mientras que Descargar es lo que realmente aparece en pantalla.

Esto resulta clave cuando trabajas con interfaces multilingües o cuando un mismo texto se repite en decenas de pantallas y necesitas cambiarlo en un solo lugar.

¿Cómo cambiar entre dark mode y light mode con variables?

Una de las aplicaciones más interesantes de las variables es alternar entre modos de apariencia. En la barra de propiedades, dentro de Appearance, encuentras la opción Modes, que te permite configurar valores distintos para dark y light sobre las mismas variables.

Para el modo oscuro, el fondo suele ser el color biche y la tipografía el color cómodo. En el modo claro se invierte: fondo oscuro y tipografía clara, manteniendo siempre buena accesibilidad por contraste.

Al duplicar un frame y cambiar su modo de dark a light, el componente hereda automáticamente los nuevos valores. Si arrastras una instancia de un modo al otro, los colores se actualizan en tiempo real. Esa es la magia de tener una arquitectura de variables bien pensada.

¿Qué es un mode en Figma? Es una configuración alternativa de los mismos valores de variable. Permite que una variable de color tenga un valor en dark mode y otro en light mode, aplicando el cambio automáticamente al componente.

¿Cómo se diferencian estilos y variables en Figma?

Un estilo agrupa varias variables o decisiones en un solo lugar reutilizable. Mientras una variable guarda un valor único, un estilo combina varios para empaquetar una decisión completa de diseño.

En una pantalla de splash puedes tener un gradient radial con dos paradas de color: el verde cómodo y el verde más oscuro o base. Una vez referenciadas como variables, creas un estilo nuevo desde Apply styles and variables y lo nombras, por ejemplo, gradient_dark [10:30].

¿Dónde aparecen los estilos creados?

A diferencia de las variables, los estilos no viven dentro de la librería de variables. Aparecen como estilos locales del archivo cuando deseleccionas todo y miras el panel lateral. Para reutilizarlos, abres Relleno, haces clic en los cuatro puntos y los aplicas desde la sección de estilos locales.

Figma soporta varios tipos de estilos, pero el más usado después de los gradientes es el de tipografía. Si tu proyecto usa Manrope como base, puedes crear un estilo llamado 16-22 que englobe tamaño, espaciado y distancia. Así, cuando una tipografía se desconfigure, basta con reaplicar el estilo y todo vuelve a su lugar.

La combinación de variables y estilos es lo que te permite escalar un sistema de diseño sin perder consistencia. Cuéntame en los comentarios qué variables ya estás usando en tus proyectos y cuáles vas a empezar a aplicar después de esto.