Get started

New to Material Design? Get started with this introduction to our guidelines, components, and key concepts. Use this page to find resources for setting up your environment, implementing Material Components, and theming them to match your brand.


Design

Guidelines

The Design section of the site covers our philosophy and principles for key topics such as Layout, Color, and Typography. The Components section offers detailed guidance and specifications for using our components.

Material Theming covers how the components can be customized for different brands and products needs.

Composition of design elements (left to right) representing the components, layout, and typography sections of Material Design.

Design files

Download components and adjust theming styles for color, typography, and elevation. Files available: Sketch, Figma (in Baseline and Dark themes), and Adobe XD (maintained by Adobe).

Note: These downloads are available under Apache 2.0. By downloading these files, you agree to the Google Terms of Service. The Google Privacy Policy describes how data is handled in this service.

Examples

Material studies are example apps created by the Material Design team to demonstrate how components and theming can be used to create beautiful, usable apps.


Android

Setup

The Android Getting Started page in our documentation explains how to set up your environment, what repositories are required, how to inherit from our theme, and how to add components.

Tutorials

Abstract composition of interface elements with Bugdroid, the Android mascot, in the center.

Examples

The Material Android Examples Github repository contains source code for demo applications built using the MDC-Android library and showcases customizations of color, typography, and shape made with Material Theming.

To preview all components available in the MDC-Android library, run the catalog module in Android Studio or by running the following Gradle command:

./gradlew :catalog:installDebug


iOS

Setup

Material Components for iOS use the standard iOS toolchain: Xcode and CocoaPods, the open-source dependency system. Use the Build environment page in our documentation for Xcode settings and supported library versions to maximize compatibility with our source.

Tutorials

Abstract composition of iOS-like elements including the Back action.

Examples

To preview all components available in the MDC-iOS library, build and run the catalog.


Web

Setup

The Web Getting Started page in our documentation explains how to quickly setup using a CDN or install components locally using npm. It also includes information on bundling the Sass and JavaScript from MDC Node modules using a bundler such as webpack.

To start exploring Material Components and Theming without setting up an environment, remix one of the Material Starter Kits on Glitch.

Framework support: MDC Web is adaptable to various major web frameworks such as Angular, Vue, and React. Take a look at our Framework Wrappers page for a list of available wrapper libraries.

Abstract representation of a web page with open menu.

Tutorials

Examples

Take a look at the Material Design page on Glitch, featuring projects and examples of Material Components and Theming in use.


Flutter

Setup

Flutter comes bundled with Material Design widgets that work on mobile, web, and desktop. All available Material Components can be found in Flutter's Material Components catalog.

To start using them in your app, add:

import package:flutter/material.dart

Tutorials

Abstract composition of shapes and interface elements including the Flutter logo, FAB, and switch component.

Examples

The Flutter Gallery (Web, Android, Desktop) is a gallery with example apps, widget demos, and a Material Design template, all of which can be used in your own Flutter apps. The source code is available on Github and includes more examples.