Design Tokens en la Práctica — De Figma a Tailwind

El Problema de Copiar y Pegar Códigos Hexadecimales

Todo desarrollador ha pasado por esto. Un diseñador te entrega un archivo de Figma con #1A1B2E para el fondo, #E2E3F0 para el texto y #7C5CFC para el acento. Los codificas directamente en tus componentes. Dos semanas después, el diseñador ajusta el acento a #6D4FE8 y tú estás buscando en 47 archivos.

Los design tokens resuelven esto creando un vocabulario compartido entre diseño y código. En lugar de códigos hexadecimales dispersos por todas partes, tienes valores con nombre que fluyen desde una única fuente de verdad hacia cada superficie que los necesita.

¿Qué Son Realmente los Design Tokens?

Un design token es simplemente un valor con nombre. Eso es todo. No se requiere herramienta especial. El poder viene de la convención de nombres y la estrategia de propagación.

Aquí tienes un conjunto mínimo de tokens:

css

:root {
  /* Primitivos — valores crudos, nunca referenciados directamente en componentes */
  --color-slate-950: #0a0b14;
  --color-slate-100: #e2e3f0;
  --color-violet-500: #7c5cfc;

  /* Semánticos — qué significa el color, referenciados en componentes */
  --color-bg: var(--color-slate-950);
  --color-text: var(--color-slate-100);
  --color-accent: var(--color-violet-500);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-glass: rgba(255, 255, 255, 0.03);
}

El enfoque de dos capas es clave. Los primitivos son la paleta cruda. Los semánticos mapean intención a paleta. Cuando el diseñador cambia el color de acento, actualizas un primitivo. Cuando quieres un tema claro/oscuro, intercambias las asignaciones semánticas.

Conectando Tokens con Tailwind

Tailwind CSS lo hace sencillo con theme.extend en tu configuración:

javascript

export default {
  theme: {
    extend: {
      colors: {
        bg: 'var(--color-bg)',
        text: 'var(--color-text)',
        accent: 'var(--color-accent)',
        border: 'var(--color-border)',
        glass: 'var(--color-glass)',
      }
    }
  }
};

Ahora tus componentes usan nombres de clase semánticos:

html

<div class="bg-glass border border-border rounded-xl">
  <h2 class="text-text">Título de Sección</h2>
  <a class="text-accent hover:text-text">Saber más</a>
</div>

Sin códigos hexadecimales en componentes. Sin números mágicos. Los nombres de clase describen intención, no implementación.

Tokens de Tipografía

Los colores se llevan toda la atención, pero los tokens de tipografía previenen igual cantidad de inconsistencias:

css

:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-h1: clamp(2.5rem, 5vw, 4rem);
  --font-size-h2: clamp(1.75rem, 3vw, 2.5rem);
  --font-size-h3: clamp(1.25rem, 2vw, 1.75rem);
}

Las funciones clamp() para los encabezados te dan tipografía fluida que escala suavemente entre móvil y escritorio — sin necesidad de media queries.

Espaciado y Radio de Borde

La consistencia en el espaciado es lo que separa una interfaz pulida de una interfaz donde “algo se ve mal pero no puedo explicar qué”:

css

:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
}

Con Tailwind, estos se mapean directamente a clases de utilidad. Tu rounded-xl siempre significa lo mismo en todas partes.

El Flujo de Trabajo que Funciona

Así es como mantenemos los tokens sincronizados entre Figma y código:

El diseñador define tokens en Figma usando variables (función nativa de Figma desde 2023)
Exportar como JSON usando la API de Variables de Figma o un plugin como Tokens Studio
Transformar JSON → propiedades CSS personalizadas con un script de compilación simple
La configuración de Tailwind referencia las variables CSS — sin sincronización manual necesaria

Cuando el diseñador actualiza un token en Figma, el cambio fluye a través del pipeline y aterriza en el código base. Sin mensajes de Slack preguntando “¿cuál es el nuevo color de acento?”

Empieza Pequeño

No necesitas 200 tokens el primer día. Empieza con:

5-7 colores (bg, text, accent, border, muted, glass, error)
2 familias tipográficas (sans, mono)
3-5 tamaños de fuente
Una escala de espaciado
2-3 radios de borde

Eso cubre el 90% de lo que necesitarás. Añade tokens conforme surjan puntos de dolor, no preventivamente.

¿Necesitas ayuda construyendo un sistema de diseño que escale? Hablemos sobre cómo llevar consistencia a tu producto.