Arquitectura de tokens de diseño semántico: tokens globales, semánticos y de componentes
Cómo estructurar tokens de diseño en tres niveles, admitir temas y múltiples marcas, y enviarlos a la web, iOS y Android utilizando el formato W3C DTCG.
Idea clave
La mayoría de los sistemas de diseño maduros utilizan tres niveles de tokens: global (valores brutos como azul-600), semántico (propósito, como color.action.primary) y componente (usos específicos, como botón.fondo). Los componentes hacen referencia a tokens semánticos, los tokens semánticos hacen referencia a los globales y los temas o marcas intercambian solo la capa semántica. Guárdelos en el formato W3C DTCG y genere código de plataforma con una herramienta de compilación.
Los tres niveles
Material Design describe tres clases de tokens: referencia, sistema y componente. Muchos equipos los llaman globales, semánticos y componentes. Los nombres difieren, pero la idea es la misma: separar los valores brutos de las decisiones sobre cómo se utilizan.
- Global (referencia): cada valor sin procesar en el sistema, como azul-600, espacio-4, tamaño de fuente-16, primavera-suave.
- Semántica (sistema): para qué sirve un valor, como color.text.primary, color.action.primary, motion.enter.
- Componente: cómo un componente utiliza el sistema, como por ejemplo button.background o dialog.motion.open.
Por qué son importantes los tokens semánticos
Si un botón usa blue-600 directamente, cada cambio de tema significa editar cada componente. Si usa color.action.primary, modo oscuro, alto contraste o una nueva marca, solo cambie lo que color.action.primary apunta. Material señala que los tokens permiten aplicar una paleta de alto contraste o cambiar la escala de tipos en todo el sistema exactamente de esta manera.
Temas y múltiples marcas.
Para productos multimarca o de marca blanca, mantenga un conjunto de tokens semánticos y de componentes y una paleta global por marca. Cada tema es un mapeo de tokens semánticos a valores globales. La primera versión estable de la especificación W3C Design Tokens (2025.10), lanzada en octubre de 2025, agregó soporte temático y multimarca, espacios de color modernos como Display P3 y OKLCH, y alias y referencias a nivel de componentes.
Los tokens de movimiento también pertenecen aquí
Las duraciones, las curvas de relajación y los resortes siguen los mismos niveles. Una ficha global podría ser suave con su rigidez y amortiguación; un movimiento simbólico simbólico. enter apunta a él; un componente token leaf.motion.open apunta a motion.enter. Agregue un tema de movimiento reducido que reasigna los tokens de movimiento a desvanecimientos cortos.
Envío de tokens a todas las plataformas
Mantenga los tokens en un repositorio como DTCG JSON, la única fuente de verdad. Una herramienta de compilación como Style Dictionary los transforma en variables CSS, Swift, Kotlin, Flutter u otros formatos. Las herramientas de diseño que leen el mismo formato pueden permanecer sincronizadas y las herramientas de codificación de IA pueden leer el JSON directamente.
- Fuente de la verdad: DTCG JSON en Git, revisado como código
- Construir: transformar a cada plataforma en cada cambio
- Sincronización de herramientas de diseño: importación o complemento, valores nunca copiados a mano
- Linting: prohibir valores brutos en los componentes
Principios clave para recordar
- Tres niveles: global (valores), semántico (propósito), componente (uso)
- Los componentes hacen referencia a tokens semánticos, nunca a valores sin procesar.
- Los temas y las marcas reasignan la capa semántica
- El formato W3C DTCG alcanzó su primera versión estable (2025.10) en octubre de 2025
- Incluye fichas de movimiento y un tema de movimiento reducido.
Preguntas frecuentes
Fuentes
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — Grupo comunitario de tokens de diseño del W3C
- Design Tokens Community Group — designtokens.org
- Style Dictionary — diccionariodeestilo.com