A importância do Design System - PrograMaria

Tema: A importância do Design System

Por Larissa Tobias,

Cobertura da apresentação no Summit por Bruna Gabriele de Paula

O tema Design System também fez parte da segunda edição do Programaria Summit, na segunda parte da trilha front-end apresentada por Larissa Tobias, Front-end Developer no Quinto Andar.

Mas afinal, qual sua a importância e aplicação no ecossistema de desenvolvimento? Respondendo a essa e outras perguntas, a desenvolvedora apresenta parte da sua própria experiência no Quinto Andar ao implementar o Design System com o produto Cozy.

Sim, um produto! Larissa reforça o conceito de que para além da ideia de projeto, adotar um sistema de design envolve adotar um novo formato de “produto”, constituído a partir de todo um conjunto atrelado a design e desenvolvimento a fim de compor uma só linguagem visual do produto.

E na prática? Em que isso agrega? Em muito! Ao nos dar um histórico do contexto antes e depois do Design System, Larissa, torna ainda mais clara essa eficiência, nos mostrando de que forma esse sistema pode melhorar a comunicação e o fluxo entre designers e desenvolvedores, mantendo consistência, reutilização de componentes e, sobretudo, reformulando o produto.

Prepara o produto para crescer de um jeito rápido e sem dor

E o que isso resolve? Resolve por exemplo, retrabalho, por evitar a necessidade de ter que construir do zero, mas além disso, torna os componentes mais consistentes, isto é, componentes que compartilham características de estilo e acessibilidade, mas variam em estado e/ou funcionalidade que no geral podem resultar no nosso velho e conhecido “bug”— só que em dobro —  se tornam mais definidos:

E agora? Qual botão eu coloco aqui?

É justamente por aí que a história começa, como afirma a desenvolvedora, é partindo de uma boa definição de design tokens que se inicia o processo, esses tokens são responsáveis por unir valor e semântica, atribuindo-se nome e valor aos elementos para que posteriormente se convertam em propriedades visuais no design, essa definição foi dada pela designer de produto, Jina Anne. (link: https://www.sushiandrobots.com/about).

Ou, de forma mais direta, como definiu Larissa, é:

Onde vamos ‘guardar’ as decisões de design, como: cores, tipografia, botões, espaçamentos, etc.

E exemplifica a partir do esquema de cores, explicando como era antes e como funciona atualmente no Quinto Andar.

Antes…
O esquema se distribuía entre uma paleta de 77 cores/tons, para uso livre, com regras e contexto pouco definidos, o que, como já foi citado, pode impactar diretamente na documentação e consistência do componente.

Depois…
Uma vez redefinido o esquema, essa distribuição caiu de 77 para um conjunto de 27 cores, composto a partir de contextos, marcas, bem como, orientado a regras de atenção e sucesso. Esse reordenamento nos leva também a outro ponto importante lembrado pela desenvolvedora, onde vemos como Design System está diretamente relacionado ao mindset de acessibilidade do site, a partir de regras e pesos —  botão primário, botão secundário, etc e onde podem estar esses botões —  bem definidos.

Ao se distanciar de um sistema fragmentado de construção do produto, chega-se então a um contexto de integração entre desenvolvimento, design e produto, facilitando processos, melhorando a comunicação e alinhando novos modelos de componentes.

“Progresso ao invés de perfeição”
Tão importante quanto adotar esse modelo é mantê-lo, por isso Design System deve ser pensado como uma dependência do seu projeto, capaz de acompanhar de forma consistente e dinâmica possíveis mudanças, sejam elas de definição, funcionalidade, contexto ou estilo.

Uma dica que Larissa dá nesse sentido é tornar visível, divulgar, fazer releases sobre o tema entre a própria equipe, alinhar e justificar a necessidade do Design System para o contexto da empresa, demostrando como funciona e no quê ele, de fato, impacta.

Como vemos, é um trabalho árduo e gradativo, no qual nem sempre progresso está relacionado com perfeição, por isso, começar com um guia de estilos e, pouco a pouco, evoluir para uma composição de um sistema mais robusto pode ser um caminho mais seguro e sustentável do que tentar importar um modelo consolidado já em andamento.

Nesse caminho, Larissa nos fala sobre como tudo começou até evoluir para o produto Cozy criado pelo Quinto Andar e explica que se dá como uma espécie de repositório compartilhado, onde se define quando determinado componente entra ou não para o conjunto de design, o que é feito a partir de critérios de acessibilidade, reuso e Breaking Changes, isto é, quando já passou por toda uma cadeia de validação.

E assim, ao final dessa jornada Larissa demonstra a importância do Design System reforçando justamente o conceito de produto mencionado anteriormente e nos leva a pensar como reformular um modelo ultrapassa a ideia de “projeto”, principalmente, porque não se fragmenta, não se individualiza, deixa de ser “temporário” para se tornar mais robusto e compartilhado, num contexto onde desenvolvedores e designers estão integrados e alinhados num só “cliente” e principais consumidores desse sistema.