De los estilos de color de Figma a tokens reales

Los estilos de color y las variables de Figma resuelven problemas distintos. Un estilo es una pintura con nombre — una definición de relleno que puede contener un color sólido, un degradado o una imagen. Una variable es un valor con nombre y con modos: una sola variable puede contener un valor claro y un valor oscuro, y cambiar el modo de un frame invierte todos los rellenos vinculados a ella. Convertir una paleta de Figma en tokens reales significa trasladar sus colores sólidos a variables, superpuestas como una colección primitiva (los pasos crudos de la rampa) y una colección semántica (roles como text/primary que las referencian) — la misma estructura de dos capas que tienen los design tokens en el código.

La distancia entre esas dos funciones es donde muchas configuraciones del tipo «nuestro sistema de diseño vive en Figma» se estancan en silencio: un muro de estilos de color bien nombrados que no pueden expresar el modo oscuro y que el código solo puede imitar a mano. Este artículo cubre la división, la configuración por capas y el flujo de trabajo desde la rampa generada hasta el relleno vinculado; las rampas en sí son el tema de nuestra guía de escalas de color.

¿Cuál es la diferencia entre los estilos de color y las variables?

Los estilos son la función más antigua: pinturas con nombre que aplicas a rellenos y trazos. Siguen siendo el único hogar para los degradados y los rellenos de imagen, y para los equipos que solo necesitan una nomenclatura consistente, funcionan. Lo que un estilo no puede hacer es contener más de un valor — un estilo llamado background es una única pintura, para siempre, sin importar el tema.

Las variables son valores con nombre organizados en colecciones, y cada colección puede definir modos — conjuntos paralelos de valores para los mismos nombres. Las variables también pueden referenciarse entre sí (alias), y se vinculan a rellenos, trazos y efectos.

Para el color, los modos son la función decisiva. Define una variable background con un valor claro y un valor oscuro, vincúlala al relleno de un frame, y el tema oscuro deja de ser un archivo paralelo que mantener: selecciona el frame, cambia su modo, y todos los rellenos vinculados a él se invierten a la vez. Un tema oscuro basado en estilos, en cambio, es un segundo conjunto de estilos aplicado a mano — un rediseño que hay que ejecutar de nuevo en cada pantalla.

¿Cómo deben superponerse las variables de color?

En dos colecciones que reflejan las capas de tokens en el código.

La colección primitiva contiene la materia prima: los pasos de la rampa. brand/50 hasta brand/900, lo mismo para la escala de neutros y los colores funcionales — nombres que describen lo que un color es. Los primitivos normalmente no necesitan modos; un paso de la rampa es el mismo valor en cualquier tema.

La colección semántica contiene los roles: background, surface, text/primary, border/default, fill/brand — nombres que describen para qué sirve un color. Cada variable semántica es un alias hacia la colección primitiva, y esta es la capa que lleva los modos: en modo claro background referencia un paso casi blanco, en modo oscuro uno casi negro. El nombre del rol se queda fijo mientras su valor viaja.

La recompensa de esa indirección es la misma que compran los tokens en el código: los diseñadores trabajan con el vocabulario de roles, la rampa puede regenerarse sin renombrar nada, y el modo oscuro es un redireccionamiento de alias en lugar de nuevas decisiones por pantalla.

¿Cómo es el flujo de trabajo de principio a fin?

Primero la generación, después la vinculación.

Las rampas parten de una sola semilla. Dale a Scale Composer un color de marca — #2563eb, que es oklch(0.546 0.215 262.9) — y genera la rampa de diez pasos, la escala de neutros tintada y los colores funcionales de forma nativa en OKLCH, para luego derivar los roles semánticos por superficie con los umbrales de contraste WCAG comprobados y APCA reportado junto a ellos. La exportación de Figma Variables lleva esa estructura hacia fuera — primitivos, alias semánticos, valores hex incluidos — de modo que las colecciones descritas arriba llegan ya construidas en lugar de ensambladas a mano.

Abre la exportación de Figma Variables de la paleta en Scale Composer — los pasos de la rampa como una colección primitiva, los roles con alias por encima, listos para importar.

Desde ahí, el contrato del diseñador es breve: vincula variables semánticas a los rellenos, nunca los pasos crudos — el fondo de la tarjeta es surface/tint, no brand/50, aunque hoy se resuelvan al mismo valor. Los pasos crudos sirven para construir roles, no para tocar pantallas.

El modo oscuro llega entonces como datos. Scale Composer deriva la paleta oscura en lugar de reflejar la clara — su propia curva de luminosidad, con el croma aumentado en aproximadamente un 20 %, porque los entornos oscuros atenúan el colorido percibido — y esos valores se convierten en el segundo modo de la colección semántica. Ninguna pantalla se rediseña; los frames se vuelven a resolver.

¿Qué te aporta realmente la disciplina de vinculación?

Aquí está la misma tarjeta promocional construida dos veces. En pantalla, hoy, las dos son idénticas hasta el píxel:

Fíjate en que la versión codificada a mano no contiene ningún error — cada hex es el valor actual correcto. La diferencia solo aflora cuando la paleta cambia, que es justo cuando menos tiempo hay para arreglarlo.

En un cambio de marca, la semilla cambia y los primitivos se vuelven a derivar: la tarjeta vinculada se actualiza en todas las instancias, mientras que la tarjeta codificada a mano necesita que se rastreen y reescriban cinco valores — multiplicado por cada pantalla que la copió. A la hora del modo oscuro, la tarjeta vinculada se invierte con el modo del frame; la tarjeta codificada a mano no responde en absoluto, así que alguien crea un duplicado card-dark, y desde ese día las dos se desvían de forma independiente. La columna vinculada cuesta un poco de disciplina por relleno; la columna codificada a mano cuesta una migración por cada cambio.

¿Qué no pueden hacer las variables por ti?

Dos límites honestos. Primero, las variables de color contienen valores sólidos: los degradados y los rellenos de imagen siguen viviendo en los estilos, así que un archivo real ejecuta ambas funciones en paralelo — variables para los colores con forma de token, estilos para el resto más pictórico.

Segundo, la disciplina de vinculación es humana. Figma no impide que nadie escriba un hex en un relleno, y un hex escrito a mano se salta toda la cadena en silencio — coincidirá a la perfección hasta el primer cambio de marca o cambio de modo, y entonces aflorará como una tarjeta obsoleta en una interfaz actualizada. Ninguna configuración de herramienta sustituye el hábito de equipo de preguntarse, en cada relleno, ¿qué rol es este? La superposición por capas hace que la elección correcta sea barata; no puede hacer imposible la incorrecta.

Confiar en la mecánica de los modos es más fácil una vez que has visto viajar los valores. Exporta la misma paleta con los modos claro y oscuro uno al lado del otro — los roles semánticos manteniendo sus nombres mientras ambos conjuntos de valores se sitúan debajo, los oscuros derivados en lugar de invertidos.