Lo que enseñamos

El curso va de lo simple a lo complejo: primero qué es un token, después cómo organizarlos y nombrarlos, y al final cómo llegan al código. Cada módulo termina con algo concreto añadido a tu sistema.

En esta página

• Cómo está organizado
• Temario
• Qué tendrás al terminar
• Qué no enseñamos
• Lo que te llevas

Cómo está organizado

El curso avanza en cuatro fases: planificar, crear en Figma, llevar al código y revisar. Cada fase agrupa varios módulos y termina con un resultado concreto.

1. Planificar

   Resultado: inventario de valores

   1. Fundamentos, Módulo 1

2. Crear en Figma

   Resultado: variables y estilos

   1. Primitivos, Módulo 2
   2. Relaciones, Módulo 3
   3. Nombrar, Módulo 4
   4. Modos y temas, Módulo 5

3. Llevar al código

   Resultado: CSS y Tailwind CSS

   1. De Figma al código, Módulo 6

4. Revisar y cerrar

   Resultado: el sistema completo

   1. Accesibilidad, Módulo 7
   2. Ejercicio final, Módulo 8

5. Después

   1. Componentes y código, Módulo 9
   2. Conclusiones, Módulo 10

Los módulos que ya puedes leer llevan un enlace. El resto aparecerá enlazado a medida que se publique.

En el menú lateral, los módulos se agrupan en dos bloques. Diseñar los tokens (módulos 1 a 5) se sigue entero en Figma. Tokens en código (desde el módulo 6) trabaja también con archivos JSON, CSS y la terminal: el texto principal sigue pensado para diseñadores, pero exige más soltura técnica.

Temario

Cómo es cada lección

1. Una introducción breve.
2. La lista de apartados, con enlaces.
3. El contenido, con enlaces a las fuentes oficiales.
4. Cómo se hace en Figma, cuando la lección trata algo de Figma.
5. Bloques En código opcionales para quien implementa.

Qué tendrás al terminar

Si sigues el curso completo:

• Un archivo de Figma con colecciones de variables: primitivos (ocultos al publicar), semánticos con modos Light y Dark y, si lo necesitas, layout con modos Desktop y Mobile.
• Una convención de nombres que funciona en Figma, en DTCG y en CSS.
• Tus tokens exportados de Figma y normalizados a DTCG estricto.
• Variables CSS generadas a partir de esos archivos y un tema de Tailwind CSS v4.
• Un mapa claro de cómo se conectan todas las piezas.

Qué no enseñamos

DesignToken101 trata de tokens de diseño. No es una guía para crear sistemas de diseño ni un curso de diseño de interfaces o de Figma. En concreto, dejamos fuera:

• Cómo crear un sistema de diseño completo. Los componentes aparecen en el módulo 9 como consumidores de los tokens, no como biblioteca que diseñar, documentar o gobernar.
• Los fundamentos de Figma. Suponemos que sabes crear frames, componentes y estilos.
• Plugins de terceros para gestionar tokens. Trabajamos con las variables nativas de Figma y su exportación en DTCG.
• Fundamentos de CSS, React o Tailwind CSS. Los bloques En código explican lo necesario para los tokens, no el lenguaje.
• Diseño visual. No te decimos qué colores o tipografías elegir, sino cómo organizarlos y nombrarlos.

Lo que te llevas

• El curso tiene cuatro fases: planificar, crear en Figma, llevar al código, y revisar y cerrar.
• Cada módulo termina con un ejercicio que prepara el siguiente.
• Al terminar tendrás un sistema de tokens completo en Figma y, si quieres, en código.

Fuentes

• WCAG 2.2 (W3C)
• El resto de fuentes están en cada lección y en Fuentes consultadas.