Design Tokens: cómo y cuándo usarlos

La definición de un Design Token un poco mas al estilo Teff: Imagina que tienes una caja de herramientas gigante llena de cosas que usas para construir tus diseños: colores, tipografías, espaciados, estilos de borde, y todo eso. Bueno, cada una de esas cosas es un Design Token.

En lugar de tener que buscar en esa caja cada vez que necesitas usar algo, puedes ponerle un nombre a cada cosa (como “rojo intenso” o “espaciado grande”) y usar ese nombre en todos tus diseños. Entonces, si decides que el “rojo intenso” es demasiado brillante y quieres hacerlo un poco más suave, sólo necesitas cambiar el valor del Design Token correspondiente y automáticamente se actualizará en todos tus diseños.

Es como tener un control remoto para todo el estilo de tu diseño, ¡sólo aprietas un botón y todo cambia mágicamente!

Design Tokens: son un conjunto de valores predefinidos y reutilizables que representan los componentes visuales de un diseño, como colores, tipografía, espaciado, tamaños de elementos, etc. En lugar de definir estos valores directamente en el código, se crean tokens que se utilizan como variables y se llaman desde el código. Esto permite una mayor coherencia en el diseño, ya que los valores se pueden actualizar de manera centralizada y se aplican automáticamente en todo el diseño.

❌ “Los tokens de diseño son solo variables” es como decir “responsive design son solo media queries”

¿Por qué usar Design Tokens?

• Coherencia
• Única fuente de verdad
• Genera orden
• Permite colaboración
• Consistencia
• Permite hacer seguimiento

Aplicación de los Design Tokens:

Tipos de tokens:

Una arquitectura de tokens robusta y extensible depende de cuántos niveles de abstracción se tengan.

• Tokens globales: valores primitivos independientes del contexto heredado por otros tokens. Ej, el hexadecimal de un color.
• Tokens de alias: se relacionan con un contexto, son efectivos cuando un valor con una sola intención aparecerá en varios lugares.
• Tokens específicos de componentes: son la representación de cada valor asociado a un componente.

Desventajas de los tokens

• Se necesita un proceso sólido y convenciones de nomenclatura sólidas para que las cosas no se salgan de control y no sea una pesadilla de mantener.
• Se requiere una gran inversión inicial. Un sistema de tokens deficiente puede ser más perjudicial que beneficioso.

Cómo saber si los tokens son adecuados para el equipo

• Planeas actualizar el diseño o hacer uno nuevo.
• Tu diseño se aplica a más de un producto.
• Deseas mantener o actualizar estilos fácilmente en el futuro.

Cuando no es necesario crear tokens

• Los valores no cambiarán en 1 o 2 años.
• No se cuenta con un sistema de diseño.

Tips para crear tokens

• Realiza un inventario.
• Define criterios y convenciones de nomenclatura.
• Ten un rol de guardián o guardiana.
• Cumple con A11Y.

¿Cómo funcionan los tokens en la vida real?

• Los protagonistas: diseño y desarrollo.
• La realidad es diferente al hacer el Handoff.
• Las herramientas de ambos equipos necesitan poder comunicarse.

Jajajajjaja

Los Devs dicen:

Bueeeno, muy bonito pero yo hago lo que quiero…

Jajajajjaja

Design tokens, se usan para: colores , tamanos, tipografias, opacidades.

Por que usar design tokens?

• Coherencia
• Unica fuente de verdad
• Genera orden
• Permite colaboracion
• consistencia
• permite hacer seguimiento.

No nombrar los colores, por el nombre del color. Ejemplo: Color verde, el token se llamaba Verde. Esto no es escalable, No se debe hacer.

Escalas de nomenclatura.
Tenemos 4 escalas, de naiming de tokens, esto va a depender que tanto lo necesitemos, no significa que siempre debemos usar los 4 niveles.

• Pink-500: Token global, valores primitivos independientes del contexto. (No esta limitado a solo usarse en un componente por ejemeplo)

• Cta-Background-color: esto es un tokens de alias, se relaciona con un contexto. Son efectivos cuando un valor con una sola intencion aparecera en varios lugares. En este caso, este token solo lo usamos para el backgrund de CTAs.

• Button-cta-background-color: Este es un token especifico, basicamente estamos diciendo que el color asignado a este token, se puede usar solamente como background de botones.

.
.
Vamos con las Desventajas.
.

• Desventaja #1
  Se necesita un proceso solido y convenciones de nomenclaturas solidas para que las cosas no se salgan de contro y no sea una pesadilla de mantener.

• Desventaja #2
  Se requiere una gran inversion inicial. Un sistema de tokens deficiente puede ser mas perjudicial que beneficioso.
  .
  .

Cuando decidir hacer los tokens?

• Cuando se planea actualizar el diseno o hacer uno nuevo
• Tu diseno se aplica a mas de un producto
• Deseas mantener o actualizar estilos facilmente en el futuro.
  .
  .

No tienen mucho sentido usar tokens si…

• Los valores no cambiaran en 1 o 2 anos. Ejemplo una landing page que no va a cambiar de aqui a 2 anos.
• No tienes un sistema de diseno.
  .
  .

Tips si vas a crear tokens:

• Realizar un inventario
• Definir criterios y convenciones de nomenclatura.
• Ten un rol de guardian o guardiana.
• Cumple con A11Y (Accesibilidad).
  .
  .

Como funcionan los tokens en la vida real?
Los protagonistas son los disenadores y los desarrolladores. Necesitamos herramientas para poder comunicarnos.
.
.

Si les encanta hablar de estos temas, no duden en contactarme.

Martin Coronel - Product Desginer
Linkedin

• Al manejar los Design Tokens (valores predefinidos y reutilizables que representan los componentes visuales de un diseño, como: tipografías, espaciado, opacidades, colores, tamaños, etc.) en el día a día, diseñadores y desarrolladores, necesitan poder comunicarse en vivo con efectividad (Figma, etc.) utilizando herramientas unificadas y colaborativas, donde si Diseño hace un cambio, Desarrollo pueda tener ese cambio simultáneamente
  .
• La realidad es diferente al hacer el handoff (traspaso de información del área de diseño a los desarrolladores)