Saltar al contenido

Glosario · Web, apps y producto

Design tokens

Los design tokens son las decisiones de diseño de una marca —colores, tipografías, espaciados, radios, sombras— guardadas como valores con nombre que comparten el diseño y el código.

Design tokens, en detalle

En lugar de escribir un color como #FF5A1F en cien sitios, se define una vez con un nombre y todo lo demás lo referencia. El término nació en el sistema de diseño de Salesforce a mediados de la década de 2010. Suelen organizarse en capas: valores primitivos (la paleta), tokens semánticos (para qué se usa cada valor: fondo, texto, borde) y, a veces, tokens de componente.

La utilidad se nota al cambiar. Un modo oscuro, una submarca o un ajuste de contraste por accesibilidad pasan a ser un cambio de valores y no una búsqueda por todo el código. También permiten llevar la misma identidad a web, iOS y Android desde una única fuente. Un grupo comunitario del W3C mantiene un formato común para intercambiarlos entre herramientas.

Design tokens en un proyecto

Cada identidad y cada sistema de diseño que entregamos incluye sus tokens en un formato que el código consume directamente, para que marca y producto no se separen con el tiempo.

En este sitio

Dónde lo aplicamos

Todos los servicios
  • Diseño webUX, UI y design systems pensados para convertir y para crecer.
  • Branding y namingNaming, logotipo y un sistema visual que ya nace en código.

Glosario

Términos relacionados

Ver todo el glosario

Empezar

¿Design tokens aparece en vuestro proyecto?

Cuéntanos qué sistema tenéis y qué se sigue haciendo a mano. Te decimos por dónde empezaríamos y si encaja.

¿Antes de escribir? Mira cómo presupuestamos un proyecto o las soluciones por área de la empresa.

Fig. 07Manipulador MorseH · O · L · A