Tipologías de design tokens
Color, dimensiones, fuentes, cubic bézier...Definir qué tipos de valores tokenizamos nos ayudará a sistematizar nuestra interfaz y será fundamental para crear los transformadores
Cuando empezamos con nuestra arquitectura de tokens, una de las primeras preguntas que tendremos que responder es ¿Qué valores nos interesa tokenizar?
El empezar tokenizando más o menos valores dependerá de los recursos, la plataforma, de la complejidad de nuestra interfaz, de las herramientas que usemos (Como ya vimos, si nos hemos decidido por usar Token Studio, ésta nos ofrece más de 23 tipos de disponibles, mientras que en Figma contamos con 4)
Hoy veremos más a fondo qué tipos de design tokens podemos crear y para qué nos puede ayudar.
Qué son los tipos de tokens
Hace unos posts hablamos de la nomenclatura y cómo en el nuevo formato de la W3C contábamos con la propiedad $type, que nos permitía identificar el tipo de valor del token (también vimos cómo podemos inferirlo de otras formas, como a partir de la nomenclatura con un formato tipo CTI)
Esto nos permite saber qué tipo de token estamos creando y, por ejemplo, si estamos en una herramienta de diseño, mostrar un color picker para hacer más fácil el introducir un valor de color.
Para las herramientas de transformadores será fundamental, ya que según el valor podrán crear una serie de transformaciones u otras.
Empezando desde lo sencillo
Aunque es cierto que una mayor tokenización nos otorga un mayor control sobre la interfaz, comenzar con una estructura de tokens demasiado compleja podría complicar innecesariamente nuestra arquitectura, haciéndola engorrosa y menos intuitiva.
Un enfoque gradual será la mejor opción. Empezar por aquellos que nos aporten más valor y un beneficio inmediato, como los tokens de color, tipografía y dimensiones.
Conforme vaya evolucionando el proyecto, podremos expandir a otros tokens más complejos.
Color
Posiblemente el valor más utilizado en la interfaz, tokenizarlo nos permite tener beneficios en la interfaz como diferentes temas, modo noche…
Para el grupo de trabajo de design tokens, la representación idónea de este tipo de tokens se debe hacer en el espacio sRGB, por lo que nuestro token podría ser algo como:
{
"Majestic magenta": {
"$value": "#ff00ff",
"$type": "color"
},
"Translucent shadow": {
"$value": "#00000080",
"$type": "color"
}
}Su transformación a otros espacios de color como HSL la podremos llevar en las herramientas de transformación, consiguiendo algo como esto:
// colors-hex.scss
$majestic-magenta: #ff00ff;
$translucent-shadow: #00000080;
// colors-hsl.scss
$majestic-magenta: hsl(300, 100%, 50%);
$translucent-shadow: hsla(300, 100%, 50%, 0.5);Typography
Este valor de la interfaz será más complejo de tokenizar. A diferencia del color que se compone de un único valor, las tipografías pueden componerse de varios valores, creando un tipo compuesto.
Sus valores principales serán:
fontFamily: La fuente de la tipografía
fontSize: El tamaño de la tipografía
fontWeight: El peso de la tipografía
letterSpacing: El espaciado entre carácteres
lineHeight: El espaciado entre líneas
Podríamos tokenizar otros elementos de la tipografía como textDecoration, textCase, paragraphSpacing…
Un ejemplo de un token de tipografía sería:
{
"type styles": {
"heading-level-1": {
"$type": "typography",
"$value": {
"fontFamily": "Roboto",
"fontSize": "42px",
"fontWeight": 700,
"letterSpacing": "0.1px",
"lineHeight": 1.2
}
},
"microcopy": {
"$type": "typography",
"$value": {
"fontFamily": "{font.serif}",
"fontSize": "{font.size.smallest}",
"fontWeight": "{font.weight.normal}",
"letterSpacing": "0px",
"lineHeight": 1
}
}
}
}Estos valores pueden agruparse bajo el type:typography o pueden usarse como valores individuales. Será interesante saber cómo van a usarse por los diferentes equipos e incluso servirlos sin el tipo compuesto.
Dimension
Hace referencia a un tamaño simple que usemos en cualquier propósito, como distancia, altura, ancho…
{
"dimension-x100": {
"$value": "4",
"$type": "dimension"
},
"text-to-element-sm": {
"$value": "dimension-x100",
"$type": "dimension"
}
}Ya que su valor puede ser diferente según la plataforma donde lo usemos (rem para web, pt para iOS o dp para Android) deberemos tenerlo en cuenta en su transformación, al igual que el color. Por lo que todos los tokens que hacen referencia a tamaños deberán ir con este type:dimension para que sean más sencillos de transformar.
// dimensions-rem.scss
$dimension-x100: 0.25rem;
$text-to-element-sm: 0.25rem;
// dimensions-pt.scss
$dimension-x100: 4pt;
$text-to-element-sm: 4pt;Te recomiendo este artículo de Nate Baldwin sobre cómo plantear una arquitectura de tokens de espaciado manteniendo la semántica.
¡Hasta aquí por hoy!
En las próximas newsletter entraremos a ver más tipos de tokens
¡Déjanos en comentarios si te interesa alguno en concreto!