#4-Design System e comunicação
Como ele pode criar uma língua comum entre design e tecnologia?
_________________
Oi,
sou o Thiago Hassu, fundador e CEO da Meiuca. Esse já é o 4º de uma série de artigos. O objetivo é abrir um pouco da nossa visão sobre o assunto e aquecer a comunidade para a nossa Formação Online em Design System & Ops.
Se preferir, volte ao primeiro artigo e garanta uma boa introdução ao tema: “Design System na visão da Meiuca”.
Boa leitura,
🥰
_________________
Como a gente trabalhava antigamente?
Grande parte das pessoas que trabalham com design digital vieram do design gráfico (estamos criando a primeira geração de profissionais nativos digitais agora). Isso contribuiu para a forma como trabalhamos por muito tempo: tela por tela. Pensávamos cada página como uma nova tela em branco, sem levar em consideração o que já estava desenvolvido. Até porque nos softwares de design, criar um botão quadrado, um botão arredondado ou 6 modelos de botão nos dá exatamente o “mesmo trabalho” (ou muito perto disso). Por essas e outras é que sempre fizemos aqueles “ajustes finos” a cada nova tela, sem fazer a mínima ideia de que existia uma folha de estilo controlando a cara de cada um dos elementos da nossa interface do outro lado, por exemplo. E nessa as inconsistências só aumentavam, o tempo de desenvolvimento também.
Podemos dizer que com a chegada do Sketch, abandonamos o Photoshop, vieram os símbolos e “começamos” a entender a importância (e vantagem) de reaproveitar os componentes de uma tela para outra (nessa altura nosso time de tecnologia já estava careca de saber disso e até cansado de tentar nos explicar). Mas ainda assim, todas as infinitas propriedades CSS, por exemplo, continuavam distantes do dia a dia dos times de design. E, por parte do time de tecnologia, continuava impossível prever todas as variáveis que seriam usadas para criar os próximos componentes e manter uma folha de estilo minimamente otimizada. O que restava então era inspecionar o layout e descobrir pixel por pixel, hexadecimal por hexadecimal. E muitas vezes, subscrever o estilo daquele botão que o time de design mandou semana passada, mas que nessa nova tela veio com a sua borda um pouquinho mais arredondada (mesmo sendo um “símbolo” no Sketch).
Nessa altura o mercado começou a se perguntar se designers deveriam saber codar para entender o que estavam fazendo. Foi aí que veio uma luz no fim do túnel: o Design System!
Design Tokens e Componentes
Um Design System é muito mais do que isso, mas podemos entender que esses são aqueles elementos capazes de revolucionar a comunicação entre os nossos times. Entendemos os Design Tokens como nossas “variáveis semânticas de estilo”, todas as opções que você precisa para criar um componente: espaçamentos, arredondamentos de borda, cores e etc. Em outras palavras, funcionam como uma folha de estilo espelhada entre design e tecnologia. Isso já é meio caminho andando.
Depois de definir nossos Design Tokens juntos, passamos a projetar e desenvolver o que chamamos de Base Componentes a partir deles e, então, unimos em Componentes (aqueles mais complexos). Para dar o ritmo vertical e auxiliar nessa composição, usamos os Design Tokens de espaçamento.
Importante: quem popularizou o conceito dos Design Tokens foi a Salesforce, indico dar uma olhadinha no Lightning Design System (o Design System deles) e entender como aplicam por lá.
O que isso muda na nossa comunicação?
Em primeiro lugar, deixamos de lado a inspeção pixel por pixel (o que fazia cada tela uma “inédita obra de arte”) e passamos a trabalhar a partir de padrões, tanto para variáveis, quanto para componentes. E tem ainda a nomenclatura de tudo isso, devidamente alinhada entre design e tecnologia.
Esse fatores fazem com que a magia aconteça: o layout vira apenas uma base de referência entre design e tecnologia, um documento para indicar qual componente queremos usar em qual contexto.
E aí, meus amigos e amigas, é quando passa a ser possível até mesmo “ditar” (isso, de ditado) uma interface. Conseguimos descrever, Design Token por Design Token, componente por componente, como uma tela deve ser. A partir daí, passamos então a finalmente falar a mesma língua.
:)
_________________
O que vem por aí?
Além da impacto na comunicação, no próximo artigo vamos falar sobre como um Design System pode ajudar a revolucionar os seus processos e mudar definitivamente a forma como trabalhamos.
Nos vemos em breve!
