¿Qué es un token de diseño?
Un token de diseño es un valor con nombre que guarda una única decisión de diseño, como un color, un paso de espaciado o un tamaño de fuente, para poder reutilizar esa decisión en las herramientas de diseño y en el código en lugar de escribirla a mano en cada sitio.
Por qué darle un nombre a un valor
Piensa en el color que usan los botones principales. Escrito directamente aparece como #2563EB en una hoja de estilos, como un campo hexadecimal en un relleno de Figma y como una cadena en lo que un desarrollador escribió la semana pasada. Tres copias, sin ninguna relación entre ellas.
Como token aparece una sola vez, bajo un nombre:
--color-action-primary: #2563EB;Todo lo demás se refiere al nombre. Cambias el valor una vez y cambian todos los usos. Esa indirección es la idea completa, y todo lo demás sobre los tokens se deriva de ahí.
Qué suelen cubrir los tokens
- Color: paletas, escalas y roles semánticos como fondo, borde, texto y estados
- Tipografía: familias, tamaños, pesos, interlineado, espaciado entre letras
- Espaciado: una escala consistente, normalmente sobre una base de 4px u 8px
- Radio de borde y grosor de borde
- Sombra y elevación
- Movimiento: duraciones y curvas de aceleración
- Puntos de corte y dimensiones de layout
Los tokens no son variables
La distinción importa. Una variable CSS es un mecanismo. Un token de diseño es una decisión que resulta expresarse a través de uno.
La diferencia práctica es la portabilidad. Un token existe con independencia de cualquier tecnología concreta, y por eso el mismo conjunto de tokens puede emitirse como propiedades personalizadas de CSS, una configuración de Tailwind, variables de Figma, Swift o Kotlin. Si solo existe como una línea de CSS, es una variable.
Formatos
El Design Tokens Community Group, dentro del W3C, publica un formato JSON pensado como intercambio común entre herramientas. Le da a cada token un $value y un $type:
{
"color": {
"action": {
"primary": { "$value": "#2563EB", "$type": "color" }
}
}
}La adopción es desigual pero crece, y es lo más parecido a un formato neutral de intercambio entre herramientas de diseño y pipelines de compilación.
Dónde encaja Flash DSM
Flash DSM genera un conjunto completo de tokens a partir de un prompt, la URL de una web, un archivo de Figma o una captura, y luego lo exporta como propiedades personalizadas de CSS, configuración de Tailwind, Tokens Studio JSON o variables de Figma.