Saltar al contenido

Relaciones

La capa de componente

Qué es un token de componente, cuándo se justifica, cuánto cuesta y por qué DesignToken101 no tiene ninguno en su primera versión. Cómo añadir uno sin romper lo que ya existe.

Última revisión:

Ya conoces las dos capas que usa DesignToken101. La tercera, la de componente, aparece en muchos sistemas y en el curso de Figma, pero esta web no la tiene. En esta lección verás qué es un token de componente, qué criterio usamos para decidir si hace falta y cómo se añadiría uno si un día se justifica.

En esta página

Qué es un token de componente

Un token de componente dice en qué componente se usa una decisión. Apunta a un semántico, no a un primitivo. El curso de Figma pone este ejemplo (Figma: Update 1, Tokens, variables, and styles):

button-primary-background-default  →  surface/brand-contrast  →  pink/400

Lo que dice el curso sobre esta capa:

  • Se aplica al diseño, igual que los semánticos.
  • No todos los sistemas la necesitan. Es una capa detallada y más habitual en sistemas grandes, de empresa.

Cuándo se justifica

La especificación DTCG no habla de capas, y el curso de Figma no da un criterio para decidir. Este es el nuestro.

Recomendación

En DesignToken101, un token de componente se justifica en dos casos:

  1. El componente se aparta del semántico. Su valor no es el de ningún semántico existente, y tampoco es un uso general que merezca un semántico nuevo.
  2. El componente tiene que poder cambiar por separado. Hay una razón previsible para cambiarlo sin tocar el resto de usos del semántico.

Si no se da ninguno de los dos, el componente usa el semántico directamente.

Un ejemplo del segundo caso: una biblioteca que usan varias marcas, donde cada una puede cambiar el botón principal sin cambiar los demás elementos de acento. Ahí un token button/primary/background evita que una marca altere, sin querer, los enlaces o los mensajes de éxito.

Lo que cuesta

Cada token de componente es una variable más que nombrar, documentar y mantener. Y se multiplican: un componente con tres propiedades de color y tres estados ya son nueve tokens, y eso en un solo componente.

Además, con tokens de componente, una decisión puede estar en dos sitios. Si alguien cambia color/background/accent/strong/default y el botón no cambia, hay que saber que el botón tiene su propio token, y cuál.

Por qué DesignToken101 no la tiene

Ningún componente de la primera versión cumple los dos casos:

  • El botón principal usa color/background/accent/strong/{default,hover,active} y color/text/on-accent. Los comparte con el enlace para saltar al contenido (SkipLink), y nada pide hoy que uno cambie sin el otro.
  • El Callout de recomendación necesitó un borde con el color del acento, y no había token. Se creó un semántico, color/border/accent/default, y no un token de componente, porque un borde de acento es un uso general que otros componentes pueden necesitar (Semánticos de color).
  • Una sola marca, un solo producto. No hay un segundo tema que cambie un componente por separado.

Recomendación

DesignToken101 añadirá la capa de componente cuando un componente lo justifique, no antes. Es el criterio de toda la web: un sistema tan grande como lo que resuelve. Añadir tokens por adelantado lleva a errores difíciles de deshacer; añadirlos cuando hacen falta cuesta poco, como verás ahora.

Cómo se añadiría

Si un componente lo justifica, el cambio no rompe nada:

  1. Creas el token de componente como alias del semántico que el componente ya usa. El valor no cambia.
  2. Cambias el componente para que aplique el token nuevo.
  3. A partir de ahí, puedes cambiar el alias del token de componente sin tocar el semántico.

La cadena queda en dos saltos, componente → semántico → primitivo, el máximo que permite DesignToken101 (Las capas). Un token de componente nunca apunta directamente a un primitivo: si lo hiciera, el componente dejaría de seguir los cambios de su semántico.

Aplicarás los dos criterios a un componente tuyo en el ejercicio del módulo 9.

En Figma, un token de componente es una variable más, con su alias. Cómo nombrarla lo verás en el módulo Nombrar: el curso de Figma propone un patrón con el componente al principio, y DesignToken101 lo adopta de forma provisional (Los tokens de componente).

Lo que te llevas

  • Un token de componente dice en qué componente se usa una decisión y apunta a un semántico.
  • Se justifica si el componente se aparta del semántico o tiene que cambiar por separado.
  • DesignToken101 no tiene ninguno: se añadirán cuando un componente los necesite.

Fuentes