Design System na prática no Meetup do UX Lab!

No dia 04 de Setembro, em parceria com o pessoal do TOTVS Delovepers realizamos um meetup para contar um pouquinho sobre o novo projeto que é a bola da vez do UX Lab, o Design System.

Para isso contamos com a participação dos nossos colegas Henrique Peixe e Tiago Martins, explicando um pouco sobre o que é o design system, como ele se aplica e como surgiu o guideline que trabalhamos atualmente na TOTVS.

Não podemos deixar de mencionar a presença de Renato Cardial da agência Badaró, que apresentou um incrível livecode repleto de reviravoltas deixando os devs entusiasmados com tamanha praticidade que viram em poucos minutos. No final do meetup apresentamos também as anotações visuais do nosso colega e ilustrador Douglas Souza que, de uma forma brilhante, conseguiu representar visualmente a fala de cada um dos speakers.

“É muito bom falar que pensamos nos nossos usuários e nas pessoas. Mas não adianta de nada, se estamos esquecendo de falar com os desenvolvedores que irão implementar a solução.” — Tiago Costa

Sabemos que a relação entre Designers e Desenvolvedores sempre foi uma relação de amor e ódio, do tipo novela Mexicana… Por um lado temos desenvolvedores cheio de certezas, fazendo de tudo, menos falando com o usuário. E do outro lado temos designers que, muitas vezes, propõem soluções sem viabilidade técnica ou que criam manuais de 600 páginas de boas práticas que nunca serão lidos por ninguém. Ao longo dos anos este cenário tem mudado, e o Design System é a maior prova disso, pois ele tem o poder de ser a ponte entre desenvolvedores e designers através da unificação de uma linguagem lógica: a semântica.

Mas afinal o que é isso? Segundo o grande sábio Google, semântica é: “o estudo do significado. Incide sobre a relação entre significantes, tais como palavras, frases, sinais e símbolos, e o que eles representam, a sua denotação.”

Agora exemplificando, no guideline da TOTVS temos essas cores cada uma com suas funções:

Antigamente, os designers estabeleciam as funções de cada cor e salvavam o RGB para passar aos desenvolvedores, porém e se ao invés de colocar o código da cor eu já descrevesse a função dela e sua variação?

Não fica mais simples?

O objetivo do Design System é garantir maior escalabilidade, mais produtividade e acessibilidade nos produtos. Assim, conseguimos investir tempo naquilo que realmente importa: PESSOAS.

“Quando você sistematiza os componentes de design, você consegue atingir maiores níveis de acessibilidade em cada um deles.” — Henrique Peixe

Bom, falando assim é tudo muito maravilhoso. Mas vamos ver um pouco na prática?

É lindo isso não né? E o melhor de tudo, sem mexer em uma linha de código!

Vale ressaltar que o fluxo de alteração que foi apresentado aqui, pode ser modificado por cada organização. Por exemplo, ao invés da integração estar ligada ao Figma é possível estar ligada a um Docs.

E aí achou o conteúdo show show? Veja o vídeo completo do evento com tudo o que rolou aqui.

Siga-nos no Twitter e fique por dentro dos próximos Meetups do UX Lab!

Quer mais conteúdos como este? Se liga no Medium do UX LAB!