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.