Qué es DTCG

DTCG son las siglas de Design Tokens Community Group, un grupo comunitario del W3C. También se usa "DTCG" para referirse a la especificación que publica: un formato de archivo para que distintas herramientas puedan leer y escribir los mismos tokens.

En esta página

• El problema que resuelve
• Qué define la especificación
• Un token en formato DTCG
• Estado actual
• DTCG en Figma
• Cómo lo usamos en DesignToken101
• Lo que te llevas

El problema que resuelve

La especificación nombra tres tipos de herramientas que trabajan con tokens (Format Module: Terminology):

Cada herramienta tenía su propio formato. El objetivo de DTCG es mejorar la interoperabilidad entre ellas definiendo un formato estándar para los datos de tokens, de modo que los equipos no tengan que escribir su propio código de conexión (Format Module: Introduction).

Qué define la especificación

La versión actual, 2025.10, se divide en módulos:

• Format Module: la estructura del archivo. Qué es un token, un grupo, un alias y los tipos de valor.
• Color Module: cómo se representa un color (espacio de color y componentes).
• Resolver Module: cómo trabajar con tokens en varios contextos, como modo claro y modo oscuro.

Conceptos clave del Format Module:

• Token: información asociada a un nombre legible; como mínimo, un par nombre/valor.
• Tipo ($type): la categoría del valor, para que las herramientas sepan tratarlo.
• Grupo: un conjunto de tokens para organizarlos. La especificación dice que los grupos son arbitrarios y que las herramientas no deben deducir de ellos el tipo ni el propósito de un token.
• Alias (o referencia): un token cuyo valor es otro token.
• Token compuesto: un token cuyo valor tiene varias partes con nombre, como una sombra o un estilo tipográfico.

Fuente: Format Module: Terminology.

Los tipos simples que define son color, dimension, fontFamily, fontWeight, duration, cubicBezier y number. Los compuestos son strokeStyle, border, transition, shadow, gradient y typography (Format Module: Types).

Un token en formato DTCG

Un archivo DTCG es un archivo JSON. Las propiedades de la especificación empiezan por $. Este ejemplo define un color primitivo y un token semántico que apunta a él:

{
  "color": {
    "blue": {
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.145, 0.388, 0.922],
          "hex": "#2563eb"
        }
      }
    },
    "action": {
      "primary": {
        "$type": "color",
        "$value": "{color.blue.500}"
      }
    }
  }
}

• color.blue.500 tiene un valor explícito: un objeto con espacio de color y componentes.
• color.action.primary es un alias: su valor es el nombre completo de otro token entre llaves. Las llaves solo pueden apuntar a tokens completos, no a grupos (Format Module: Curly brace syntax).

Algunas reglas que afectan a cómo nombrarás tus tokens (Format Module: Character restrictions):

• Los nombres no pueden empezar por $.
• Los nombres no pueden contener {, } ni ..
• Los nombres distinguen mayúsculas y minúsculas, pero la especificación advierte que dos nombres que solo se diferencian en eso pueden producir duplicados al convertirlos a código.

La especificación recomienda las extensiones .tokens o .tokens.json (Format Module: File extensions).

Estado actual

• Versión: 2025.10, publicada el 28 de octubre de 2025 como Final Community Group Report.
• No es un estándar del W3C ni está en el proceso de estándares del W3C. Lo publica un grupo comunitario.
• Es estable. El documento dice que se considera estable y que las actualizaciones llegarán en especificaciones nuevas que la sustituyan.

Fuente: Format Module: Status of this document.

DTCG en Figma

Figma importa y exporta variables en formato DTCG (Figma: Modes for variables):

• Exportar un modo: vista Variables → clic derecho sobre el modo → Export mode.
• Exportar todos los modos de una colección: clic derecho sobre la colección → Export modes.
• Importar: crear una colección nueva y arrastrar uno o varios archivos JSON a la vista Variables. Cada archivo crea un modo.

Hay restricciones de importación que conviene conocer desde el principio:

Además, Figma convierte los puntos de los grupos en barras (color.accent.light pasa a color/accent/light) y, si dos tokens acaban con el mismo nombre, solo importa el primero (misma fuente).

Al exportar, Figma no deshace esas conversiones: los tamaños salen como number sin unidad y la familia tipográfica como string. Además, los alias salen con el valor ya resuelto. Lo explicamos en Figma exporta casi DTCG.

Cómo lo usamos en DesignToken101

DTCG es el punto intermedio entre Figma y el código. Exportamos las variables de Figma, las normalizamos a DTCG estricto y una herramienta de traducción las convierte en variables CSS. Lo verás completo en Cómo encajan Figma, DTCG y Tailwind.

Fuentes

• Design Tokens Format Module 2025.10
• Design Tokens Color Module 2025.10
• Design Tokens Resolver Module 2025.10
• Figma: Modes for variables