DESARROLLO Y DISEÑO
Ideación, curación de contenidos, Diseño UX/UI. Curso web para aprender tokens de diseño de principio a fin: de las variables de Figma al formato DTCG y a CSS con Tailwind.
Diseñado en Figma con variables en colecciones y modos, exportadas en formato DTCG y transformadas con Terrazzo en variables CSS y en el tema de Tailwind CSS v4. Desarrollado en Next.js y TypeScript, con el contenido en MDX para escribir y versionar las lecciones como archivos, sin depender de un CMS. next-intl para preparar la web en dos idiomas y Vercel para el despliegue.
Aprender tokens de diseño obliga a juntar piezas sueltas: la documentación de Figma, la especificación DTCG y la de Tailwind explican cada una su parte, pero ninguna el recorrido completo. El diseñador acaba creando variables sin saber qué pasa con ellas cuando llegan a código.
El problema lo encontré estudiando. Después de años trabajando con sistemas de diseño, me propuse aprender tokens desde cero y con método: de las variables de Figma al formato DTCG y al código. Cada fuente resolvía un tramo y dejaba el resto en el aire. Los tutoriales se quedaban en Figma o empezaban directamente en código, muchos usaban convenciones anteriores al estándar y pocos citaban de dónde salía lo que afirmaban. Ahí vi la oportunidad: convertir ese estudio en un curso ordenado, verificado en fuentes oficiales y construido con el mismo sistema que enseña. Sin ese recorrido completo, los equipos acaban con nombres incoherentes, capas mezcladas y modos que no escalan, y el traspaso entre diseño y desarrollo depende de que alguien lo explique cada vez.
Un proceso en tres frentes que avanzan en paralelo: contenido, diseño en Figma y desarrollo. Cada módulo sigue el mismo ciclo: investigar en fuentes oficiales, aprobar un índice, redactar y verificar en Figma y en código antes de darlo por cerrado.
El flujo más crítico era el paso de Figma al código. Es el punto donde un curso para diseñadores corre más riesgo de perder al alumno: hasta ahí trabaja en un terreno conocido y, de repente, aparecen archivos JSON, variables CSS y configuración de Tailwind. La solución fue no separar el código en un curso aparte, sino integrarlo sin que estorbe. El texto principal sigue centrado en Figma, el código vive en bloques plegables y el sidebar agrupa los módulos para señalar dónde empieza la parte técnica. El alumno sabe en todo momento en qué terreno está y decide hasta dónde quiere llegar.
La primera alternativa fue un curso más amplio: tokens, componentes en React y su conexión con herramientas de IA, siguiendo mi propio plan de aprendizaje. Lo descarté porque diluía el foco. Un curso que promete demasiado acaba cubriendo cada tema a medias, y la parte de IA cambia tan rápido que no se podía verificar con el rigor que exige el resto del contenido. La segunda alternativa fue prometer que los ejercicios reproducían exactamente el sistema de la web. La descarté al revisar el recorrido completo: cada alumno construye su propio sistema sobre su propio diseño, así que esa promesa no era cierta. La solución fue un curso sobre tokens y nada más, con ejercicios que aplican el mismo método a un sistema propio y una web que sirve de referencia real, no de plantilla a copiar.
La web usa el mismo sistema de tokens que enseña, y el archivo de Figma refleja siempre el código implementado. Esa decisión convierte la propia interfaz en material del curso: cada color, espaciado o modo que el alumno ve en pantalla es un ejemplo real de lo que está aprendiendo.
La interfaz del curso está construida con el mismo sistema de tokens que enseña: primitivos, semánticos y modos. El archivo de Figma refleja siempre el código implementado, no al revés. Así el alumno no aprende sobre un ejemplo inventado, sino sobre un sistema en producción que puede inspeccionar, y cada cambio en el diseño pasa por el mismo flujo que explica el curso.
El texto principal de cada lección está centrado en Figma. El código vive en bloques plegables que el alumno abre si quiere profundizar. El sidebar agrupa los módulos en tres bloques para señalar dónde empieza la parte técnica. Un solo curso sirve al diseñador que se queda en Figma y al que quiere llegar hasta Tailwind, sin duplicar contenido.
Todas las lecciones siguen el mismo esquema y cierran con dos bloques fijos: lo que te llevas, tres ideas clave con un tratamiento visual propio, y las fuentes oficiales que respaldan el contenido. La repetición reduce la carga cognitiva: el alumno sabe dónde encontrar el resumen y dónde comprobar cada afirmación.
Los dos modos salen de la misma colección semántica, y cada combinación se comprueba contra WCAG 2.2. Al verificar el foco, el fondo translúcido de la cabecera no alcanzaba el contraste necesario en modo claro. La corrección fue subir su opacidad solo en ese modo, un cambio de un token que se propagó a toda la web sin tocar ningún componente.