Saltar al contenido

Tokens

Tokens para agentes

Por qué un agente necesita tokens con nombre y no valores sueltos, qué recorrido hace un token de Figma al código y qué parte de ese recorrido explica DesignToken101.

Última revisión:

Un token es una decisión de diseño con nombre. Para un agente, la diferencia entre #1C64D9 y color.action.primary es la diferencia entre copiar un color y entender para qué sirve. Este capítulo trata lo que el agente necesita de tus tokens; cómo se construye el sistema completo lo explica DesignToken101.

En esta página

Del valor a la decisión

La especificación DTCG define un token como información asociada a un nombre legible por personas, y presenta los tokens como una forma de compartir decisiones de diseño entre herramientas y tecnologías (Format Module: Introduction).

La guía de Figma para el servidor MCP pide usar variables para el espaciado, el color, el radio y la tipografía, para que el agente haga referencia a tus tokens en lugar de copiar valores (Figma: Structure your Figma file for better code). La herramienta get_variable_defs devuelve las variables y estilos de una selección (Figma: Tools and prompts).

Un agente que recibe un valor suelto puede reproducir el diseño. Uno que recibe un token puede, además, mantenerlo: si cambia la marca o el modo, el código generado sigue funcionando.

El recorrido de un token

  1. Variable de Figma, color/action/primary
  2. Exportación DTCG, JSON estándar, con $description
  3. Transformación, Terrazzo o Style Dictionary
  4. Variable CSS, --ds-color-action-primary
  5. Código del agente, Usa la variable, no el valor
El recorrido de un token, de Figma al código que genera un agente.

DesignToken101 explica cada paso: qué exporta Figma (Qué sale de Figma), cómo completar la exportación (Completar la exportación) y cómo generar las variables CSS (Las variables CSS).

Nota

Las herramientas todavía se están adaptando a la versión estable de DTCG, la 2025.10. La documentación de Style Dictionary dice que su soporte de 2025.10 no está completo y que es un trabajo en curso en su versión 5 (Style Dictionary: DTCG). DesignToken101 usa Terrazzo con una normalización propia delante (DesignToken101: Completar la exportación).

Lo que este capítulo añade

Para un agente, un sistema de tokens bien construido necesita dos cosas más:

  1. Una regla de uso clara: qué capa de tokens puede usar y cuál no. Lo vemos en Primero los semánticos.
  2. La intención escrita en cada token: para qué sirve y para qué no. Lo vemos en Descripciones en DTCG.

Si tu sistema todavía no tiene tokens, empieza por DesignToken101 y vuelve aquí.

En resumen

  • Un token da al agente el nombre y la intención, no solo el valor.
  • El recorrido de Figma al código lo explica DesignToken101 paso a paso.
  • Para un agente faltan dos cosas: una regla de capas y una descripción en cada token semántico.

Fuentes