Material Design 3 (también conocido como Material You) es la tercera gran iteración del design system de Google, lanzada en 2021 con Android 12 y consolidada entre 2024-2025. Representa la revisión más ambiciosa de Material Design desde su lanzamiento original en 2014: introduce conceptos totalmente nuevos como el dynamic color, los design tokens formalizados y, a partir de 2025, el estilo expressive con animaciones más ricas.
En este artículo, analizamos qué cambia realmente respecto a Material 2 (la versión que muchos diseñadores aún confunden con la 3), cómo funciona el dynamic color, por qué los design tokens son importantes y —la pregunta más práctica— cuándo tiene sentido adoptar M3 en tus proyectos.
¿Qué es Material Design 3?
Material Design 3 es el design system oficial de Google para Android, ChromeOS, Wear OS y —cada vez más— también para aplicaciones web desarrolladas con Angular o React a través de Material Web Components. Incluye:
- Una librería de componentes listos para usar (más de 60 componentes base)
- Un conjunto de design tokens estandarizados (color, tipografía, movimiento, elevación)
- Herramientas oficiales (el plugin de Figma Material Theme Builder)
- Guías de accesibilidad conformes a WCAG 2.2
- Patrones de movimiento y animación
Las 5 diferencias clave: M3 vs. M2
1. Dynamic Color (la novedad más radical)
En Material 2, cada app tenía un conjunto de colores fijos definidos por la marca. En Material 3, los colores de la app pueden derivarse automáticamente del fondo de pantalla del usuario (en Android 12+). Esto es el dynamic color: la app se adapta visualmente a las preferencias del usuario.
Implementación técnica: M3 utiliza un algoritmo de extracción que analiza el fondo de pantalla y produce 5 paletas tonales (primary, secondary, tertiary, neutral, error) con 13 tonos cada una. La app lee estos tonos en tiempo de ejecución.
2. Design Tokens formalizados
Material 2 tenía valores ad-hoc similares a los de CSS. Material 3 introduce una ontología formal de tokens en 3 niveles:
- Reference tokens: los valores brutos (ej.
md.ref.palette.primary40) - System tokens: valores semánticos (ej.
md.sys.color.primary) - Component tokens: valores para componentes específicos (ej.
md.comp.button.label-text-color)
Esto permite cambiar un único token de referencia (ej. el color primario) y propagar el cambio automáticamente a cientos de componentes sin intervención manual.
3. Tipografía revisada
Material 3 utiliza una escala tipográfica más expresiva, con 5 roles (display, headline, title, body, label) y 3 tamaños por rol (large, medium, small). El resultado: 15 estilos tipográficos predefinidos frente a los 13 de M2, con una mejor jerarquía visual.
4. Sistema de formas (Shape)
Por primera vez, Material codifica formalmente los border-radius como tokens (none, extra-small, small, medium, large, extra-large, full). El resultado: los diseñadores pueden elegir "radio pequeño" como categoría en lugar de "8px" como valor.
5. Estilo expresivo (2024-2025)
El estilo expressive, introducido en 2024 con Android 14, enfatiza la emoción y la personalidad: animaciones más ricas, microinteracciones más visibles y transiciones con curvas "elásticas" (sproingy). Es opcional (se puede mantener un estilo "medium" más sobrio).
Cuándo adoptar Material Design 3
Adóptalo si desarrollas para Android
En Android, Material 3 no es una opción, es el estándar. Las apps que ignoran Material 3 se ven "fuera de lugar" en la plataforma y no se integran con el dynamic color del sistema.
Úsalo con cautela en iOS
Las HIG (Human Interface Guidelines) de Apple tienen patrones muy diferentes a los de Material. Una app con estilo Android en iOS se siente extraña. Si tu app es multiplataforma, valora crear interfaces separadas o usar un design system más neutro (ej. Tailwind UI, Shadcn).
En la web, es una opción viable
Los Material Web Components (MWC) están listos para producción desde 2023. Son una opción válida, sobre todo si estás acostumbrado al ecosistema de Google, quieres accesibilidad garantizada de serie y tu marca puede convivir con un look "muy Google".
Material Theme Builder: la herramienta clave
El Material Theme Builder es el plugin oficial de Google para Figma que permite generar un tema M3 a partir de un color base o una imagen. El flujo de trabajo es:
- Abre el plugin en Figma
- Introduce un color base (tu color primario de marca) o sube una imagen
- El plugin genera automáticamente las 5 paletas tonales (primary, secondary, tertiary, neutral, error)
- Descarga el archivo de Figma con todos los componentes M3 en tus colores
- Exporta los tokens como variables de CSS o JSON para el equipo de desarrollo
Es gratuito y tiene soporte oficial de Google. Para prototipar rápidamente nuevos productos para Android, es la forma más rápida de empezar.
Buenas prácticas para usar M3 en Figma
- Usa Variables: M3 cobra todo su sentido si aprovechas las Figma Variables (introducidas en 2023). Sin ellas, pierdes la mitad de su valor.
- Diseña para modos: configura desde el principio los modos claro y oscuro (light/dark mode) como variables. M3 los soporta de forma nativa.
- No personalices los componentes en exceso: M3 tiene patrones muy bien pensados. Si te ves personalizándolos masivamente, probablemente M3 no sea el sistema adecuado para tu proyecto.
Alternativas a Material Design 3
Si M3 no es la opción correcta para ti, considera estas alternativas:
- Apple HIG: para apps nativas de iOS
- Carbon Design System (IBM): para productos B2B enterprise
- Polaris (Shopify): para e-commerce
- Atlassian Design System: para herramientas de productividad
- Tailwind UI / Shadcn: para webs a medida con control total
Preguntas frecuentes (FAQ)
¿Sigue Google dando soporte a Material 2?
Material 2 está en modo de mantenimiento desde 2022. Solo recibe correcciones de errores críticos, pero no nuevas funcionalidades. Todos los proyectos nuevos deberían empezar con M3. La migración de M2 a M3 suele llevar entre 4 y 12 semanas para una app de tamaño medio.
¿Funciona el dynamic color en la web?
Técnicamente sí, si el usuario concede acceso al fondo de pantalla a través de una API específica del navegador, pero en la práctica ningún navegador de escritorio soporta esta API. El dynamic color es una función principalmente de Android.
¿Puedo usar M3 con los colores de mi marca?
Sí. Introduce el color principal de tu marca como color "semilla" (seed) en el Theme Builder. M3 generará automáticamente paletas derivadas que lo respetan. El resultado no será exactamente tu color de marca en todas partes, pero sí será coherente.
¿Se puede usar con React o Next.js?
Sí, por dos vías principales: 1) los componentes @material/web (oficiales de Google, son web components puros); 2) @mui/material (la popular librería Material UI, de terceros y basada en React, que actualmente es compatible con M2 pero tiene M3 en su hoja de ruta).
¿Merece la pena aprenderlo como diseñador junior?
Sí, totalmente. M3 es uno de los design systems mejor documentados del mundo, es gratuito y aplica principios que son válidos para cualquier sistema (tokens, nombres semánticos, accesibilidad). Es un gran ejercicio incluso si nunca trabajas en Android.
Próximos pasos
Aprender a construir (y mantener) design systems como Material 3 es una habilidad avanzada para un UI Designer. Nuestro Curso de UI & Visual Design cubre sistemas de diseño, sistemas de color, escalas tipográficas y Figma Variables en 12 módulos con 101 lecciones. Un mentor 1:1 corrige tus ejercicios.
Para profundizar en conceptos relacionados: qué es un design system, la metodología Atomic Design y nuestro tutorial de Figma en español.
