Design Systems: exemplos práticos

Design Systems: exemplos práticos
Natan Souza
Natan Souza

Compartilhe

Saiba o que é Design System e confira exemplos práticos

Um dos desafios quando falamos em desenvolvimento de produtos digitais é manter a consistência conforme as equipes mudam ou crescem, dentro da empresa. É aí que entra o Design System, unificando toda a linguagem do produto. Descubra o que é Design System, conheça bons exemplos de sistemas publicados e, por fim, confira algumas recomendações de outros conteúdos dentro do tema.

Banner de divulgação da Imersão IA da Alura em colaboração com o Google. Mergulhe em Inteligência artificial com a Alura e o Google. Serão cinco aulas gratuitas para você aprender a usar IA na prática e desenvolver habilidades essenciais para o mercado de trabalho. Inscreva-se gratuitamente agora!

O que é Design System?

Design System é uma coleção de componentes reutilizáveis, padronizados para determinado produto, site ou sistema web. Diferente de um style guide (guia de estilos), um design system vai além: o design system unifica a linguagem de um determinado produto.

Encare o design system não como um projeto, mas como um produto interno da empresa, que precisa de pessoas que o atualizem enquanto desenvolvem soluções novas, novos componentes, novos guias de estilo. De botões arredondados e snippets de códigos à concepções de aplicação de marca, tom de voz de texto e o microcopy.

Exemplos de Design Systems

Como a definição de design system ainda é viva, o ideal é enxergar exemplos conhecidos na comunidade, que possuem seu sistema publicado:

Stack Overflow

O Stack Overflow possui um Design System com padrões que vão de classes CSS, uso de marca e até mesmo e-mail marketing. Muito completo e é um exemplo bastante conhecido na comunidade de UX e Design:

Acesse: https://stackoverflow.design/

Design System Spectrum da Stack Overflow

Adobe Spectrum

Na seção sobre cores do Design System da Adobe, ela se preocupa com o modo noturno da aplicação.

Acesse: https://spectrum.adobe.com/

Design System Spectrum da Adobe

Claro Mondrian

Exemplo brasileiro, a Claro também fez seu próprio Design System, inclusive com bibliotecas em React de componentes específicos que eles criaram e usam:

Acesse: https://mondrian.claro.com.br

Design System Mondrian da Claro

Design Systems – Hipsters Ponto Tech #170

Para ganhar um pouco mais de contexto sobre o assunto, ouça esse episódio do Hipsters Ponto Tech, em que Cynthia Magalhães, Vitor Guerra e Guilherme Gonzales conversam com os hosts Roberta Arcoverde e Paulo Silveira sobre os benefícios que vem com o método:

Ouvir um pouco de:
Design Systems – Hipsters #170

Design Systems com Charles Assunção da Microsoft

Neste vídeo o Paulo Silveira, junto com o Charles Assunção da Microsoft, conversam sobre como Design Systems unem as necessidades de devs e designers:

Mais referências

Natan Souza
Natan Souza

Atualmente projeto, ensino e lidero UX / Product Design na Alura Cursos Online de Tecnologia.UX Designer e desenvolvedor front-end com um histórico de quatro anos em ensinar.Desenvolvimento de interfaces web e sua implementação front-end, desde o HTML/CSS, projetando protótipos de alta fidelidade e testes com usuários.

Veja outros artigos sobre UX & Design