~/articulo tree
Mantener consistencia visual en un producto que crece es uno de los retos más subestimados del diseño. Cuando el equipo es pequeño, las convenciones se mantienen en la cabeza. Cuando escala, todo se desintegra.
Los design tokens son la solución: variables nombradas que encapsulan las decisiones de diseño (colores, tipografía, espaciado, sombras) y las hacen reutilizables en diseño, código y múltiples plataformas.
Este artículo explica qué son, cómo estructurarlos y cómo sincronizarlos entre Figma y el código para que el diseño y el desarrollo hablen el mismo idioma.
¿Qué son los design tokens?
Un design token es una variable con nombre que almacena un valor de diseño. En lugar de hardcodear #1A73E8 en el CSS, defines color.primary.500 = #1A73E8 y usas ese token en todas partes.
La ventaja es obvia: si el color primario cambia, actualizas el token en un solo lugar y el cambio se propaga a todo el sistema de forma automática.
Cómo estructurar los tokens
La arquitectura de tokens más robusta tiene tres capas:
| Capa | Nombre | Ejemplo |
|---|---|---|
| Global | Primitive tokens | color.blue.500 = #1A73E8 |
| Semántica | Semantic tokens | color.interactive.default = {color.blue.500} |
| Componente | Component tokens | button.background.primary = {color.interactive.default} |
Esta separación permite cambiar el tema (dark mode, rebrand) modificando solo la capa semántica, sin tocar los componentes.
Sincronización entre Figma y código
- Figma Variables: nativo desde 2023, permite definir tokens directamente en el archivo de diseño
- Style Dictionary: herramienta de Amazon que transforma tokens JSON a CSS, JS, Swift, Kotlin y más
- Token Pipeline: flujo automatizado que exporta desde Figma, transforma con Style Dictionary y hace commit al repositorio
El objetivo es que cuando el diseñador cambia un color en Figma, ese cambio llegue al código sin intervención manual del desarrollador. Esto es posible con el pipeline correcto.
Dark mode en 30 minutos con tokens
Si el design system está bien construido sobre tokens semánticos, implementar dark mode es trivial: creas un tema alternativo que redefine los tokens semánticos con los valores oscuros, y el 100% de los componentes se adaptan automáticamente.
Sin tokens, implementar dark mode significa revisar cada componente manualmente. Con tokens, es una redefinición de variables.
Conclusión
Los design tokens son la infraestructura invisible que hace posible escalar un design system sin que todo se rompa. Invertir en estructurarlos bien al principio ahorra semanas de trabajo cuando el producto crece.
~/siguiente-paso$ montreach contact
Cuéntanos qué necesitas y te proponemos un primer paso concreto.