Saltar al contenido

Empezar aquí

Qué es DesignToken101

Un curso para aprender a planificar, crear e implementar tokens de diseño con Figma, DTCG y Tailwind CSS, paso a paso y con fuentes verificables.

Última revisión:

DesignToken101 es un curso para aprender a trabajar con tokens de diseño: desde decidir qué valores existen en tu sistema hasta verlos funcionando en código. Está pensado para diseñadores de UI y construye, lección a lección, un sistema de tokens completo.

En esta página

Qué vas a construir

Un sistema de tokens con la misma estructura y los mismos nombres en Figma y en el código. Al terminar tendrás:

  • Una colección de primitivos: los valores que existen (colores, espaciados, tipografía, radios).
  • Las colecciones de tokens semánticos: los valores que se usan y para qué. La de color tiene dos modos, Light y Dark, y la de tamaños de texto, uno para escritorio y otro para móvil.
  • Los estilos de texto, la capa semántica de la tipografía.
  • Una convención de nombres escrita en pocas reglas.
  • Los tokens exportados en formato DTCG y convertidos a variables CSS y a tema de Tailwind CSS.

Los ejercicios parten de un diseño tuyo. Tu sistema tendrá la misma estructura, el mismo método y la misma convención de nombres que el de esta web, con los valores de tu diseño. Si quieres los de DesignToken101, cada lección los da; si prefieres tomar otras decisiones, cada lección explica el porqué de las nuestras para que puedas adaptarlas.

Para quién es

  • Diseñadores de UI y UX, el público principal. Cada lección se puede seguir entera en Figma.
  • Diseñadores que también escriben código y traducen interfaces a componentes de React. Para ellos, muchas lecciones incluyen un bloque opcional En código.
  • Desarrolladores que quieran entender de dónde vienen los tokens que reciben y por qué se nombran así.

Un curso técnico para diseñadores

Aunque está pensado para diseñadores, DesignToken101 tiene bastante contenido técnico: espacios de color, el formato JSON de DTCG, cómo exporta Figma o qué hace el CSS con cada token. Lo hacemos así a propósito.

Recomendación

Creemos que una parte del proceso de diseño debe apoyarse en la lógica y en saber cómo funciona lo que diseñamos. Un diseñador que entiende por qué un color se guarda en sRGB, o por qué un interlineado no funciona como variable en Figma, toma mejores decisiones y habla el mismo idioma que quien lo implementa.

No necesitas saber programar. Cada concepto técnico se explica desde cero, y el código está en bloques opcionales.

Lo que no es

DesignToken101 se centra en los tokens de diseño. No es:

  • Una guía para crear un sistema de diseño completo (componentes, documentación, gobierno).
  • Un curso de diseño de interfaces.
  • Un curso de Figma.

Lo que queda fuera, con más detalle, está en Qué no enseñamos.

Cómo funciona el curso

  • De menos a más. Primero el concepto, después cómo se hace en Figma y, al final, cómo llega al código. Las fases del curso están en Cómo está organizado.
  • Verificable. Cada afirmación sobre Figma, la especificación DTCG o una herramienta enlaza a su documentación oficial. Puedes comprobar cualquier dato.
  • Honesto. Distinguimos siempre entre lo que dice una fuente y lo que recomendamos nosotros. Cuando algo no está verificado, lo decimos.
  • Práctico. Cada bloque de lecciones termina con un ejercicio que avanza tu sistema.

Recomendación

Esta es nuestra metodología, no la única posible. Está basada en la documentación de Figma, en la especificación DTCG y en sistemas de diseño de referencia, pero puedes tomar solo las partes que te sirvan.

Esta web es el ejemplo

El diseño de DesignToken101 usa el sistema de tokens que se construye en el curso. Los colores, espaciados y tipografías que ves en esta página, en modo claro y en modo oscuro, salen de los mismos tokens que vas a crear.

Cuando una lección hable de un token, podrás ver su efecto en la propia interfaz.

Un sistema tan grande como lo que resuelve

El sistema de tokens de esta web no intenta cubrir todo lo que podría necesitar algún día. Tiene los tokens que su diseño usa hoy, y ninguno más.

Recomendación

Creemos que un sistema de diseño, y con él sus tokens, debe ser tan extenso como lo que resuelve. Crear tokens para casos de uso que todavía no existen parece previsor, pero añade decisiones sin datos, nombres que nadie usa y valores que luego cuesta retirar. Cuando aparece un caso nuevo, se añade su token. Por ejemplo, esta web no tiene tokens para un estado deshabilitado, porque ningún control lo necesita.

Verás este criterio en todo el curso: escalas cortas, una capa de componentes solo cuando se justifica y tokens que se añaden cuando un diseño real los pide.

Lo que te llevas

  • DesignToken101 enseña a planificar, crear e implementar tokens de diseño con Figma, DTCG y, si quieres, Tailwind CSS.
  • Es un curso técnico para diseñadores: entender cómo funciona lo que diseñas ayuda a decidir mejor.
  • Esta web usa el sistema que enseña el curso, y ese sistema es tan grande como lo que resuelve, ni más ni menos.

Fuentes

Esta página presenta el curso y no contiene afirmaciones técnicas. Las fuentes de cada tema están en su lección y en Fuentes consultadas.