Muita gente tem falado muito sobre Design System nos últimos tempos. Tanto em palestras de eventos grandes quanto meetups um pouco menores.
Esse post é um compilado de uma visão pessoal do que é isso. Pode (e vai) bater com a definição que está no “dicionário de UX”.
Confira neste post:
TL;DR
Não há um padrão para o termo, o que é irônico, mas gira em torno de algo assim:
Natan Souza
Design System é uma coleção de componentes padronizados pré-estabelecidos e bem documentados para ajudar a desenvolvermos produtos com mais eficiência e consistência.
É um produto(!) orgânico que serve a empresa inteira, padronizando toda sua comunicação, interna e externa. Batendo desde padrões de cores e tipografia quanto padrões de tom de voz em newsletters, aplicações de marca, nomenclatura de CSS, etc.
Problemas que um design system resolve
- Inconsistências de UI (interface de usuário);
- Trabalho não eficiente em times grandes de design;
- Falta de comunicação em times multidisciplinares.
O que ele pode ser:
- Biblioteca do Adobe XD;
- Lista de componentes no Figma;
- Site com vários componentes em HTML/CSS prontos;
- Manual de identidade visual.
Se você tem um desses itens acima e está chamando de design system, na real talvez seja. A pergunta que você precisa fazer é: estou entregando com eficiência a consistência que preciso?
Os padrões que defini sozinho no meu Figma podem não adiantar muita coisa para o time de front-end. O arquivo PDF com o manual da marca pode não ser muito útil para o time de marketing quanto você pensa.
Primeiros passos
Para que você quer começar um design system? Você quer realmente resolver um problema ou só estar na moda e lançar o nomeBacana.suaempresa.com?
Começaria pensando juntamente com seu time nos princípios que vocês almejam que os produtos da empresa tenham. Interessante não envolver só designers, mas pessoas técnicas e de marketing podem dar bons insights nessa hora.
Na empresa onde trabalho quando estávamos começando chegamos nesses para um produto B2B:
- Escalável
- Rápido
- Simples
- Sério
Usar o canvas Design Principle Pyramids, criado pelo designer Guilherme Gonzales pode te ajudar nisso. Alguns design systems têm como princípios itens como acessibilidade, beleza, divertido, etc.
Próximos passos
Se o produto já estiver no ar, usaria o ferramenta de UX Superposition para pegar os padrões já existentes de uma forma rápida. Outra dinâmica interessante nesse ponto seria imprimir as telas, organizar os componentes (botões, títulos, etc) em grupos e já identificar as inconsistências presentes.
Os tais dos design tokens entrariam aí. Pense em um design token como uma característica visual de algo. Um exemplo é o exato hexadecimal usado nos botões de um site. Esse hexadecimal e a nomenclatura dessa cor é um design token.
Exemplos de Design System
- Mondrian, da Claro
- Lightning, da Salesforce
- Material Design, da Google
Como está sendo o processo do desenvolvimento do design system na sua empresa? Quais os problemas que você já esbarrou?