Transformar toda una aplicación de modo claro a modo oscuro con un solo clic no es magia, es el resultado de usar variables de color correctamente en Figma. Si ya dominas estilos de texto, color y componentes con variantes, el siguiente paso lógico es convertir esos valores fijos en valores dinámicos que respondan al contexto.
¿Cuál es la diferencia entre un estilo y una variable?
Un estilo es un nombre vinculado a un valor fijo: siempre devuelve el mismo color, sin importar el contexto. Una variable, en cambio, adapta su valor según el modo activo. La analogía del termostato lo ilustra bien [0:42]: no necesitas dos termostatos, sino un dispositivo que soporte dos modos — comfort a 22 °C y frío a 18 °C. Las variables funcionan exactamente igual.
Figma ofrece cuatro tipos de variables:
- Color: almacena un valor hexadecimal aplicable a fills, strokes, sombras o cualquier propiedad de color.
- Número: útil para paddings, gap, tamaño de texto y bordes redondeados.
- String: almacena texto, ideal para soportar múltiples idiomas.
- Booleano: valor true o false para ocultar o mostrar elementos.
Para distinguirlos visualmente en el panel, un rectángulo con bordes redondeados representa una variable, mientras que un círculo identifica un estilo de color [3:16].
¿Cómo organizar y aplicar variables de color?
Al crear la primera variable, Figma genera automáticamente una colección [2:12]. Es recomendable nombrarla de forma clara — por ejemplo, "colores" — y agrupar las variables con una convención como brand/primary, brand/positive y brand/negative.
Más allá del branding, conviene identificar categorías adicionales:
- Texto: un color primary para el texto principal y un secondary más claro para reducir énfasis [4:50].
- Superficie (surface): un color de fondo para los frames y otro para las tarjetas [5:52].
- Bordes (border): el color del stroke que aparece, por ejemplo, en los transaction rows [6:24].
- Íconos: variantes para íconos por defecto, neutros y sobre superficies de marca.
Para aplicar una variable, selecciona el elemento, ve a la propiedad de fill y cambia el valor por la variable correspondiente. Una forma rápida de verificar que todo esté cubierto es seleccionar el frame completo y revisar la sección selection colors en el panel derecho [7:14]. Los colores sin variable asignada aparecerán sin el ícono rectangular.
¿Qué sucede con los colores decorativos?
Algunos colores — transparencias o detalles de decoración — pueden no requerir una variable si no van a cambiar entre modo claro y oscuro [7:30]. La decisión depende de si ese color tiene impacto visual al alternar temas.
¿Cómo crear el modo oscuro con un solo clic?
Con todas las variables aplicadas, el paso definitivo es crear un nuevo modo de variable [8:00]. Dentro de la tabla de variables, haz clic en el ícono new variable mode. Figma genera una segunda columna donde puedes asignar los valores del tema dark:
- Las superficies primarias pasan a tonos muy oscuros y las secundarias a un gris ligeramente más claro.
- Los textos primarios se aclaran considerablemente, mientras los secundarios mantienen un tono intermedio.
- Los bordes se ajustan para seguir siendo visibles sobre fondos oscuros.
- Los íconos se llevan casi al blanco para ganar contraste.
Para activar el modo oscuro en una pantalla, selecciona el frame, busca en el panel derecho la opción apply variable mode [9:20] y elige dark. El cambio es inmediato.
¿Cómo hacer ajustes finos?
Después de aplicar el modo, es normal que algunos elementos necesiten refinamiento [10:00]. Revisa que todos los íconos tengan su variable asignada, ajusta el contraste de los bordes y modifica la intensidad de las superficies secundarias hasta lograr el equilibrio deseado. Todo esto se hace directamente en la tabla de variables, viendo los cambios en tiempo real.
El resultado final es un sistema donde alternar entre light mode y dark mode requiere un solo clic, sin duplicar pantallas ni modificar componentes individualmente. Ahora el reto está en aplicar estos modos a todas las pantallas restantes de tu proyecto y comprobar que la experiencia se mantiene consistente. ¿Ya tienes claro qué colores convertirías en variables primero?
