Material Design: por que grandes empresas usam o sistema

Material Design é um sistema de design aberto que o Google publicou em 2014 (em inglês). Ele entrega a um time um conjunto compartilhado de diretrizes, componentes e código para construir interfaces. Empresas grandes adotam porque um sistema público poupa um trabalho que elas teriam que refazer sozinhas.

O que o Material Design é e que problema ele resolve

Sistema de design é um acordo escrito sobre como uma interface se comporta. O Material Design cobre cor, tipografia, forma, movimento e um conjunto de componentes como botão, card e barra de navegação. O próprio site, o Material Design 3 (em inglês), se descreve como “o sistema de design de código aberto do Google”.

Ele resolve dois problemas: retrabalho e cada time indo para um lado. Sem uma referência comum, cada time escreve o próprio botão, a própria escala de espaçamento e a própria regra para o estado desabilitado. No fim, a pessoa precisa reaprender a mesma interface em cada produto que abre.

Por que o Google criou

O Google anunciou o Material Design em 25 de junho de 2014, na Google I/O, com Matías Duarte, então vice-presidente de design, no palco. Antes do Material, o Google tinha um refresh visual só para web chamado Kennedy. O objetivo, na história das eras do Material contada pelo próprio Google (em inglês), era fazer Gmail, Chrome, Android e o resto parecerem uma família só. O mesmo relato registra o time começando com seis designers e cerca de 200 produtos, números que são a contagem do próprio Google, não uma medição externa.

A metáfora era papel. Os designers cortaram ícones em papel de verdade para estudar sombra e imprimiram telas em folhas grandes para revisar. As regras de movimento vieram de observar papel deslizando até parar. O projeto teve até nome de trabalho, Quantum Paper.

O Google conta essa história como a de quem abriu o próprio trabalho para todo mundo. No mesmo relato da própria história (em inglês), um designer do time original escreve que, em um ano, mais de um milhão de produtos da loja Android usavam partes do sistema.

O que mudou do Material 1 para o 2 e o 3

O Material 1 durou de 2014 a 2017, apoiado na física do papel, em grades rígidas e em superfícies mínimas. O lema interno era que movimento carrega significado.

O Material 2 durou de 2018 a 2020 e preencheu as lacunas. A própria história das eras (em inglês) registra mais de 20 componentes desenhados e apenas um ou dois implementados em código, na contagem do Google. O Material 2 entregou componentes codificados, testou acessibilidade em foco de teclado e contraste de cor, e abriu o tema (em inglês). A analogia do time era uma caixa de Lego: uma base, e a marca de cada um por cima.

O Material 3, também chamado de Material You (em inglês), chegou em 2021 com o Android 12 e foi na direção da expressão: tipo variável, formas ecléticas, cor forte e movimento vivo. O próprio Google afirma (em inglês) que ele chegou a bilhões de celulares e tablets Android, uma afirmação da empresa sobre si mesma. O Material 3 Expressive veio em maio de 2025, e a documentação do Android liga a versão ao visual do Android 16.

Os princípios que sobrevivem a toda versão

Cor, tipografia e forma continuam sendo os três botões. A documentação do Material 3 no Android diz que um tema tem exatamente esses subsistemas, e que mexer em qualquer um deles se espalha por todos os componentes.
Movimento explica estado. O Material 1 tirou as regras de movimento da física do papel. A pesquisa do Google sobre o Material 3 Expressive (em inglês) lista movimento entre as partes fundamentais do design expressivo, junto com cor, forma, tamanho e contenção.
Uma base de código, várias marcas. O Material 2 abriu o tema para times externos manterem a mesma base e aplicarem a própria identidade.

A própria ideia de consistência mudou. Uma série de filmes do Google Design sobre o Material You pergunta se consistência precisa significar uniformidade.

Por que empresa grande adota um sistema público

O piso já está construído. Quem adota parte de componentes testados em muitos produtos, idiomas e tamanhos de tela.
A manutenção é dividida. Outra pessoa acompanha mudança de plataforma, orientação de acessibilidade e formato novo. Quem adota paga a camada de ajuste, não a base.
O vocabulário é público. Designers, desenvolvedores e gente nova apontam para os mesmos nomes documentados.
O caminho de código é oficial. O Jetpack Compose implementa o Material 3 no Android, e o Flutter tornou o Material 3 a linguagem de design padrão dos widgets na versão 3.16.

O que se ganha e o que se perde

Você ganha velocidade até a primeira entrega, acessibilidade herdada e uma interface que o usuário já reconhece.

Você perde singularidade quando a camada de tema fica fina. Os próprios pesquisadores do Google (em inglês) abriram o trabalho do Material 3 Expressive em 2022 com uma pergunta direta sobre por que os apps do Google pareciam “tão iguais” e “tão chatos”. Um sistema público faz desse resultado o padrão.

Você também perde o controle do roteiro. A passagem do Material 2 para o Material 3 mudou o modelo de tema, e times com customização profunda tiveram que migrar.

Quando adotar é a decisão errada

Quando a interface é o produto. Se a interação é o diferencial, uma biblioteca de componentes compartilhada achata justamente a parte que vende.
Quando a convenção da plataforma é o requisito. Usuário de iOS e de Android espera coisas diferentes, e um sistema feito para um pode brigar com o outro.
Quando ninguém pode cuidar da camada de ajuste. Tema é um segundo sistema em cima do primeiro, e tema sem dono apodrece.
Quando o encaixe é errado desde o começo. Ferramenta densa de desktop e app de consumo no celular têm necessidades diferentes.

A decisão cabe numa regra curta. Adote quando o ganho for velocidade em trabalho que não é o seu diferencial. Construa quando a interface em si for o que o cliente paga para ter.

Uma versão menor da mesma decisão, medida em devoluções, está no post da voltagem.

Onde a pesquisa diverge do post

Três artigos do Nielsen Norman Group contradizem afirmações feitas acima.

O NN/g define sistema de design como um conjunto de padrões para gerir design em escala (Design Systems 101 (em inglês)). Essa definição descreve o sistema que a empresa constrói e mantém, enquanto este post trata do sistema que a empresa adota pronto, e o custo migra para a camada de ajuste.

O segundo artigo diz que defender consistência e padrões não significa que tudo deva parecer e se comportar igual (Consistency and Standards (em inglês)). A afirmação acima, de que um sistema público torna o resultado igual e sem graça como padrão, é justamente o que o NN/g nega.

O terceiro artigo mostra que produto atraente é percebido como mais usável, antes de qualquer tarefa ser medida (The Aesthetic-Usability Effect (em inglês)). Este post trata identidade visual como custo de singularidade, e o NN/g dá à camada visual um efeito que aparece antes de qualquer medição.

O guia dá assunto para mais de um texto. Os eixos dele estão destrinchados em textos próprios: tokens e tema, cor e papel de cor e tipografia. Cada um aprofunda uma parte sem repetir este post.