Por Óscar Otero —
O pasado 28 de outubro anunciouse oficialmente que a especificación de design tokens acadou finalmente a súa primeira versión estable. Se non sabes de que vai isto, chámanselle tokens a todas esas constantes que conforman un sistema de deseño como poden ser as cores ou as dimensións. O obxectivo desta especificación é ter un formato común para que eses valores poidan ser consumido por diferentes plataformas e aplicacións. Por exemplo, imaxina que as cores definidas en Figma se poideran empregar automaticamente no código CSS.
O formato escollido é un JSON cunha estrutura específica, na que cada token ten un nome, valor, tipo e outras propiedades opcionais como a descripción. Este é un exemplo para unha cor á que chamaremos «cor_principal»:
{
"cor_principal": {
"$type": "color",
"$description": "Para resaltar elementos interactivos",
"$value": {
"colorSpace": "srgb",
"hex": "#330099",
"alpha": 0.5
}
}
}
Como podes ver, o formato é bastante sinxelo e flexible xa que permite gardar os valores de diferentes formas. Neste exemplo a cor está definida en hexadecimal e inclúe o valor alfa e o espazo de cor, pero poderíamos engadir máis información como o formato RGB ou HSL.
Este é outro exemplo para gardar dimensións, o que é moi útil para tamaños tipográficos:
{
"tamaño_normal": {
"$type": "dimension",
"$value": {
"value": 16,
"unit": "px"
}
}
}
A primeira versión draft saíu en 2021 pero lembro ter colaborado cun comentario un par de anos antes. Así que esta primeira versión estable é o resultado de máis de 5 anos de traballo. Parabéns a todos os implicados. Definir estándares é un traballo lento e ás veces pouco agradecido pero cando finalmente consegue saír á luz, moi gratificante.
Agora só nos queda agardar a que os programas de deseño comecen a incorporar este estándar. Confío en que non van tardar moito, xa que empresas como Figma, Adobe ou Sketch estiveron involucradas neste proceso dende o principio.