Curso
Repeat
Módulo 03 · Tokens
3.2 · Arquitectura de Tokens
01 / 27
Estructura brutalista
Módulo 03 · Tokens·11–12 min

ArquitecturadeTokens.

El día que el CEO te diga «cambiamos el color principal», tu sistema te dará 30 segundos o 3 semanas. Depende de cómo lo construiste.

↓ Avanza con scroll · flechas · espacio

0s

Si tu sistema está bien construido, cambias un valor en un sitio y todo se actualiza solo.

0 sem.

Si tu sistema es un UI Kit disfrazado, abres 230 componentes y cambias el color a mano en cada uno.

Capas apiladas

La diferencia tiene un nombre técnico

Jerarquíadetokens.

El orden estructural en el que un valor de diseño se define una sola vez y se propaga a todo el sistema mediante capas que se referencian entre sí. Sin jerarquía no hay propagación. Sin propagación, cada cambio se duplica manualmente.

Sala oscura
ProblemaSistema sin jerarquía

El coste real de un UI Kit disfrazado.

Componentes
230

a tocar a mano

Tiempo
3w

3 semanas de churn

Sync con código
0%

cada cambio se duplica

$ Coste estimado
50–200K€

en tiempo de desarrollo perdido

✕ Resultado

Un equipo atrapado en su propio sistema.

Lo que separa al equipo que itera del que reaprende todo cada rebranding.

§01

Variable vs Token

Token

Decisión de diseño agnóstica.

Vive en un archivo JSON. Es el contrato entre diseño y desarrollo. Sobrevive a cualquier cambio de herramienta y se propaga a todo el ecosistema.

Variable

Representación visual del token.

Vive en una plataforma. Se rompe al cambiar de herramienta. Si cambias su valor, no afecta a desarrollo.

Test de validez

Si tu token no está sincronizado con código,
no es un token.

Es una variable. Útil para diseñar, pero invisible para producción.

Para que sea token de verdad, necesitas tres cosas.

01

Un archivo JSON

que actúe como fuente de verdad.

02

Una herramienta

que conecte ese JSON con Figma.

03

Un repo de código

donde el dev consume ese mismo JSON.

Truco senior

«¿DóndeviveelJSON?»

Si responden «está en Figma con variables», tienen un UI Kit. Si responden «en un repo con Tokens Studio», tienen sistema real. Esa pregunta te coloca por encima del 80% del mercado.

§02

Los 3 niveles

Sistema3 niveles · 1 dirección

La jerarquía que separa al sistema escalable.

Nivel 011

Primitivos

Valores brutos

color-blue-500
spacing-6
radius-md
Nivel 022

Semánticos

Funciones

color-action-primary-defaultcolor-surface-defaultspacing-component-inner
Nivel 033

Componentes

Comportamientos

button-primary-bg-defaultcard-padding

↓ Cada nivel apunta al anterior. Nunca al revés.

Hay dos escuelas para nombrar primitivos. Ninguna es incorrecta.

Descriptiva — Tailwind / Radix

color-blue-500

Te conviene con varias marcas, varios productos, cambios frecuentes. Da flexibilidad creativa.

Rol — Material You / Polaris

primary-500

Te conviene con sistema estable, una marca, paleta restringida. Material You la usa porque genera todo desde un seed.

Matiz SeniorAnti-sobreingeniería

Empiezacon2niveles.Eltercerosolositelopidenloscomponentes.

Suficiente90%

de proyectos viven con primitivos + semánticos.

Cuándo sumar el 3ºMuchos componentes con comportamientos muy distintos.

Si no, sobra

Coste de añadirlo antesDonde mueren las startups.

Sobreingeniería = deuda

RecuerdaUna regla por nivel
01
Primitivosdefinenvalores.
02
Semánticosdefinenfunciones.
03
Componentesdefinencomportamientos.

Todos apuntan hacia abajo. Nunca al revés.

§03

Taxonomía modular

Un nombre real es una secuencia de cajitas.

01cajita
Elementotext · bg · border · icon
Ej.text
→
02cajita
Tonobrand · warning · danger…
Ej.warning
→
03cajita
Énfasisdefault · subtle · strong
Ej.strong
→
04cajita
Estadodefault · hover · focus…
Ej.default

= Token final

text-warning-strong-default

Regla de oro

Claridadsobrebrevedad.

Mal

txt-w-s-d

Bien

text-warning-strong-default
Matiz SeniorMantine · MUI · Chakra

No te pelees con la librería. Mete una capa encima.

Paso 01Primitivo de libreríamantine-primary-color

Viene fijo. No lo renombres.

↓
Paso 02Tu capa semánticacolor-action-primary-default

Apunta al primitivo de la librería.

↓
Paso 03Tus componentesbutton-primary-bg

Consumen tu semántico, nunca el primitivo de la librería.

Respetas la restricción técnica y mantienes tu sistema de nombres por debajo.

§04

Las 4 familias

El color es solo el 25% del trabajo. Las otras tres familias casi nadie las sistematiza.

Color01
  • color-text-primary-default
  • color-surface-elevated
  • color-action-danger-default
Espacio02
  • spacing-component-inner
  • spacing-component-outer
  • spacing-section
Tipografía03
  • text-display-l
  • text-heading-m
  • text-body-s
Otros04
  • radius-md
  • shadow-lg
  • duration-medium
§05

Sincronización

Figma ⇄ JSON ⇄ Código.

Nodo 1Figma
Nodo 2JSON (fuente de verdad)
Nodo 3Repo de producto

Sincronización bidireccional. Cuando cambia algo en el JSON, se propaga a los dos lados. Sin JSON sincronizado, no es Design System.

Matiz SeniorSincronización

Lo que separa a un sistema vivo de uno muerto.

Unidireccional

Figma → Código

El dev necesita un token. Te lo pide. Lo creas en Figma. Esperas a que se sincronice. El diseñador es cuello de botella.

Coste

Sprints retrasados por dependencias humanas.

Bidireccional

Figma ⇄ Código

Diseño o dev crean tokens en su herramienta y se sincroniza al otro lado automáticamente.

Resultado

Un equipo que entrega antes. Medido en sprints completos.

Ejercicio 3.2·Tu primera arquitectura de tokens

Diseñaunajerarquíadetokensquesobrevivaalrebranding.

01

Define tus primitivos.

Elige escuela (descriptiva o de rol) y justifícala en una frase.

02

Define tus semánticos con las 4 cajitas.

Elemento · tono · énfasis · estado.

03

Aplica el test del rebranding.

¿Cuántas líneas tocas para cambiar la marca? Una = OK.

04

Aplica el test del glossary.

¿Reutilizarías esos nombres en otro proyecto?

Director silueta ventana

El criterio del director

Elegí la escuela descriptiva porque mi cliente tiene dos productos con paletas distintas. Mi capa semántica describe función con las cuatro cajitas. Los componentes consumen solo semánticos. Si cambio la marca, toco 8 líneas y todo el sistema se actualiza solo.
Valor en tiempo de desarrollo ahorrado50.000 – 200.000 €
Estructura modular

Próximo capítulo · 3.3

AtomicDesign.Átomos,moléculasyorganismos.

↑ Volver al inicioÍndice del curso →