{"id":118190,"date":"2023-01-06T08:00:00","date_gmt":"2023-01-06T11:00:00","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/?p=14770"},"modified":"2023-07-26T16:17:18","modified_gmt":"2023-07-26T19:17:18","slug":"design-tokens","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/design-tokens\/","title":{"rendered":"Design Tokens: como aplicar diretrizes de design consistentes em toda a sua aplica\u00e7\u00e3o"},"content":{"rendered":"\n

Design Tokens s\u00e3o uma ferramenta cada vez mais popular entre designers e desenvolvedores, pois ajudam a garantir a consist\u00eancia e a flexibilidade do design em toda a aplica\u00e7\u00e3o. Com eles, as equipes de design e desenvolvimento<\/a> podem trabalhar de forma colaborativa e eficiente, aplicando as diretrizes de design consistentemente em toda a aplica\u00e7\u00e3o.<\/p>\n\n\n\n

Os Design Tokens s\u00e3o valores estruturados que representam as principais propriedades de design de uma aplica\u00e7\u00e3o, como cores, tamanhos de fonte e espa\u00e7amento. Esses valores s\u00e3o definidos e gerenciados centralmente, permitindo que os designers e desenvolvedores apliquem consistentemente as diretrizes de design em toda a aplica\u00e7\u00e3o. <\/p>\n\n\n\n

Al\u00e9m disso, tamb\u00e9m podem ser usados \u200b\u200bpara criar varia\u00e7\u00f5es de design, como temas claro e escuro, ou varia\u00e7\u00f5es de acordo com a marca. Isso ajuda a manter a consist\u00eancia e a flexibilidade do design, permitindo que as equipes de design e desenvolvimento trabalhem de forma colaborativa e eficiente. <\/p>\n\n\n\n

Neste post, vamos explorar os benef\u00edcios e a implementa\u00e7\u00e3o de Design Tokens em seu projeto, e como eles podem ajudar a garantir a consist\u00eancia e flexibilidade do design em toda a aplica\u00e7\u00e3o.<\/p>\n\n\n\n

O que \u00e9 design token?<\/strong><\/h2>\n\n\n\n

Design tokens s\u00e3o valores estruturados que representam as principais propriedades de design de uma aplica\u00e7\u00e3o, como cores, tamanhos de fonte e espa\u00e7amento. Esses valores s\u00e3o definidos e gerenciados centralmente, permitindo que os designers<\/a> e desenvolvedores apliquem consistentemente as diretrizes em toda a aplica\u00e7\u00e3o.<\/p>\n\n\n\n

Sua origem pode ser rastreada at\u00e9 o in\u00edcio dos anos 2000, quando as equipes de design e desenvolvimento come\u00e7aram a trabalhar juntas em projetos de aplicativos e sites. Com o aumento da complexidade dos projetos, as equipes enfrentavam desafios para garantir a consist\u00eancia e flexibilidade do design em toda a aplica\u00e7\u00e3o.<\/p>\n\n\n\n

Um dos primeiros exemplos foi criado pela equipe de design da Yahoo<\/a> em 2007, com o objetivo de garantir a consist\u00eancia do design em toda a sua plataforma de produtos. Eles criaram uma biblioteca de Design Tokens que representavam as principais propriedades de design, como cores e tamanhos de fonte, e que eram usadas \u200b\u200bem toda a plataforma.<\/p>\n\n\n\n

Outras empresas, como a Salesforce<\/a> e a Airbnb<\/a>, tamb\u00e9m come\u00e7aram a usar Design Tokens para garantir a consist\u00eancia e flexibilidade do design em suas aplica\u00e7\u00f5es. Com o tempo, ferramentas como o Style Dictionary e o Design System Generator surgiram, tornando mais f\u00e1cil criar e gerenciar Design Tokens.<\/p>\n\n\n\n

Atualmente, Design Tokens s\u00e3o amplamente usados \u200b\u200bem projetos de aplicativos e sites, e s\u00e3o considerados uma das melhores pr\u00e1ticas para garantir a consist\u00eancia e flexibilidade do design em toda a aplica\u00e7\u00e3o.<\/p>\n\n\n\n

Design tokens s\u00e3o criados como arquivos de configura\u00e7\u00e3o que podem ser facilmente processados \u200b\u200be convertidos em v\u00e1rios formatos, como CSS<\/a>, SCSS, Less, JSON, etc. Isso permite que eles sejam usados \u200b\u200bem diferentes plataformas e tecnologias, como web, mobile, e aplicativos de desktop.<\/p>\n\n\n\n

Design tokens tamb\u00e9m podem ser usados \u200b\u200bpara criar varia\u00e7\u00f5es de design, como temas claro e escuro, ou varia\u00e7\u00f5es de acordo com a marca. Isso ajuda a manter a consist\u00eancia e a flexibilidade do design, permitindo que as equipes de design e desenvolvimento trabalhem de forma colaborativa e eficiente.<\/p>\n\n\n\n

Exemplo de Design Token<\/strong><\/h3>\n\n\n\n

Um exemplo de Design Token na pr\u00e1tica seria a cor principal da sua aplica\u00e7\u00e3o. Suponha que a equipe de design tenha escolhido o azul como a cor principal para a sua aplica\u00e7\u00e3o. Em vez de definir essa cor como um valor hexadecimal (por exemplo, #0000FF) em todas as folhas de estilo, eles podem criar um Design Token chamado “primary-color” e defini-lo como o valor hexadecimal #0000FF.<\/p>\n\n\n\n

Em seguida, o Design Token “primary-color” pode ser usado em todas as folhas de estilo da aplica\u00e7\u00e3o, para aplicar a cor azul em diferentes elementos, como bot\u00f5es, t\u00edtulos, etc. Isso garante que a cor azul seja aplicada consistentemente em toda a aplica\u00e7\u00e3o, sem prejudicar a flexibilidade do design. <\/p>\n\n\n\n

Se a equipe de design decidir mudar a cor principal para vermelho, por exemplo, eles s\u00f3 precisam mudar o valor do Design Token “primary-color” uma vez, e toda a aplica\u00e7\u00e3o ser\u00e1 atualizada automaticamente.<\/p>\n\n\n\n

Al\u00e9m disso, esses Design Tokens podem ser convertidos para diferentes formatos, como SCSS, Less, JSON<\/a>, entre outros, permitindo que sejam usados \u200b\u200bem diferentes plataformas e tecnologias, como web, mobile<\/a>, e aplicativos de desktop, garantindo a consist\u00eancia do Design em todas as plataformas.<\/p>\n\n\n\n

Por que os Design Token s\u00e3o importantes?<\/strong><\/h2>\n\n\n\n

Os Design Tokens s\u00e3o importantes por v\u00e1rios motivos, entre eles:<\/p>\n\n\n\n