Diseñar una interfaz coherente no depende solo de copiar y pegar colores o tamaños. La verdadera consistencia se logra cuando cada valor —un color, un número, un texto— se define una sola vez y se reutiliza en todos los puntos de la interfaz. En Figma, las variables y los estilos son las herramientas que hacen posible esa promesa, y dominarlas marca la diferencia entre un archivo desordenado y un sistema de diseño escalable.
¿Qué tipos de variables existen en Figma?
Figma permite crear cuatro tipos de variables [0:40], cada uno pensado para cubrir un tipo de valor recurrente:
- Color: almacena un valor hexadecimal o RGBA que se aplica a rellenos, bordes o íconos.
- Número: guarda valores numéricos como padding, gap o corner radius.
- String: conserva cadenas de texto, por ejemplo el call to action de un botón.
- Boolean: define estados binarios, encendido o apagado, verdadero o falso.
Para crearlas es necesario contar con la licencia profesional de Figma. Desde la barra de propiedades, en la sección de variables locales [1:10], se abre el panel donde se organizan por colecciones. Al presionar create variable, Figma pregunta qué tipo se necesita y asigna un valor predeterminado que se puede editar de inmediato.
¿Cómo se asigna una variable de color a un objeto?
Una vez creada la variable, asignarla es muy directo. Se seleccionan los objetos deseados, se busca la opción de relleno en la barra de propiedades y se presionan los cuatro puntos que abren el menú de estilos y variables [1:50]. Ahí aparece la colección con el color guardado.
Lo poderoso es que si más adelante se modifica el valor de esa variable —por ejemplo, añadiendo un tono rojizo al blanco original [2:20]—, todos los objetos vinculados se actualizan de inmediato. Se reconoce que un objeto tiene una variable aplicada porque el indicador de relleno muestra un pequeño borde distintivo.
¿Cómo funcionan las variables numéricas y de texto en un botón?
En un botón típico conviven múltiples variables al mismo tiempo [3:05]. Los valores de color se aplican al ícono, la tipografía y el fondo, pero además hay variables numéricas que controlan:
- Padding vertical: distancia superior e inferior dentro del botón (12 puntos).
- Gap horizontal: separación entre el ícono y el texto.
- Corner radius: el redondeo que da la forma característica al botón.
Las variables de tipo string [4:00] guardan el texto que aparece en el botón. Si el call to action debe decir siempre "Descargar", se crea una variable llamada internamente CTA cuyo valor es la palabra visible. El nombre interno es solo una referencia; el usuario final ve únicamente el contenido asignado.
¿Cómo usar variables para alternar entre dark mode y light mode?
Una de las aplicaciones más prácticas de las variables es el cambio de modos de apariencia [5:05]. En la barra de propiedades, bajo Apariencia > Modes, se puede alternar entre Dark y Light.
La lógica es sencilla: en modo oscuro el color biche funciona como fondo y el color komodo resalta tipografía e íconos. En modo claro se invierten los roles, garantizando buena accesibilidad [5:30]. Al duplicar un frame y cambiar su modo de Dark a Light, el componente hereda automáticamente los nuevos valores. Incluso al arrastrar una instancia de un modo al otro, las variables se actualizan sin intervención manual [6:05].
¿Qué diferencia hay entre una variable y un estilo en Figma?
Mientras una variable almacena un solo valor, un estilo agrupa varias decisiones de diseño en un único paquete reutilizable [6:30]. Un ejemplo claro es una gradiente radial compuesta por dos paradas de color: un verde claro (komodo) y un verde oscuro (base). Cada parada referencia una variable, y el conjunto se guarda como estilo con el nombre gradient_dark [7:15].
Los estilos no viven dentro de las bibliotecas de variables; aparecen como estilos locales del archivo y se aplican desde el mismo menú de relleno con los cuatro puntos.
¿Cómo se crean estilos tipográficos reutilizables?
La tipografía es quizá el estilo más importante del sistema. Con la fuente Manrope como base [8:00], se define un estilo que incluye tamaño y altura de línea —por ejemplo, 16-22— y se guarda como referencia global. Sin importar si un texto se modifica temporalmente a tamaño 200, basta con reseleccionar el estilo 16-22 desde la barra de propiedades para volver al valor original [8:35].
Esta práctica asegura que cualquier persona del equipo pueda aplicar las mismas decisiones tipográficas sin memorizar valores exactos, fortaleciendo la consistencia en cada pantalla del producto.
Combinar componentes, auto layout, variables y estilos transforma un archivo de Figma en un sistema vivo donde cada cambio se propaga de forma predecible. Si ya experimentaste con estos conceptos, comparte en los comentarios cómo organizas tus colecciones de variables y qué convenciones de nombres te han funcionado mejor.
