Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support

Material UI

Find every Material UI element and component to help create the best mobile UI designs for Android.

Start prototyping for free
All the material UI kit components on the Framer canvas.

Free Material UI components

Material is a design system from Google to help teams build and design interfaces for Android, iOS, Flutter, and the web. These Material components cover a wide range of interface cases across desktop and mobile devices.

For example, you will find cards, lists, and sheets that can be used for displaying content, as well as, navigation drawers and tabs to create interactions for your users to move through an app or website.

Open template in Framer
Material UI Icon set

Material UI icons at your fingertips

Create a mobile prototype in minutes with status bar icons, drag and drop UI elements, and building blocks. The system icons from Material Design are created to be simple and friendly. You can find a Material icon for any use case by searching the library by icon keyword. The icons from Material design are bold and geometric to ensure they are easy to read at any size across all interfaces.

Open template in Framer

Fully interactive Material UI templates

Connect the Material kit components with transitions and interactions for truly functional prototypes. Use Magic Motion to transition from one screen to the next by creating a link from a Material UI button to the next screen in your prototype. It's easy to create any Material UI designs using icons and UI elements combined with interactivity.

Open template in Framer

Start designing your next app or website.

Free design tool

Framer is your all-in-one tool for designing anything for free.

From UI to UX

In Framer you can design how features will work, not just how they look.

Design together

Work on projects together with real-time collaboration.

Material UI elements

A Material kit for React developers

This UI kit was created specifically for Material UI, a popular React UI library with a comprehensive set of components. The Material kit is just as helpful for developers who want to spin up beautiful and accessible interfaces without relying on designers. Preview how everything looks before coding, use the properties panel to adjust styles, and the transition editor to design animations.

Open template in Framer

Discover more templates

Choose from a range of ready-to-use templates to save time and jumpstart any project, design, or wireframe.

View all templates
Scrolling preview.
Tab bar preview.
iOS Kit preview.
Retrospective preview.
Presentation preview.
Input Form preview.
Paging preview.
Photo preview.
Video player preview.
Material UI Kit preview.
Portfolio preview.
User Story Map preview.
Dashboard preview.

Framer

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • Input Kitnew
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement