Material 3 Expressive muda tokens de movimento e cor: o que revisar no Figma
A documentação oficial do Material Design detalha como os tokens de movimento baseados em física, a paleta mais vibrante e as novas formas do M3 Expressive afetam acessibilidade e o handoff de design systems no Figma.
O site oficial do Material Design, m3.material.io, descreve o M3 Expressive como a camada "emotion-driven" do Material 3: cores mais vibrantes, movimento guiado por física, componentes adaptativos, tipografia flexível e formas de contraste mais acentuado. A proposta nasceu no Google I/O de maio de 2025 e segue recebendo atualizações: o Figma↳Figma3 conteúdosFigma Dev Mode funciona mesmo? Testando na práticaDev (Back & Front) · mar 2025Claude Design: nova aposta da Anthropic contra Figma e MicrosoftProduto & UX · abr 2026A importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Ver tudo em Produto & UX → M3 Design Kit aparece listado como atualizado na documentação oficial, e um post publicado em 19 de maio de 2026 reforça que o Material para 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) → agora é "Compose-first". Não é uma chegada repentina, é um conjunto de mudanças que já está em produção há mais de um ano e que squads de design system ainda estão absorvendo.
Para quem mantém biblioteca própria no Figma, isso não é só "trocar a pele visual". A documentação lista 14 componentes novos ou atualizados no ciclo Expressive, entre eles Toolbars, Split button, Button groups e uma reformulação dos Progress indicators com waveform e espessura customizáveis. Cada um desses carrega tokens que não existiam na versão anterior do kit, e ignorá-los significa que a biblioteca da equipe já está desalinhada com a referência oficial sem que ninguém tenha percebido.
De duration e easing para física de mola
A mudança mais estrutural, e a que mais quebra handoff tradicional, é no sistema de movimento. O Material historicamente especifica transições com dois valores simples: duração em milissegundos e uma curva de easing. É assim que redlines de design ficaram padronizadas por anos: "300ms, ease-in-out".
O post "Using motion physics", linkado na própria página do Material, descreve um sistema de "motion physics" guiado por tokens, com mudanças explícitas nas APIs existentes. Em vez de duração fixa, o movimento passa a responder a parâmetros de física, como rigidez e amortecimento, pensados para produzir a sensação de "bounce" (quique) que caracteriza o Expressive.
Na prática, isso tem três consequências diretas para quem desenha e documenta componentes:
- Specs antigas ficam incompletas. Uma anotação de "200ms ease-out" não descreve mais o comportamento real do componente; é preciso documentar os parâmetros da física (não apenas tempo e curva).
- Plugins de handoff e geração de código via 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 → podem não entender o token novo. Se a ferramenta de Dev Mode, Anima ou qualquer assistente de design-to-code só sabe ler
durationeeasing, o código gerado volta para uma transição genérica em CSS e perde a identidade de movimento do Expressive. - A biblioteca de variáveis do Figma precisa de uma nova categoria de token, separada da estrutura de cor e espaçamento que já existe, para guardar esses parâmetros de física de forma que o time de engenharia consiga consumir sem reinterpretar manualmente.
Formas que se transformam, cor mais vibrante, contraste em risco
A biblioteca de formas também cresceu: a documentação fala em 35 formas, com morph de forma embutido no próprio componente. Um botão pode mudar de formato durante uma interação sem que isso seja uma animação à parte, é parte do token do componente. Combinado com uma paleta de cor descrita como mais vibrante, o resultado visual é mais expressivo, mas também mais arriscado do ponto de vista de contraste.
Em resumo: vibração visual e conformidade com WCAG puxam para direções opostas, e a documentação do Material não resolve esse conflito por você. Cores de sistema mais saturadas, pensadas para engajamento emocional, podem reduzir a margem de contraste que paletas mais conservadoras do Material 3 "clássico" garantiam por padrão. Squads que adotarem a paleta Expressive sem reauditar pares de cor texto/fundo correm o risco de herdar uma regressão de acessibilidade junto com o visual novo.
O morph de forma embutido levanta a mesma questão para quem lida com sensibilidade a movimento. Uma transição de forma mais pronunciada que uma simples troca de ícone tende a ter amplitude maior que o motion token clássico do Material, o que torna a variante de prefers-reduced-motion não opcional: não basta zerar a duração, é preciso desligar ou atenuar a intensidade da física também, senão o efeito "quique" continua presente mesmo com a flag ativada.
O kit do Figma mudou, mas a biblioteca do seu time não muda sozinha
O Figma M3 Design Kit, disponibilizado como arquivo de comunidade oficial, foi atualizado para incluir os componentes e estilos do Expressive. Isso resolve o problema de quem começa um projeto do zero, mas não resolve o problema de quem já tem uma biblioteca forkada ou customizada rodando em produção há meses.
Nesses casos, o trabalho é de auditoria manual: comparar componente por componente do kit atualizado contra a biblioteca interna, identificar quais dos 14 componentes novos/atualizados fazem sentido para o produto, e decidir deliberadamente o que entra e o que fica de fora, em vez de herdar tudo por inércia. Vale lembrar também que a tipografia ganhou um capítulo à parte: a fonte variável Google Sans Flex foi aberta como parte dessa mesma onda, e qualquer sistema de design que ainda trava em pesos fixos de fonte perde a flexibilidade que o Expressive pressupõe.
Compose-first: um sinal para quem faz handoff com IA
O post de 19 de maio de 2026 que anuncia o Material Android como "Compose-first" não é só uma nota para times de Android. Ele sinaliza onde a equipe do Material está investindo prioridade de API, e isso importa para quem usa ferramentas de design-to-code assistidas por IA.
Se a implementação de referência dos novos tokens (física de movimento, formas morfáveis) nasce primeiro em Compose, é razoável esperar que plugins e assistentes que geram código web a partir do Figma fiquem um passo atrás na cobertura desses tokens específicos. Antes de confiar cegamente em código gerado automaticamente a partir de um componente Expressive, vale checar manualmente se a ferramenta realmente interpretou o token de física ou se apenas aproximou para uma transição CSS genérica.
O que colocar na lista de revisão
Para um squad que já usa Material 3 e está decidindo se adota o Expressive agora, a checklist prática que emerge da própria documentação é:
- Auditar os 14 componentes novos/atualizados contra a biblioteca interna do Figma.
- Redefinir a estrutura de tokens de movimento, saindo de duration/easing para os parâmetros de física documentados no blog de motion theming.
- Rodar um novo ciclo de teste de contraste nas cores vibrantes do sistema expressivo, não assumir que o que passava no Material 3 "padrão" continua passando.
- Definir a variante de
prefers-reduced-motionpara o morph de forma e para a física de movimento, não só para durações. - Validar manualmente a saída de qualquer pipeline de handoff com IA nos componentes que usam os tokens novos, antes de confiar no código gerado.
Nenhum desses pontos aparece como aviso explícito na página inicial do Material Design, eles ficam implícitos na forma como a documentação descreve as mudanças. É exatamente esse tipo de lacuna que separa adotar o Expressive só no visual de adotá-lo de forma que não quebre acessibilidade nem o contrato entre design e engenharia.
Fonte 1: Material Design 3 (site oficial) (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
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.
Ferramenta de IA não dá a um founder o julgamento que falta
O discurso do founder solo que faz tudo sozinho com IA confunde duas coisas: conseguir produzir um produto e saber se esse produto é bom. São competências diferentes, e só a segunda decide quem sobrevive depois do MVP.
