Lenguaje de diseño expresivo de Material 3
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Material 3 Expressive (M3) se creó para satisfacer la demanda de los usuarios de experiencias modernas, relevantes y distintivas. Expressive también permite a los diseñadores reflejar emociones y sentimientos específicos en el diseño y la presentación de la interfaz.
Color y tipografía
El sistema de color se expande para adoptar las paletas de tonos más profundas de M3 y un conjunto de tokens más amplio, y la escala de tipografía más simple utiliza ejes de fuentes variables para una mayor expresión, lo que hace que las interacciones sean más expresivas y agradables.
Temas de color
Los nuevos tokens permiten aplicar más colores en diferentes temas y en el contexto del sistema de diseño en su totalidad.
Fuentes variables
Las consideraciones actualizadas para las fuentes variables y sus ejes personalizables se extienden más allá de 1P para también satisfacer casos de uso de 3P, como Roboto Flex, que tiene un conjunto similar de ejes variables.
Eje de fuente variable en movimiento
Se utiliza el eje de fuentes variables para indicar comentarios de movimiento expresivos y hacer que las interacciones sean más expresivas y agradables de usar.
Ejemplos de casos de uso:
- Grosor de fuente dinámico
- Ancho de fuente dinámico
- Grosor y ancho de fuente dinámicos
Roles de escritura
Junto con una escala de escritura actualizada y optimizada, también presentamos nuevos roles de escritura que satisfacen específicamente patrones notables en Wear.
Estos nuevos roles de tipo admiten varios casos de uso, como texto de Arc para títulos de superficies, contenido proactivo con espacio en vivo y un rol de tipo específicamente para números, que permiten tamaños de texto más grandes y con más estilo para cadenas que no necesitan localización.
Forma y movimiento
También nos enfocamos en el lenguaje de formas de una manera mucho más expansiva y significativa, ya que utilizamos formas de contenedores flexibles para aplicar el redondeo y el afilado del radio de las esquinas, lo que permite admitir listas de transformación de formas y estados de botones. Presentamos los botones que se ajustan a los bordes como un nuevo patrón de diseño icónico y propio para dispositivos redondos en Wear.
Contenedores que se ajustan a los bordes
Presentamos los contenedores de forma que adoptan la forma redonda y maximizan el espacio dentro del factor de forma circular.
Se aplicó la forma
Usar radios de esquina y formas únicas como contenedores para adoptar un diseño expresivo, que se extiende a animaciones de carga agradables, diseños interesantes, botones con transformación de formas y grupos de botones adaptativos
Radio de esquina
Se utilizan formas de esquinas de Material 3 para permitir la variedad, la distinción y la relación entre las formas de los contenedores.
Contenedores agrupados
Los contenedores de componentes usan técnicas de diseño flexibles para adaptarse de forma dinámica al espacio disponible. Pueden distribuir este espacio de manera uniforme para lograr simetría o bien organizar los elementos de forma estratégica para establecer una jerarquía visual, enfatizar el contenido importante y guiar la interacción del usuario a través de indicadores visuales expresivos y basados en el movimiento.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-07-27 (UTC)"],[],[],null,["# Material 3 Expressive design language\n\nMaterial 3 Expressive (M3) was built to meet user demand for experiences that\nare modern, relevant, and distinct. Expressive also allows designers to mirror\nspecific emotions and feelings in the layout and presentation of the interface.\n\nColor and typography\n--------------------\n\nThe [color system](/design/ui/wear/guides/styles/color/system) is expanding to adopt M3's deeper tonal palettes and a\nwider token set and the simpler typography scale is utilizing variable font axes\nfor more expression, making interactions more expressive and delightful.\n\n### Color theming\n\n\nThe [new tokens](/design/ui/wear/guides/styles/color/roles-tokens) allow for more color to be applied across different themes\nand in context of the design system as a whole. \n\n\u003cbr /\u003e\n\n### Variable fonts\n\n\nThe updated considerations for variable fonts and their customizable axis,\nextend beyond 1P to also serve 3P use cases such as Roboto Flex, which has a\nsimilar set of variable axis. \n\n\u003cbr /\u003e\n\n### Variable font axis in motion\n\n\nUtilizing variable font axis to signal expressive motion feedback and making\ninteractions more expressive and delightful to use.\n\nExample use-cases:\n\n- Dynamic font weight\n- Dynamic font width\n- Dynamic font weight and width \n\n\u003cbr /\u003e\n\n### Type roles\n\n\nAlong with an updated and optimized type scale, we are also introducing new type\nroles that specifically serve notable patterns on Wear.\n\nThese new type roles support several use cases---including Arc Text for surface\ntitles, proactive content with live space, and a type role specifically for\nNumerals---that allow for bigger and more styled text sizes for strings that don't\nneed to be localized. \n\n\u003cbr /\u003e\n\nShape and motion\n----------------\n\nWe are also leaning into shape language in a much more expansive and meaningful\nway by utilizing flexible container shapes to apply rounding and sharpening of\ncorner radius to support shape morphing lists and button states. We're\nintroducing edge-hugging buttons as a new ownable and iconic design pattern for\nround devices on Wear.\n\n### Edge-hugging containers\n\n\nIntroducing shape containers that embrace round and maximize the space within\nthe circular form factor. \n\n\u003cbr /\u003e\n\n### Shape applied\n\n\nUsing corner radius and unique shapes as containers to embrace expressive design\n---extending to delightful loading animations, interesting layouts, shape-morphing\nbuttons and adaptive button groups. \n\n\u003cbr /\u003e\n\n### Corner radius\n\n\nUtilizing Material 3 corner shapes to enable variety, distinction, and\nrelationship between container shapes. \n\n\u003cbr /\u003e\n\n### Grouped containers\n\n\nComponent containers use flexible layout techniques to dynamically adapt to\navailable space. They can distribute this space evenly for symmetry, or\nstrategically arrange elements to establish visual hierarchy, emphasize\nimportant content, and guide user interaction through expressive and motion-lead\nvisual cues. \n\n\u003cbr /\u003e"]]
