Material Design 3 (chiamato anche Material You) è la terza grande iterazione del design system di Google, lanciata nel 2021 con Android 12 e diventata mainstream nel 2024-2025. Rappresenta la più ambiziosa revisione di Material Design dal lancio originale del 2014: introduce concetti completamente nuovi come il dynamic color, i design tokens formalizzati, e nel 2025 lo stile expressive con animazioni più ricche.
In questo articolo vediamo cosa cambia davvero rispetto a Material 2 (la versione che molti designer ancora confondono con la 3), come funziona dynamic color, perché i design tokens sono importanti, e — la domanda più pratica — quando ha senso adottare M3 nei tuoi progetti.
Cos'è Material Design 3
Material Design 3 è il design system ufficiale Google per Android, ChromeOS, Wear OS e — sempre più — anche per app web sviluppate con Angular o React via Material Web Components. Include:
- Una libreria di componenti pronti (oltre 60 componenti base)
- Un set di design tokens standardizzati (colore, tipografia, motion, elevation)
- Tool ufficiali (Material Theme Builder Figma plugin)
- Linee guida di accessibilità conformi WCAG 2.2
- Pattern di motion ed animation
Le 5 differenze chiave M3 vs M2
1. Dynamic Color (la novità più radicale)
In Material 2, ogni app aveva un set di colori fissi definiti dal brand. In Material 3, i colori dell'app possono essere derivati automaticamente dal wallpaper dell'utente (su Android 12+). Questo è dynamic color: l'app si adatta visivamente alle preferenze dell'utente.
Implementazione tecnica: M3 usa un algoritmo di estrazione che analizza il wallpaper e produce 5 palette tonali (primary, secondary, tertiary, neutral, error) con 13 toni ciascuna. L'app legge questi toni runtime.
2. Design Tokens formalizzati
Material 2 aveva valori CSS-like ad-hoc. Material 3 introduce un'ontologia formale di token a 3 livelli:
- Reference tokens: i valori grezzi (es.
md.ref.palette.primary40) - System tokens: valori semantici (es.
md.sys.color.primary) - Component tokens: valori per componenti specifici (es.
md.comp.button.label-text-color)
Questo permette di cambiare un singolo reference (es. il colore primary) e propagare automaticamente in centinaia di componenti senza touch manuali.
3. Tipografia rivista
Material 3 usa una scala tipografica più espressiva, con 5 ruoli (display, headline, title, body, label) e 3 dimensioni per ruolo (large, medium, small). Risultato: 15 stili tipografici predefiniti vs i 13 di M2, con miglior gerarchia.
4. Shape system
Per la prima volta Material codifica formalmente i border-radius come token (none, extra-small, small, medium, large, extra-large, full). Risultato: i designer possono scegliere "small radius" come categoria invece di "8px" come valore.
5. Expressive style (2024-2025)
Lo stile expressive introdotto nel 2024 con Android 14 enfatizza emozioni e personalità : animazioni più ricche, microinteractions più visibili, transizioni con curve "sproingy". È opzionale (si può rimanere in stile "medium" più sobrio).
Quando adottare Material Design 3
Adottalo se sviluppi per Android
Su Android, Material 3 non è una scelta — è lo standard. Le app che ignorano Material 3 sembrano "fuori posto" sulla piattaforma e non si integrano con il dynamic color del sistema.
Considera con cautela su iOS
Apple HIG (Human Interface Guidelines) ha pattern molto diversi da Material. Un'app Android-style su iOS sembra fuori posto. Se la tua app è cross-platform, valuta UI separate per le due piattaforme o un design system più neutrale (es. Tailwind UI, Shadcn).
Su web puoi sceglierlo
Material Web Components (MWC) sono produzione-ready dal 2023. Sono una scelta valida soprattutto se: sei abituato all'ecosistema Google, vuoi accessibilità garantita out-of-the-box, e il tuo brand può convivere con un look "Google-ish".
Material Theme Builder — il tool fondamentale
Il Material Theme Builder è il plugin Figma ufficiale Google per generare un tema M3 partendo da un colore seed o un'immagine. Il workflow:
- Apri il plugin in Figma
- Inserisci un colore seed (il tuo primary brand color) o carica un'immagine
- Il plugin genera automaticamente le 5 palette tonali (primary, secondary, tertiary, neutral, error)
- Scarica il file Figma con tutti i componenti M3 nei tuoi colori
- Esporta in CSS variables o JSON tokens per il dev team
È free e supportato ufficialmente da Google. Per una rapida prototipazione di nuovi prodotti Android, è il modo più veloce per partire.
Best practice per usare M3 in Figma
- Usa Variables: M3 ha senso se sfrutti Figma Variables (introdotte nel 2023). Senza variables, perdi metà del valore di M3.
- Build per modes: imposta da subito light e dark mode come variables modes — M3 ha entrambi nativi.
- Non personalizzare i componenti: M3 ha pattern ben pensati. Se ti trovi a personalizzare massicciamente, probabilmente è la scelta sbagliata di system.
Alternative a Material 3
Se M3 non è la scelta giusta, considera:
- Apple HIG: per app iOS pure
- Carbon Design System (IBM): per enterprise B2B
- Polaris (Shopify): per e-commerce
- Atlassian Design System: per produttivitÃ
- Tailwind UI / Shadcn: per web custom con controllo totale
Domande frequenti
Material 2 è ancora supportato da Google?
Material 2 è in maintenance mode dal 2022. Riceve solo bug fix critici, niente nuove feature. Tutti i nuovi progetti dovrebbero partire da M3. Migrazione M2→M3 richiede tipicamente 4-12 settimane per app medie.
Il dynamic color funziona anche su web?
Tecnicamente sì se l'utente concede l'accesso al wallpaper via API specifica del browser, ma in pratica nessun browser desktop supporta questa API. Il dynamic color è feature primarily Android.
Posso usare Material 3 con il mio brand color esistente?
Sì. Inserisci il tuo brand color come "seed" nel Theme Builder. M3 genera automaticamente palette derivate che lo rispettano. Il risultato non è esattamente il tuo brand color in tutti i punti, ma è coerente.
Si può usare con React/Next.js?
Sì via due strade: 1) @material/web components (ufficiali Google, web components vanilla); 2) @mui/material (Material UI, third-party basato su React, attualmente compatibile con M2 con M3 in roadmap).
Mi conviene impararlo da junior designer?
Sì, vale la pena. M3 è uno dei design system più documentati al mondo, gratis, e applica principi che valgono in qualsiasi system (token, semantic naming, accessibility). È un buon esercizio anche se non lavorerai mai su Android.
Prossimi passi
Imparare a costruire (e mantenere) design system come Material 3 è skill avanzata di UI Designer. Il Corso di UI & Visual Design di CorsoUX copre design system, color systems, typography scales e Figma Variables in 12 capitoli con 101 lezioni. Mentor 1:1 corregge i tuoi esercizi.
Per approfondire concetti correlati: cos'è un design system, la metodologia Atomic Design e il tutorial Figma in italiano.
