“¿Puedes cambiar el azul primario a un azul ligeramente más oscuro?” En un código base heredado, esta solicitud cuesta €5000. ¿Por qué? Porque #3b82f6 está codificado en 400 archivos CSS, 20 archivos JS y 5 plantillas HTML. En un código base moderno, esta solicitud cuesta €0. Actualiza el Design Token en Figma y se propaga a iOS, Android y la Web automáticamente.

Por qué Maison Code habla de esto

En Maison Code Paris, actuamos como la conciencia arquitectónica de nuestros clientes. A menudo heredamos stacks “modernos” construidos sin una comprensión fundamental de la escala.

Discutimos este tema porque representa un punto de inflexión crítico en la madurez de la ingeniería. Implementarlo correctamente diferencia un MVP frágil de una plataforma resistente de nivel empresarial.

¿Qué son los tokens de diseño?

Los tokens de diseño son los “átomos” del diseño visual. Son pares clave-valor independientes de la plataforma.

Heredado: color: #000000;
Token: color: var(--color-primer plano);

La jerarquía de tokens

No nos limitamos a aplanar todo. Utilizamos una jerarquía de 3 niveles para garantizar el significado semántico.

1. Fichas primitivas (globales)

Valores brutos. Nunca deben usarse directamente en la interfaz de usuario.

azul-500: #3b82f6
gris-900: #111827
espaciador-4: 16px

2. Tokens semánticos (alias): impulsados por un propósito.

color-primario: {azul-500}
color-surface: {gray-900} (Crucial para Modo oscuro)
relleno-tarjeta-espaciado: {espaciador-4}

3. Fichas de componentes (específicas)

Anulaciones basadas en el contexto.

botón-bg-primario: {color-primario}
card-bg: {color-superficie}
error-borde-de entrada: {color-destructivo}

El flujo de trabajo: Figma to Code

Tratamos a Figma como la “Fuente de la verdad” para el diseño, del mismo modo que tratamos a Git como la fuente de la verdad para el código. Usamos la función Variables en Figma combinada con el complemento “Tokens Studio”.

Paso 1: Exportar tokens

Exportamos tokens.json. Este archivo es la única fuente de verdad.

{
  "global": {
    "colores": {
       "azul": { "500": { "valor": "#3b82f6" } }
    }
  },
  "semántico": {
    "primario": { "valor": "{colors.blue.500}" },
    "en-primario": { "valor": "{colores.blanco}" }
  }
}

Paso 2: Transformaciones (Diccionario de estilos)

JSON es inútil para iOS (Swift) o Android (XML). Usamos Diccionario de estilo (de Amazon) para transformar el JSON en artefactos específicos de la plataforma. La canalización de compilación (npm run build:tokens) se ve así:

gráfico LR
    Figma[Variables Figma] -->|Complemento| JSON[tokens.json]
    JSON -->|CI/CD| SD[Diccionario de estilos]
    
    SD -->|Transformar| CSS[Variables CSS]
    SD -->|Transformar| TS[Configuración de viento de cola]
    SD -->|Transformar| Rápido[Color.rápido]
    SD -->|Transformar| XML[colores.xml]

Paso 3: Consumo en viento de cola

Para nuestro Headless Storefront (creado con Atomic Design), asignamos estos tokens a Tailwind CSS. En tailwind.config.js, no codificamos valores. Leemos los artefactos de construcción.

// viento de cola.config.js
tokens constantes = require('./build/tokens.js');

módulo.exportaciones = {
  tema: {
    colores: {
      primario: 'var(--color-primary)', // Se asigna a CSS var
      fondo: 'var(--color-fondo)',
    },
    extender: {
      borderRadius: tokens.radius,
      fontFamily: tokens.tipografía,
      espaciado: tokens.spacing
    }
  }
}

Esto significa que nunca escribimos class="bg-[#3b82f6]". Escribimos class="bg-primary". Si la marca cambia a Rojo, cambiamos el token “primario” -> “rojo-500” en Figma. Todo el sitio se actualiza instantáneamente tras la implementación.

Arquitectura del modo oscuro

El modo oscuro no se trata de “invertir colores”. Se trata de Intercambio de tokens. Definimos un mapa “claro” y un mapa “oscuro”. Comparten los mismos nombres semánticos (--color-background), pero apuntan a primitivas diferentes.

Implementación de CSS

:raíz {
  /* Predeterminado (Claro) */
  --color-fondo: var(--blanco);
  --color-text: var(--negro);
  --color-border: var(--gray-200);
}

[tema-datos="oscuro"] {
  /* Anular */
  --color-fondo: var(--negro);
  --color-text: var(--blanco);
  --color-border: var(--gray-800);
}

Debido a que Tailwind usa el Nombre Semántico, la clase bg-background funciona en ambos modos. Es blanco en modo claro y negro en modo oscuro. No se necesitan clases adicionales (dark:bg-black) en sus componentes de React. Esto reduce significativamente el tamaño del paquete.

Sistemas multimarca (Tematización)

Para las agencias que administran múltiples escaparates (por ejemplo, GAP, Old Navy, Banana Republic), Token Systems le permite reutilizar la misma base de código de React. Simplemente carga un archivo tokens.css diferente.

Brecha: primario = Azul, radio = 4px.
Old Navy: primario = Navy, radio = 8px. El código del componente <Button /> sigue siendo idéntico: <button className="bg-primary rounded-radius">. Esto es el “Etiquetado Blanco” a escala.

Fichas de tipografía

Los tokens de diseño no son sólo colores.

Tamaño: texto-xl -> 1.25rem
Peso: fuente-negrita -> 700
Altura de línea: leading-tight -> 1,25
Espaciado entre letras: todo el seguimiento -> 0,025em

Codificamos “escalas tipográficas” (tercera mayor, cuarta perfecta) en los tokens para garantizar la armonía matemática. Si configura manualmente font-size: 17px, rompe el ritmo. Los tokens hacen cumplir el sistema.

9. Visualización de tokens: el complemento Storybook

Los tokens son abstractos. Los desarrolladores necesitan verlos. Creamos un complemento de Storybook personalizado que muestra todos los tokens en vivo.

Paleta de colores: cuadrículas de muestras de colores con sus nombres de tokens.
Escala de tipografía: texto representado en cada tamaño de fuente.
Sombras: Cuadros que muestran los niveles de elevación. Esto sirve como “documentación viva”. Si un desarrollador necesita un color, no abre Figma. Abren Storybook, buscan “Primario” y copian el nombre de la clase.

10. El contexto del “proveedor de temas”

En React, ¿cómo se cambian los temas de manera eficiente? No pases accesorios. Utilice variables CSS + contexto.

const ThemeContext = createContext({ tema: 'luz', alternar: () => {} });

función de exportación ThemeProvider({ niños }) {
  const [tema, setTheme] = useState('luz');
  
  utilizarEfecto(() => {
    document.documentElement.dataset.theme = tema;
  }, [tema]);

  return <ThemeContext.Provider value={{ tema, setTheme }}>{children}</ThemeContext.Provider>;
}

Esto actualiza el atributo data-theme en la etiqueta <html>. Las variables CSS se recalculan instantáneamente. El árbol de React no se vuelve a renderizar (excepto el botón Alternar). Esto es crucial para el rendimiento.

11. Mantenimiento y Gobernanza

“Un gran poder conlleva una gran responsabilidad”. Si un diseñador junior busca cambiar el azul “primario”, podría violar el cumplimiento de accesibilidad en toda la aplicación. Implementamos CI Checks (Style Dictionary Linting) para tokens.

Comprobaciones automatizadas

Verificación de contraste: asegúrese de que el texto “principal” tenga un contraste de 4,5:1 con respecto al fondo “principal”. Si no, la construcción falla.
Convención de nomenclatura: Rechazar blue-final-v2. Hacer cumplir “blue-500”.
Tokens huérfanos: advierte si un token definido nunca se usa en la lógica de la interfaz de usuario.

12. Alias de tokens para accesibilidad

La accesibilidad no es sólo el contraste de colores. Es la preferencia del usuario. Algunos usuarios necesitan el “Modo de alto contraste”. Algunos usuarios necesitan “movimiento reducido”. Asignamos tokens a estas consultas de medios. duración del movimiento: { var(--movimiento-rápido) } @media (prefiere-movimiento-reducido) { --motion-fast: 0ms; } El movimiento tokenizado nos permite respetar el deseo del usuario de desactivar las animaciones globalmente, sin reescribir los componentes CSS.

13. Tokens móviles versus web

iOS usa puntos. Web utiliza Rem. Android usa DP. Una exportación ingenua fracasa. Usamos Transformaciones de diccionario de estilo para manejar las matemáticas. spacing.4 (16px) -> iOS 16pt -> Android 16dp. También manejamos Convenciones de nomenclatura:

Web: kebab-case (--color-primary)
iOS: camelCase (colorPrimary)
Android: snake_case (color_primary) Esto garantiza que los desarrolladores se sientan como en casa en su plataforma.

14. Conclusión

Los Design Tokens son la “API” entre Diseño e Ingeniería. Desacoplan el valor (código hexadecimal) de la intención (color primario). Para una Maison, donde las pautas de la marca son sagradas, los Design Tokens son la única forma de garantizar el 100% de fidelidad en cada punto de contacto digital. Deja de escribir CSS. Empieza a escribir Sistemas.

Contrate a nuestros arquitectos.