Material 3 Expressive: como aplicar tokens de cor, forma e movimento sem quebrar o design system
A atualização do Material Design 3, batizada de M3 Expressive, troca ajustes visuais soltos por tokens de cor, forma e movimento. Para quem já usa o sistema, o desafio é adotar essas peças sem perder consistência entre telas e plataformas.
- Leitura
- 8 min
- Tabelas
- 1
- Fontes
- 1
A atualização do Material Design 3, batizada de M3 Expressive, troca ajustes visuais soltos por tokens de cor, forma e movimento. Para quem já usa o sistema, o desafio é adotar essas peças sem perder consistência entre telas e plataformas.
O problema que o M3 Expressive tenta resolver
Interfaces previsíveis funcionam, mas nem sempre engajam. Foi esse o argumento que o Google usou para apresentar o M3 Expressive, a camada mais recente do Material Design 3, descrita na documentação oficial como uma forma de "construir produtos mais usáveis e engajantes com UX↳UX33 conteúdosUX e IA: Transformando Experiências Digitais com Inteligência ArtificialProduto & UX · jan 2025UX, IA e Front-End: quando experiência, inteligência e código se encontram para criar o futuro digitalProduto & UX · jul 2025Novidades em UX/UI para 2025: O futuro do design de experiências digitaisProduto & UX · abr 2025Ver tudo em Produto & UX → guiada por emoção". Na prática, isso significa cor, forma, tipografia e movimento tratados como decisões de produto, não como retoque de superfície.
Vale uma ressalva antes de seguir: apesar de o tema circular como "personalização por IA↳Inteligência artificial440 conteúdosUX e IA: Transformando Experiências Digitais com Inteligência ArtificialProduto & UX · jan 2025MCP: O que é e por que você vai ouvir falar disso em breve?AI · jul 2025IA generativa e a urgência de reconstruir nossa relação com a verdadeAI · jun 2025Ver tudo em AI →", a documentação oficial do Material 3 (m3.material.io) não detalha nenhum mecanismo de recomendação dirigido por inteligência artificial. O que ela de fato descreve é um conjunto de tokens expressivos, pensados para squads de design e engenharia ajustarem a personalidade visual do produto sem reescrever o sistema do zero.
Cor, forma e movimento viram tokens, não escolhas soltas
A mudança central do M3 Expressive é estrutural: cor, forma e movimento passam a ser tokens versionáveis, e não ajustes manuais espalhados pelo código.
- Cor: o sistema de cores ganhou uma revisão (
styles/color/system) que amplia as combinações possíveis com cores mais vibrantes, segundo a documentação oficial. A cobertura anterior do iMasters sobre o tema já apontou que paletas mais saturadas podem reduzir a margem de contraste garantida por padrão no Material 3 clássico, então vale validar contraste entre temas claro e escuro antes de generalizar a mudança, em vez de assumir que o novo sistema preserva esse equilíbrio automaticamente. - Forma: a biblioteca de formas (
styles/shape) foi ampliada para 35 formas, com morph de forma embutido no próprio token, ou seja, a transição de uma forma para outra já vem definida pelo sistema, não precisa ser animada manualmente. - Movimento: o novo sistema de física de movimento (
styles/motion) é descrito pelo blog oficial como mais fácil de implementar e customizável via tokens, substituindo curvas de easing configuradas uma a uma por componente.
Esses três eixos são o que o blog "Building with M3 Expressive" chama de base da atualização, publicada originalmente na campanha do Google I/O 2025 e ainda referenciada como guia de introdução na página atual do Material 3.
Os componentes que a atualização trouxe
A documentação lista 14 componentes novos ou revisados dentro do pacote M3 Expressive. Três chamam atenção para quem desenha fluxos de ação:
| Componente | O que resolve | Status |
|---|---|---|
| Toolbars | Agrupa ações frequentes, pode ser combinado com um FAB | Novo |
| Split button | Une um botão principal a um menu de ações relacionadas, usando forma e movimento expressivos | Novo |
| Button groups | Organiza botões relacionados com formas que reagem umas às outras | Novo |
| Progress indicators | Permite customizar waveform e espessura do indicador de progresso | Atualizado |
A documentação não detalha comportamento específico por plataforma para cada componente, mas, por tratar forma e movimento como tokens compartilhados do design system, a atualização levanta um ponto de atenção natural para quem mantém produtos em mais de uma stack: vale checar, caso a caso, se a implementação de componentes como o split button se comporta do mesmo jeito em Android↳Android46 conteúdosAndroid push notifications com Quasar Framework, Firebase e integração com WordPressDev (Back & Front) · mai 2019O X do Xamarin Forms – O guia das funcionalidades nativas - Parte 02: AndroidDev (Back & Front) · abr 2019Modularização de AndroidDev (Back & Front) · ago 2019Ver tudo em Dev (Back & Front) → e web antes de assumir paridade automática.
Compose-first: o que muda para quem desenvolve em Android
Em 19 de maio de 2026, o Google publicou no blog do Material Design o post "Material Android is Compose-first", avisando que as atualizações mais recentes do sistema passam a chegar primeiro, e com mais profundidade, pela API em Compose. Quem mantém telas em Views do Android UI toolkit continua recebendo suporte, mas fica de fora do ritmo de novidades.
Para squads que ainda têm uma base grande de código em Views, isso é um critério de decisão concreto: migrar para Compose deixou de ser só preferência de arquitetura e passou a ser pré-requisito para acompanhar o M3 Expressive em Android com os tokens de forma e movimento mais recentes. No mesmo dia, o Google publicou outro anúncio, "What's new at Google I/O 2026", cujo subtítulo reforça que as mudanças do ano miram tornar mais fácil criar "produtos expressivos e adaptativos", mas a documentação disponível não detalha novos mecanismos técnicos além do aviso de migração para Compose.
Como manter consistência sem reescrever o design system
Adotar M3 Expressive sem quebrar consistência entre telas passa por tratar os novos tokens como extensão, não substituição, do que já existe. Um caminho razoável para um design system já maduro:
- Importar a biblioteca de formas e o sistema de movimento como camada adicional de tokens, mantendo os tokens de cor e tipografia atuais como estão até haver motivo de negócio para trocá-los.
- Atualizar o kit do Figma M3 (disponível na Figma Community, mantido pelo próprio Google) antes de tocar no código, para que design e engenharia validem a nova paleta de formas no mesmo artefato.
- Rodar os novos componentes, como toolbars e split button, primeiro em fluxos de baixo risco, checando contraste de cor e foco de teclado antes de generalizar.
- Documentar, token a token, qual componente herdou qual peça do M3 Expressive, para que a próxima pessoa do time não precise adivinhar se uma forma é do sistema antigo ou do novo.
Acessibilidade não é um passo separado nessa lista: formas decorativas com morph automático e indicadores de progresso customizáveis só são aceitáveis em produção se mantiverem contraste mínimo e não dependerem só de cor ou movimento para comunicar estado. É responsabilidade de quem configura o token, não um ajuste posterior.
Quando não vale a pena migrar agora
M3 Expressive compensa quando o produto já usa Material 3 e tem squad de design com capacidade de revisar tokens com calma. Para quem mantém uma base grande em Views no Android e não tem fôlego para migrar para Compose, a atualização de maio de 2026 deixa claro que o suporte às últimas peças do sistema vai ficar defasado, e vale medir esse custo antes de prometer prazo para adotar toolbars, split button ou o novo sistema de movimento.
E, para quem buscava diretrizes de personalização dirigida por IA, a documentação oficial do Material 3 simplesmente não cobre esse território hoje: o que ela entrega é um sistema de tokens expressivos, não um motor de recomendação.
Fonte 1: Documentação oficial Material Design 3 (https://m3.material.io/)
Title: Material Design 3 - Google's latest open source design system
URL Source: https://m3.material.io/
Markdown Content: link
Copy link Link copied
Material at Google I/O 2026
May 19, 2026 Material Android is Compose-first Start migrating to Compose to get the latest from MaterialGoogle I/O 2026 Check out all the announcements, keynotes, sessions, and fireside chats on the main site for Google I/O 2026
M3 Expressive: Design with emotion
Build more usable and engaging products with emotion-driven UX. M3 Expressive adds vibrant colors, intuitive motion, adaptive components, flexible typography, and contrasting shapes.
Updated: Figma M3 Design Kit Quickly create design mockups and prototypes with the latest Material 3 Expressive components and stylesNew: Motion physics Easier-to-implement motion system for more customizable transitions—powered by tokens
Expanded: Shape library New set of 35 shapes to add decorative visual elements, with built-in shape morph motionBlog: Guide to our latest update Get a full introduction to the latest evolution of Material, including new components and style updatesGoogle Design: Making Google Sans Flex How seven design problems shaped Google’s iconic typeface — from inception to going open-source
Expressive components
New: Toolbars Flexible component to display frequently used actions. Toolbars hold a variety of controls like buttons, and can also be paired with a FAB.New: Split button Pair a button with related actions in a connected menu. Split buttons leverage expressive shape and motion strategies.
Updated: Progress indicators An eye-catching way to show the status of a process in real time. Customize waveform and thickness to show progress with style.New: Button groups A new way to organize related buttons—with shape-shifting buttons that bump and react to each otherSee all expressive components Check out all 14 new and updated M3 Expressive components
How to apply M3 Expressive
Blog: Using motion physics Learn how the motion scheme works, the changes to existing APIs, and what you need to know to leverage itWatch: Build with M3 Expressive Discover how to use Material’s emotional design patterns to boost usability and desire for your product
Latest in Material & Google Design
Material Design blog Discover what’s new, tutorials, and inspiration from the Material teamGoogle Design Learn about the craft of design at Google, with articles written by designers and developers, how-to guides, and podcasts
Next steps
Get started Guides, videos, and tools to start building with MaterialFigma M3 Design Kit Customizable styles and components to help you design with Material 3
Develop Code and developer documentation for building with Material
Highlights
- Material Design 3 Expressive trata cor, forma e movimento como tokens versionáveis, não ajustes manuais
- Biblioteca de formas expandiu para 35 opções com morph automático; novo sistema de movimento usa tokens customizáveis
- Google publicou em 19 de maio de 2026 que Material Android é Compose-first: Views fica de fora do ritmo de novidades
- 14 componentes novos ou revisados incluem toolbars, split button e button groups com formas que reagem umas às outras
- Migrar para M3 Expressive sem quebrar consistência passa por tratar novos tokens como extensão, não substituição
Este artigo foi escrito por Yara Uchôa, colunista de UX e product design. Conteúdo produzido por agente de IA da redação iMasters, sob revisão editorial humana. Saiba como produzimos no expediente.
O que os tipógrafos podem ensinar ao designer que teme a IA
Christian Crumlish, criador do assistente de IA Piper Morgan, usa a extinção do tipógrafo de editora nos anos 90 para pensar o que o designer deveria proteger agora, e o que é hora de deixar ir.
