Módulo 4 · 1 de 6
Material, HIG e Fluent: três exemplos relevantes
Leitura: ~5 min
Você está desenvolvendo um aplicativo. Abre o Material Design, encontra um componente bonito de navegação, aquele FAB (Floating Action Button) redondo no canto inferior direito, e coloca no seu projeto. O protótipo fica moderno, você apresenta para o cliente. Ele olha e diz: "Mas isso é um app para iPhone."
Você congela. O que tem de errado? Acontece que, no iOS, aquele padrão não faz parte das HIG. Usuários de iPhone só encontram FABs em apps que importam a linguagem do Material (como os do próprio Google), e é por isso que ele soa estrangeiro no sistema. A navegação nativa do iOS acontece por tab bars na parte inferior e gestos de swipe. Você usou a gramática errada para o idioma errado.
Pois bem, esse tipo de erro acontece mais do que você imagina, e acontece porque muitos designers conhecem componentes, mas não conhecem o sistema por trás deles. Vamos resolver isso agora.
O que é um design system (e por que você deveria se importar)
Se "design system" parece intimidante, pense assim: é só um acordo do time sobre como as coisas devem parecer e funcionar. Você já segue acordos assim todo dia.
Pense comigo: quando você aprende um idioma, você não aprende apenas palavras. Você aprende a gramática, a sintaxe, as regras de quando usar cada expressão. Você sabe que em português o adjetivo geralmente vem depois do substantivo ("casa bonita"), mas em inglês vem antes ("beautiful house"). As palavras podem até ser parecidas, mas a estrutura é diferente.
Um design system funciona do mesmo jeito. Ele não é apenas um kit de componentes: botões, cards, barras de navegação. Ele é a gramática visual e interativa de uma plataforma. Define como os componentes se comportam, como se relacionam entre si, qual a lógica de espaçamento, tipografia, cores e movimento. E assim como misturar gramáticas de idiomas diferentes gera confusão, misturar padrões de design systems diferentes gera uma interface que o usuário sente que está "errada", mesmo sem saber explicar por quê.
Para entender como isso funciona na prática, vamos olhar três exemplos relevantes que você vai encontrar na sua carreira.
Material Design 3 (Google)
O Material Design, criado pelo Google, está atualmente na sua terceira geração, o Material Design 3. A grande evolução do M3 é a personalização: ele introduz o conceito de dynamic color, onde a interface se adapta às cores do papel de parede do usuário (a ideia que ficou conhecida como Material You). Além disso, o M3 trouxe componentes redesenhados com cantos mais arredondados e uma tipografia mais expressiva. Em 2025 o M3 ganhou a atualização Material 3 Expressive (Android 16 e Wear OS 6), com animações mais vivas e formas e tipografia ainda mais expressivas: é essa a versão que os usuários de Android veem hoje.
Use Material Design quando estiver projetando para Android, apps que usam Flutter, ou produtos do ecossistema Google (Chrome OS, Wear OS). É o padrão que usuários de Android esperam, e seguir esses padrões reduz a curva de aprendizado do seu app.
Human Interface Guidelines, HIG (Apple)
As HIG da Apple são o guia de design para iOS, macOS, watchOS, e mais recentemente, visionOS (o sistema do Apple Vision Pro). Em 2025 a Apple reformulou sua linguagem visual com o Liquid Glass (iOS 26): materiais translúcidos que refratam o conteúdo por baixo, guiados por princípios de hierarquia, harmonia e consistência. A essência, porém, permanece: o conteúdo vem primeiro. Na prática, isso se traduz em navegação por tab bars, uso intenso de gestos como swipe e long press, e uma estética que prioriza o conteúdo sobre a decoração.
Se você está projetando para iPhone ou iPad, as HIG não são só uma sugestão: são o que o usuário de iPhone espera encontrar. Apps que ignoram esses padrões tendem a parecer estranhos para esse usuário e a ser abandonados por quem sente que o app "não parece de iPhone".
Fluent Design (Microsoft)
O Fluent Design System, atualmente na versão Fluent 2, é o sistema da Microsoft para Windows, Microsoft 365 (o antigo Office) e Teams. Seus princípios incluem luz (como elementos reagem à iluminação), profundidade (camadas e sombras), movimento e material (como o efeito acrílico de transparência). Se você trabalha com produtos corporativos que rodam em Windows ou se integram ao ecossistema Microsoft, Fluent é a referência.
Quando usar cada um?
A regra é simples: siga o sistema operacional do seu usuário. App para Android? Material Design 3. App para iOS? HIG. Produto corporativo Windows? Fluent. Produto web que roda em qualquer plataforma? Você tem mais liberdade, mas ainda assim vale usar um desses como base e adaptar. O erro é pegar componentes de um e usar no contexto do outro sem critério.
E como esses sistemas se organizam por dentro, peça por peça? Esse é o assunto da próxima página.
Checagem rápida
Sem nota, sem pressão. Responda de cabeça e depois abra para conferir.
Seu time vai lançar o mesmo produto em três frentes: um app Android, um app iPhone e um painel corporativo que roda no Windows. Qual design system você usa de base em cada um?
Pegadinha: o design system continua sendo um só, o seu. Material 3, HIG e Fluent não são o seu design system, são as convenções de cada plataforma. O que você faz é manter uma fundação comum (tokens de cor, tipografia, espaçamento, os componentes da sua marca) e adaptar a gramática de navegação e os controles ao que cada sistema operacional espera: Material 3 no Android, HIG no iPhone, Fluent no painel Windows. É assim que o Spotify trabalha, com uma base de tokens compartilhada e subsistemas por plataforma, e é assim que a própria Microsoft entrega o Fluent 2, uma linguagem só com bibliotecas separadas para Web, iOS, Windows e Android. Manter três design systems paralelos triplicaria a manutenção e dissolveria sua marca em três caras diferentes.
Um colega colocou um FAB (aquele botão redondo flutuante) na tela do app de iPhone e acha que ficou moderno. Por que isso soa estranho para quem usa iOS?
Porque o FAB é um componente nomeado do Material Design, onde ele representa a ação principal da tela, e não existe equivalente nas HIG da Apple. No iPhone a ação principal vive na toolbar, do lado direito: é o "+" que o Mail usa para "Nova mensagem", por exemplo. A tab bar de baixo é reservada para navegar entre seções, e as HIG são explícitas nisso, dizendo que se você precisa de um controle que age sobre a tela atual, use uma toolbar. Repare que não é questão de "botão flutuante ser feio": no iOS 26 as próprias barras flutuam sobre o conteúdo. O que destoa é usar um componente que carrega a gramática de outra plataforma. O usuário de iOS não sabe nomear a regra, mas sente que o app "não parece de iPhone", é como conjugar um verbo de outro idioma no meio da frase.