Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
About Material Design
Material Design is Google's open-source design system, currently in its third major version (Material 3), for building user interfaces across platforms. It provides guidelines, UI components, and tools intended to streamline collaboration between designers and developers when building products. The system includes a design kit for Figma alongside code and developer documentation for implementation.
The latest evolution, M3 Expressive, focuses on emotion-driven UX and adds vibrant colors, an adaptive motion system, flexible typography, and contrasting shapes. It introduces or updates components such as toolbars, split buttons, progress indicators, and button groups, along with an expanded shape library of 35 shapes supporting shape-morph motion.
Material Design supports development across Android (including Jetpack Compose, which is now the primary path for Android), Flutter, and the web. It is aimed at designers and developers building user interfaces, with resources including a design blog, developer guides, and archived versions of earlier Material Design releases (1 and 2).
Key features
- Open-source design system with guidelines, components, and code for building UIs
- M3 Expressive components including toolbars, split buttons, progress indicators, and button groups
- Figma M3 Design Kit for creating design mockups and prototypes
- Motion physics system with token-powered, customizable transitions
- Shape library with 35 shapes and built-in shape morph motion
- Libraries for Android Compose, Flutter, and Web
Frequently asked questions
What platforms does Material Design support?
Material Design provides libraries for Android Compose, Flutter, and Web.
Is Material Design open source?
Yes, Material Design is backed by open-source code.
Who is Material Design for?
It is designed for teams of designers and developers who want to collaborate and quickly build beautiful, usable products.
Does Material Design offer design tools?
Yes, it offers a Figma M3 Design Kit with customizable styles and components for creating mockups and prototypes.
What is M3 Expressive?
M3 Expressive is the latest evolution of Material Design that adds vibrant colors, intuitive motion, adaptive components, flexible typography, and contrasting shapes for emotion-driven UX.
Show your product to thousands of developers
· 100k monthly pageviews
· 7k newsletter subscribers
You might also like
Luqum
Library/Open SourceLuqum is a Python library for parsing Lucene query expressions and converting them into structured Elasticsearch DSL queries. It helps developers safely interpret, transform, and analyze Lucene style search syntax without hand rolling parsers.
Mantine
Library/Programming/UIReact components and hooks library with native dark theme support and focus on usability, accessibility and developer experience.
Markstream
Library/Open Source/UIStreaming Markdown renderers for AI chat interfaces across Vue, React, Svelte, Angular, Nuxt, and Next.js, with diagrams, math, code, and safe HTML.
Material-UI
Library/Programming/UIReact components for faster and easier web development. Build your own design system, or start with Material Design.
Materialize
Library/Programming/UIMaterialize is a modern responsive CSS framework based on Material Design by Google.
morris.js
Library/ProgrammingMorris.js is the library that powers the graphs on http://howmanyleft.co.uk/. It.
