Saltar al contenido

Relaciones

Las capas

Primitivos, semánticos y tokens de componente. Qué dice la especificación, cómo los presenta Figma, cómo se resuelve un token de capa en capa y qué capas usa DesignToken101.

Última revisión:

Con los alias puedes encadenar tokens. La pregunta siguiente es cómo ordenarlos: qué tokens apuntan a cuáles. La respuesta habitual son las capas: primitivos, semánticos y, a veces, tokens de componente. En esta lección verás de dónde sale ese modelo, cómo se resuelve un token de una capa a otra y qué capas usa DesignToken101.

En esta página

Las capas son una convención

La especificación DTCG no define capas. Define tokens, grupos y referencias, y dice que los grupos son arbitrarios: las herramientas no deben deducir de ellos el tipo ni el propósito de un token (Format Module: Groups).

Para DTCG, un primitivo y un semántico son lo mismo: un token. Uno tiene un valor y el otro, una referencia. La diferencia de capa la pone el sistema de diseño, con la forma de nombrar y con quién apunta a quién.

Tres capas

Figma presenta el modelo en tres capas en su curso sobre sistemas de diseño (Figma: Update 1, Tokens, variables, and styles):

CapaQué diceEjemplo del curso de Figma
PrimitivoQué valores existenUn color de la paleta, como pink/400
SemánticoCómo y dónde se aplica una decisiónsurface/brand-contrast, que apunta a un primitivo
De componenteEn qué componente concreto se usabutton-primary-background-default, que apunta a un semántico

Lo que dice el curso de cada capa:

  • Los primitivos sirven de referencia. Existen para que otros tokens apunten a ellos, no para aplicarlos al diseño.
  • Los semánticos añaden el contexto. En surface/brand-contrast, cada palabra dice algo: es una superficie, es de la marca y busca contraste.
  • Los tokens de componente no son para todos. El curso dice que no todos los equipos los necesitan y que son más habituales en sistemas grandes, de empresa.

No todos los sistemas usan las tres. El Simple Design System (SDS) de Figma tiene dos: su archivo de tokens solo contiene primitivos y semánticos. Por ejemplo, --sds-color-text-danger-default apunta a --sds-color-red-700 (SDS: theme.css).

Cómo se resuelve un token

Cuando diseñas, aplicas el token de la capa más alta que tenga tu sistema. La herramienta sigue los alias hacia abajo hasta llegar a un valor. Este es el recorrido del color de los enlaces de DesignToken101, con una capa de componente de ejemplo encima:

  1. Componente, link/text · Ejemplo, no existe en DesignToken101
  2. Semántico, color/text/accent/default
  3. Primitivo, color/emerald/700 · Oculto al publicar
  4. Valor, #1A7D5C en el modo Light
Cómo se resuelve el color de los enlaces, de la capa de componente al valor. La capa de componente es un ejemplo: DesignToken101 no la tiene.
  1. Componente. Un token como link/text diría "el texto del componente enlace". DesignToken101 no lo tiene: el enlace usa directamente el semántico. Cuándo tendría sentido lo verás en La capa de componente.
  2. Semántico. color/text/accent/default es el texto con el color de acento. Lo usan los enlaces, y también el icono y la etiqueta del Callout de recomendación.
  3. Primitivo. color/emerald/700, un paso de la escala del acento. Está oculto al publicar, así que nadie lo aplica directamente (La colección completa).
  4. Valor. #1A7D5C. En el modo Dark, el mismo semántico apunta a otro primitivo, color/emerald/400: el nombre que aplicas no cambia, cambia el destino del alias.

Por qué no aplicar los primitivos

Podrías aplicar color/emerald/700 directamente al texto de los enlaces. Funcionaría hasta el primer cambio:

  • Al cambiar de tema. En el modo Dark, el enlace necesita emerald/400. Si el diseño usa el primitivo, tienes que cambiar cada enlace. Si usa el semántico, cambias un alias.
  • Al cambiar una decisión. Si decides que los enlaces sean más oscuros, cambias el destino de color/text/accent/default. Los demás usos de emerald/700, como el texto de un mensaje de éxito, no se mueven.
  • Al leer el diseño. color/text/accent/default dice dónde se usa. color/emerald/700 dice qué color es, y nada más.

Nota

En DesignToken101 hay primitivos que sí se aplican directamente: el espaciado y el grosor de borde, porque no tienen tokens semánticos. Lo viste en Espaciado. La regla de esta lección vale para las categorías que tienen capa semántica: color, tamaños y tipografía. El radio está a medio camino: los componentes usan sus semánticos, pero los primitivos siguen visibles por si un diseño necesita otro paso de la escala (La colección completa).

Las capas de DesignToken101

Recomendación

DesignToken101 usa dos capas, primitivos y semánticos, y añadiría tokens de componente solo cuando un componente los justifique. En la primera versión, ningún componente los necesita. Es el criterio de toda la web: un sistema tan grande como lo que resuelve.

Tres reglas acompañan a esa decisión. Son nuestras, no de DTCG ni de Figma:

  1. Los semánticos son siempre alias de un primitivo, nunca un valor directo. Hay cuatro excepciones, y cada una tiene un motivo: las verás en Cuando un semántico no es alias.
  2. Como máximo, dos saltos: componente → semántico → primitivo. Si algún día hay tokens de componente, apuntarán a un semántico, no a un primitivo.
  3. Los primitivos de color se ocultan al publicar. Quien diseña con la biblioteca ve los semánticos, no los primitivos.

En las lecciones siguientes verás la capa semántica completa: color, estados, tamaño y radio y estilos de texto.

Lo que te llevas

  • Las capas son una convención: primitivo (qué valor), semántico (para qué) y componente (en qué componente).
  • Al diseñar se aplican los semánticos, no los primitivos.
  • DesignToken101 usa dos capas, primitivos y semánticos, con un máximo de dos saltos.

Fuentes