Você pode até ter entendido o que é essa variável semântica de estilo, mas qual é ¿Qué importancia tiene su verdad y función no Design System?
El Design Token está declarado como una serie de estilos que pueden estar en diversos idiomas, como JSON, XML o CSS, por ejemplo, y será a partir de los objetos terão forma na tela.
oh Ficha de diseño cirugía para facilitar la vida dos diseñadores e principalmente dos desenvolvedores, pois quanto maior o tamanho do projeto e de pessoas envolvidas nele, mayor se torna o problema caso precisamos ajustar algunas propiedades no código.
Por ejemplo, vamos a intentar ilustrar algunos componentes de la biblioteca:
Imagen ilustrativa de componentes de una biblioteca de diseño con herramientas, etiquetas, botones de diversos tamaños, un menú con íconos y un campo de inserción de texto, todos en color azul.
Se abstrairmos o conceito de design tokens, vamos a deixar as cores desses elementos dessa maneira: “#00C2FF”
Até então nonhum problema, a missão foi cumprida y muchos componentes están en los núcleos corregidos que foi definidos.
Por eso, después de un estudio de accesibilidad, descubrimos que esse tom de azul tiene problemas de contraste y perjudica la lectura cuando se aplica con una fuente blanca. Será preciso ajustar o tom e deixar mais escuro, de ahora a cor passa a ser “009CCE”
Pensando no retrabalho que isso pode gerar, podemos estar falando em centenares de componentes espalhados por su producto que estão com essa cor e será preciso visitar um a um para fazer os ajustes, tanto no software de design, quanto no código.
Agora, vamos a aplicar el concepto de tokens nesse cenário e veja a tranquilidade que nos traz nas adversidades.
Vamos a definir el token da cor principal da marca que será “00C2FF”
cor-da-marca-principal = #00C2FF
En todo el momento que deseas usar essa cor vou usar o token ao invés do valor final.
Por ejemplo: cor do botão > cor-da-marca-principal
Botão com cantos arredondados, cor de preenchimento azul y fonte sem serifa.
Agora vamos ao problema de accesibilidad com a cor e será necesario ajustar.
Vamos redefinir el token da cor principal da marca que será “009CCE”
cord-da-marca-principal = #009CCE
Agora não precisamos mudar em cada componente, pois o valor da cor não está nele e sim no token.
Esta forma, todos los componentes que estiverem con el token “cord-da-marca-principal” passa a ter o novo valor hexadecimal da cor. Ao invés do desenvolvedor ajustar nas linhas de code da aplicação, ele só precisa ajustar a folha de estilos y actualizar de forma que irá ser consumido por todas as plataformas. La práctica funciona así:
Diagrama que representa la distribución de los siguientes estilos de tokens de diseño acima y a continuación temos lado a lado, aplicaciones web, Android e IOS.