Resumen del curso

Has recorrido el trabajo con tokens de principio a fin: de un inventario de valores sueltos a un sistema documentado, versionado y consumido por un componente. Esta página reúne lo esencial de cada fase, con un enlace a la lección donde se explica, para que puedas volver a cualquier punto sin releer el curso entero.

En esta página

• Planificar
• Crear en Figma
• Llevar al código
• Revisar y cerrar
• Los componentes
• Lo que has construido
• Lo que te llevas

Planificar

El módulo Fundamentos te dio el vocabulario de todo lo demás.

• Un valor suelto pierde la intención con la que se eligió. Un token es una decisión de diseño con nombre: nombre, valor y tipo (Qué es un token).
• Los tipos de DTCG y las variables de Figma no coinciden uno a uno. Por eso el peso es una variable Number, y el interlineado y el movimiento viven en código (Tipos simples).
• Figma no tiene variables compuestas: los estilos de texto son estilos con variables dentro, y no se exportan en DTCG (Tipos compuestos y estilos).
• Cada token tiene una única fuente. Si cambia de sitio, se mueve, no se copia (Una sola fuente de verdad).

El ejercicio terminó con un inventario de los valores sueltos de tu diseño: la materia prima de tus primitivos.

Crear en Figma

Cuatro módulos convirtieron ese inventario en variables y estilos.

Primitivos. Un primitivo dice qué valor es; un semántico, para qué se usa.

• En el espaciado y el radio, el número del paso es proporcional al valor: space/400 mide 16 px (Espaciado). La excepción es radius/full, para píldoras y círculos (Radio y grosor de borde).
• Las escalas de color se construyen en oklch, se guardan en sRGB y su contraste se mide sobre el hex guardado (Espacio de color).
• Las paletas se nombran por su tono, nunca por su rol, y el color de marca va exacto en su paso (Escalas de color).

Relaciones. Un alias es un token cuyo valor es otro token, y conservar la referencia hace que un cambio llegue a todos los que apuntan a él.

• Al diseñar se aplican los semánticos, no los primitivos (Las capas).
• Un semántico nombra una función, no un elemento, y cada modo puede apuntar a un primitivo distinto (Semánticos de color).
• Cada estado que cambia un color es un token, y si nada se desactiva no hay tokens de disabled (Estados).
• Un token de componente se justifica únicamente si el componente se aparta del semántico o tiene que cambiar por separado (La capa de componente).

Nombrar. DTCG no da significado a los nombres: lo da una convención escrita.

• Los semánticos de color siguen categoría / propiedad / rol / énfasis / estado, con los niveles necesarios y ninguno más (La convención de DesignToken101).
• Un token con estados lleva /default, porque en DTCG un token no puede ser también un grupo (Estados en el nombre).
• El mismo nombre se escribe con / en Figma, con puntos en DTCG y con guiones en CSS (Un nombre en Figma, DTCG y CSS).

Modos y temas. Un modo es una columna de valores: cada variable tiene un valor en cada modo.

• Cada colección responde a un eje de cambio; en DesignToken101, el tema y el ancho de pantalla (Un eje por colección).
• La columna Dark se decide alias a alias, por función y por contraste (Light y Dark).
• El modo se elige en el marco, no en el componente principal, porque sus instancias lo heredarían estén donde estén (Aplicar los modos al diseño).

Llevar al código

El módulo De Figma al código llevó el sistema de Figma a variables CSS y a un tema de Tailwind CSS.

• Figma exporta casi DTCG: un archivo por modo, con los alias resueltos y su destino aparte (Qué sale de Figma).
• Antes de generar el CSS, un paso de normalización recupera las referencias, deduce el tipo del scope, añade las unidades y se detiene ante lo que no conoce (Completar la exportación).
• Los tokens que Figma no guarda como los necesita el código viven en un archivo DTCG escrito a mano (Los tokens de código).
• Cada token es una variable CSS con el mismo nombre que su code syntax; cada modo, un bloque con todos los tokens de su colección (Las variables CSS).
• La capa de Tailwind CSS apunta a esas variables, sin el tema por defecto (El tema de Tailwind CSS).
• Un cambio en Figma llega al código en un ciclo: exportar, sustituir, generar, comprobar y revisar (Comprobar y actualizar).

Revisar y cerrar

Accesibilidad. DesignToken101 apunta al nivel AA de WCAG 2.2, y diez de sus criterios dependen de valores que viven en los tokens.

• El contraste es de un par de colores, y se comprueba con el hex de cada modo (Contraste de texto).
• Lo que identifica un control o su estado necesita 3:1 frente a lo que lo rodea (Contraste de lo que no es texto).
• El color nunca es la única señal: necesita una forma, un texto, un icono o una diferencia de luminosidad (El color no basta).
• Una preferencia de la persona, como reducir el movimiento, no cambia el valor del token, sino si se aplica (Movimiento y transparencia).

Ejercicio final. Cerrar un sistema es documentarlo, comprobarlo entero y darle versión.

• La descripción de cada token dice para qué sirve; el registro de decisiones, por qué el sistema es así (Documentar el sistema).
• La API pública de un sistema de tokens son sus nombres: cambiar un valor es PATCH, añadir es MINOR, y borrar o renombrar es MAJOR (Versionar el sistema).
• Al final se comprueba lo que se ve únicamente con el sistema entero: que cada token tiene un uso y que cada valor del diseño tiene token (La comprobación final).

Los componentes

El módulo Componentes y código usó el sistema terminado.

• Un componente no crea tokens: los consume, y es la prueba de que al sistema no le falta ninguno.
• La tabla de anatomía, una fila por parte y una columna por estado, es el contrato entre Figma y el código (La tabla de anatomía).
• Un estado de interacción es una variante en Figma y una pseudoclase en código, no un prop (Estados).
• El componente decide lo que los tokens no pueden: el elemento HTML, el nombre accesible y los estados que anuncia ARIA (La accesibilidad del componente).

Lo que has construido

Si has hecho los ejercicios, tu sistema tiene la misma estructura, el mismo método y la misma convención que el de esta web, con los valores de tu diseño:

Lo que te llevas

• El curso recorre cuatro fases (planificar, crear en Figma, llevar al código, y revisar y cerrar) y después usa el sistema en un componente.
• Cada fase se apoya en la anterior: el inventario da los primitivos, los primitivos dan los semánticos y los semánticos llegan al código con el mismo nombre.
• Al terminar tienes un sistema completo, documentado y versionado, con la estructura de esta web y los valores de tu diseño.

Fuentes

Esta página resume el curso: las fuentes de cada afirmación están en la lección enlazada y en Fuentes consultadas.