Los design tokens son los nombres compartidos de tus decisiones de diseño: color.brand.500, space.md, radius.pill. Mantenerlos sincronizados entre Figma y el código es donde más se desvían los design systems. Este es un flujo que mantiene una sola fuente de verdad.
1. Estructura tus Variables pensando en código
- Colección de primitivos: valores crudos (violet/500, gray/900, space/4). Un solo modo.
- Colección semántica: significado, no valor (surface, text, accent, border). Modos Claro y Oscuro, cada uno apuntando a un primitivo.
- Nombra con barras en Figma (color/brand/500). En código se convierten en puntos o guiones.
2. Exporta
Usa una exportación de Variables que conserve alias y modos: un plugin que escriba el formato de Design Tokens del W3C o uno que exporte colecciones y modos como JSON. Los alias importan: si surface apunta a paper/50, el código debería decirlo en vez de copiar el hexadecimal.
3. Conoce el formato del W3C
{
"color": {
"$type": "color",
"brand": { "500": { "$value": "#8B6CF0" } },
"action": { "primary": { "$value": "{color.brand.500}" } }
}
}Cada token tiene un $value y un $type (que puede heredarse de su grupo). Los alias se escriben como {grupo.token}.
4. Genera Tailwind v4 y CSS
Tailwind v4 se configura en CSS con un bloque @theme. Los espacios de nombres deciden qué utilidades existen: --color-* crea colores para bg-*, text-* y border-*, --spacing-* alimenta padding y margin, --radius-* alimenta rounded-* y --text-* define tamaños de letra.
@import "tailwindcss";
@theme {
--color-brand-500: #8B6CF0;
--color-action-primary: #8B6CF0;
--spacing-md: 16px;
--radius-pill: 999px;
}5. Modos claro y oscuro
Genera un bloque CSS por modo y cambia con un atributo: :root para claro y [data-theme="dark"] para oscuro. Como los componentes usan nombres semánticos (surface, text), nada más cambia.
Mantenlo sincronizado
Trata el archivo de tokens como código: guárdalo en el repositorio, revisa los cambios en pull requests y regenera las salidas en CI. El equipo de diseño cambia las Variables, exporta, y un pull request muestra exactamente qué tokens cambiaron.