Introdução

Eu lembro que, quando ouvi falar pela primeira vez de design system, foi de uma forma totalmente aleatória em um artigo na internet sobre padronização de layouts para interfaces digitais. Minha memória não é muito clara sobre o contexto do assunto que me levou a ter interesse em pesquisar sobre isso, mas o que eu não consigo esquecer é que, naquele momento, senti uma curiosidade enorme, que logo se transformou em entusiasmo quando eu descobri a existência desse conceito.

Se eu parar para pensar hoje, era bem óbvio que seria algo criado uma hora ou outra, porque existem produtos longos, com interfaces complexas, e, com certeza, seria necessário criar um meio de padronizar tudo isso, já que facilitaria muito o trabalho das pessoas que criam esses produtos. Mas, para a minha surpresa, conforme fui estudando, notei que se tratava muito mais do que padronização visual — que era só um pedaço do enorme quebra-cabeça que é o design system. E a minha diversão só estava começando.

Atualmente, no Brasil, essa área tem se popularizado muito, e diversas empresas que atuam com tecnologia passaram a perceber que isso não era um simples bônus, mas uma necessidade real. À medida que o negócio cresce, mais pessoas começam a se interessar e a consumir os produtos ou serviços da marca, que, por sua vez, precisa cumprir sua missão de manter e melhorar a experiência dessas pessoas naquilo que elas se propuseram a fazer. E, mesmo que o design system não seja o produto com o qual essas pessoas usuárias vão interagir diretamente, ele terá o papel fundamental de fidelizar cada vez mais o público com a marca e será responsável por proporcionar uma experiência de usabilidade única e memorável.

Pense no que seria de uma big tech como o Google — empresa que possui uma variedade enorme de produtos e é responsável tanto pelo maior buscador do mundo quanto pelo sistema operacional mais usado em dispositivos móveis — se não tivesse o seu design system: o Material Design. Uma das grandes vantagens de utilizar os serviços do Google, como o Gmail, o Drive, o Calendar ou o Photos, está nas similaridades e facilidades de uso entre eles. Afinal, depois de aprender a usar um desses produtos, utilizar qualquer outro se torna muito mais fácil — mesmo que tenham funções diferentes. Existe uma identidade clara nos posicionamentos, interações, nomenclaturas, elementos visuais e até mesmo na acessibilidade.

Por ser algo relativamente novo, principalmente no nosso país, é necessário promover a conscientização para que todas as pessoas que atuam com tecnologia compreendam que um design system não apenas facilita e agiliza o desenvolvimento de um produto, como também contribui para a fidelização do público.

Além disso, é preciso ter ciência de que um design system, apesar de ter design no nome, não é feito nem mantido somente por designers, mas sim por uma equipe multidisciplinar, que dedica atenção contínua à sua evolução. Por essa razão, este livro não se destina apenas a designers. Ele também não é um guia prático sobre como criar seu design system em ferramentas de prototipagem, nem indica quais linguagens de programação devem ser utilizadas para implementá-lo.

A proposta aqui é apresentar os conceitos essenciais para quem atua com design system — conhecimentos que vão muito além do ferramental. Afinal, quando lidamos com fundamentos, desde a definição de uma paleta de cores até a elaboração da documentação de uso, não faz sentido limitar o conteúdo a plataformas específicas.

Por fim, a motivação principal em publicar este livro é para que exista, de fato, uma interface-guia que ensine, para todos os níveis profissionais, com teorias e práticas, sobre a construção e evolução de um design system do início ao fim. Já vi surgirem muitos cursos e e-books brasileiros relacionados a esse tema, mas a área ainda carece de abordagens aprofundadas, que abordem os conteúdos reais, as bases de criação, referências e bons casos de uso.

Por isso, espero que, com este livro, qualquer pessoa que tenha o mínimo interesse na área de design system possa aprender mais, se desenvolver e — o mais importante de tudo — evoluir como profissional e levar todo o conhecimento para as práticas diárias.

Para quem é este livro

Como já vimos, este livro não foi feito somente para designers. Ao longo da leitura, você vai perceber que a linguagem é pensada para qualquer pessoa que tenha o mínimo interesse em saber como um design system é levantado e mantido — seja você designer, programador(a), gestor(a) que atua em um time de design system ou alguém que apenas quer conhecer mais sobre o assunto.

Quero ressaltar ainda que este livro foi pensado para profissionais de todos os níveis de experiência. Seja você uma pessoa em início de carreira (júnior), com alguma experiência (pleno), com bastante bagagem (sênior) ou até mesmo em uma posição de liderança, cada capítulo foi escrito com o cuidado de trazer detalhes que realmente contribuam para o seu aprendizado. O objetivo é preparar você para os desafios práticos do dia a dia de quem trabalha com design system.

Estrutura de estudo

É sempre bom frisar que um design system não nasce da criação direta de interfaces no Figma, nem mesmo por linhas de código. Embora a visão de fora possa parecer simples, há uma série de definições importantes que precisam ser tomadas antes da construção propriamente dita.

Não basta querer ter um design system. Antes mesmo de iniciar o processo, é crucial passar por determinados processos, para garantir que qualquer tomada de decisão seja assertiva e não ocorra a necessidade de voltar atrás.

Para isso, organizei este livro em seis partes, passando não só pelo conceito de design system, mas também pelas etapas de construção e evolução.

Parte 1 - Entendendo o design system

Na primeira parte, o foco será o entendimento definitivo do que é um design system. Das seis partes do livro, esta é a menor, mas ainda assim essencial para compreender o restante do conteúdo. Ela garante que você saiba o que é um design system e quais problemas ele se propõe a resolver.

Parte 2 - Planejamentos iniciais

Como eu já mencionei, a construção de um design system não deve iniciar pelo Figma. Nesta segunda parte, você entenderá melhor quais planejamentos e processos você e sua empresa devem tomar para "organizar a casa" corretamente e começar com as definições corretas.

Parte 3 - Processos de governança

Quem vê de fora pode pensar que um design system vive e respira apenas de aspectos visuais, mas esse produto só funciona de fato com a implementação dos processos de governança. A terceira parte abordará alguns desses processos, como princípios de design e responsabilidades da equipe, que garantem transparência, responsabilidade e eficiência na tomada de decisões.

Parte 4 - Estilos e design tokens

Todo design system precisa de informações que caracterizam o aspecto visual dos elementos, como cores e tipografia, de forma que sejam totalmente escaláveis. A quarta parte foca na acessibilidade do seu produto, nos principais estilos trabalhados e em como podemos alavancar isso com os design tokens.

Parte 5 - Componentes e microinterações

Componentes são blocos reutilizáveis de interface, como botões ou campos de texto, que encapsulam funcionalidade e estilo, facilitando a construção e manutenção de interfaces de usuário consistentes. Nessa parte, você entenderá a definição completa, as classificações e como trabalhar com as microinterações dos componentes.

Parte 6 - Boas práticas de documentação

Finalizamos o livro com a sexta parte, encerrando o ciclo inicial com a documentação do seu design system. Você entenderá qual a importância da documentação para os colaboradores, quais informações são indispensáveis e as melhores práticas para sua produção.

Parte 7 - Conclusão

Aqui deixo referências para você aprofundar suas pesquisas, recomendações de materiais e eventos, a lista das ferramentas mencionadas no livro, bem como a bibliografia consultada.

O autor

Eu trabalho com design de produtos digitais desde 2016, embora, na época, eu me apresentasse como 'web designer', em vez de “product designer”. Aprendi a programar aos 16 anos e, após dois anos projetando pequenos sites institucionais, descobri a área de User Experience em uma das aulas do curso de Design da UniSatc, no qual me graduei em 2020. Foi ali que tudo mudou.

Ao longo da minha carreira, colaborei na construção de inúmeros sites e aplicativos, como o green4T e o Studio Velocity. Em 2019, diante da necessidade de trazer padrões e reduzir o tempo de desenvolvimento em uma das empresas onde atuei, criei um design system junto de um amigo e colega desenvolvedor. Desde então, essa disciplina passou a ser a minha principal área de trabalho e estudo.

Com o tema ganhando cada vez mais popularidade, ajudei na construção e na gravação dos cursos da primeira formação de design system da Alura, em 2021, o que não só alavancou, mas também deu início à minha carreira como professor e mentor. Já produzi cursos sobre UX, UI, UX Writing e Research, que, somados, já ultrapassaram os 15 mil alunos matriculados.

No ano seguinte, ingressei na Locaweb como Senior DesignOps para atuar na construção do design system da empresa, com o desafio de expandir o design system para as outras empresas da LWSA. Atualmente, sou um dos responsáveis pela aplicação e adesão do design system na Locaweb e na KingHost.