Empezar aquí
Por qué existe esta web
DesignToken101 nace de la necesidad de aprender a trabajar con tokens de diseño de principio a fin, con Figma, DTCG y Tailwind CSS.
Última revisión:
Hay mucha información sobre tokens de diseño, pero está repartida entre la documentación de Figma, una especificación técnica, las herramientas de conversión y los sistemas de diseño de cada empresa. DesignToken101 reúne ese recorrido en un solo lugar y en orden.
En esta página
- El problema que resuelven los tokens
- El problema de aprenderlos
- Por qué Figma DTCG y Tailwind CSS
- Lo que te llevas
El problema que resuelven los tokens
Sin tokens, un mismo valor, por ejemplo el azul de la marca, se repite a mano en decenas de sitios de Figma y del código. Cambiarlo obliga a buscar y reemplazar en dos mundos, aparecen variantes por error (#2563EB frente a #2564EB) y el valor suelto no dice para qué sirve.
Un token es una decisión de diseño con nombre. La especificación DTCG los describe como una forma de expresar decisiones de diseño independiente de la plataforma, para compartirlas entre disciplinas, herramientas y tecnologías y crear un vocabulario común (DTCG Format Module 2025.10: Introduction).
El problema de aprenderlos
Entender qué es un token es la parte corta. Lo difícil es todo lo que viene después:
- Planificar qué valores existen y cómo se organizan en capas.
- Nombrar los tokens para que se entiendan en Figma y en el código.
- Crearlos en Figma con variables, colecciones y modos.
- Implementarlos: sacarlos de Figma y convertirlos en algo que el código pueda usar.
La propia especificación DTCG señala el problema de fondo: muchas herramientas permiten exportar tokens, pero cada una a su manera, así que los equipos acaban escribiendo y manteniendo su propio código "pegamento" para conectarlas (DTCG Format Module 2025.10: Introduction).
DesignToken101 nace de la necesidad de aprender ese recorrido completo, desde la idea hasta la implementación, con una metodología que se pueda seguir y comprobar.
Por qué Figma DTCG y Tailwind CSS
- Figma, porque es donde se diseña. Sus variables, colecciones y modos son la herramienta nativa para crear tokens (Figma: Modes for variables).
- DTCG, porque es el formato común para mover tokens entre herramientas. Figma importa y exporta variables en este formato (misma fuente).
- Tailwind CSS, como posible destino en código. Su versión 4 se configura en CSS con variables de tema (Tailwind CSS: Theme variables), lo que encaja con tokens exportados como variables CSS.
Tailwind CSS es opcional. La parte que va de Figma a variables CSS funciona sin él. Lo explicamos en Cómo encajan Figma, DTCG y Tailwind.
Lo que te llevas
- Un token es una decisión de diseño con nombre, compartida por Figma y el código.
- Lo difícil no es entender qué es un token, sino planificarlos, nombrarlos, crearlos e implementarlos.
- Figma crea los tokens, DTCG los mueve entre herramientas y Tailwind CSS es un destino opcional en código.