Components-based, responsive design kit with unique smart architecture to design faster and prototype smarter

Material Design System for Figma

Updated with latest guidelines from Google 2018 I/O

Application and bottom bars
Backdrop templates
Material nabigation drawer

60

App templates

1K

Material icons

450

UI components

What's inside?

Contains most recent guidelines and new material components

Application bars & headers

Components section

Buttons & filtering

Bottom navigation

Cards templates

Charts constructor

Chips & badges

Colors & Backgrounds global

Datepickers & timepickers

Dialogs constructor

Grid list builder

Material icons

Lists items & settings items

Layouts for devices

Menus & dropdown items

Misc. elements

Navigation drawers & sidebars

Placeholders & engagement

Selection & option items

Snackbars & notifications

Steppers & walkthrough

Text fields & inputs

Tables constructor

Tabs navigation

Typography & fonts properties

UI items

16

71

12

18

50

41

15

17

21

12

1171

15

3

14

26

28

7

14

4

14

28

11

42

20

Expansion panels

12

Features

  • Design system for Figma made of nested components for quick cross-customization
  • Recently updated with 2018 material guidelines
  • Made to fit for both of desktop & mobile applications
  • Material & custom design modules fitted to 8dp grid
  • Perfect organized for quick prototyping using Figma 'Instance' features
  • Web API available for real-time app integration. View docs

For product, UI / UX designers

Stop creating from scratch the same buttons, icons and modules along with every new project started. Use this huge library of predefined UI modules to complete your tasks faster.

For web / app developers

This system will let you dip into design process, learn or enhance prototyping skills. Use Figma 'Instance' feature to create layouts. No reason to edit pixels manually, unless you want to go deeper in customization.

For IT managers / entrepreneurs

Achieve more goals with accelerated development. Simply equip your team with this library in Figma environment and watch how your product began to grow faster than before.

For product, UI / UX designers
For web / app developers
For IT managers / entrepreneurs
Every design module is responsive. With care of little details, for every component constraints were set properly in advance

Scalable & Responsive

A few clicks required to sign up with Google account, or you can register using e-mail. Figma is free!
Get your Figma account
Download desktop app
Figma works under Windows, Mac or directly in your browser. And it works well with .Sketch files
Drag'n'drop .FIG files
Once you've purchased any of Setproduct item, you have to simply drop it into Figma workflow
Go to Components tab
Then just press Alt+2 or click on 'Components' tab at the left bottom of the screen. You now good to go!

Start right now!

It's easy to migrate from Sketch or Photoshop to Figma.
Start using Material Design System right now

Left
Right

Your guaranteed timesaver

This product was developed by the designer who tired of creating tons of the same components when started a new project. Material Design System will help to get rid of UI routine and design headaches forever.

Meet multicomponents! Rapid prototyping as never before

Use full power of Figma instances

You can switch between predefined states and styles via "Instance" menu through the system within few clicks. Apply desired visual changes to the master-component, then spread it to all sub-elements in the system at once. Easy game!

All states pre-designed: default, active, error, focused and more

Organized for usability

Whole team library is paginated into 25 sections. Every component is labeled with care and purpose to make the quickstart and navigation more easier.

Organized for easy quickstart. 25 categories of components

With export to CSS • XML • Swift

Developers' handoff integrated! Go to 'CODE' tab in Figma and export everything you need.

Sign in predefined component in Material Design system
Registration pre-designed module in Material Design system
Figma code export to Swift iOS
Figma code export to Android
Figma code export to CSS
This is predefined Sign up module ready to use in your next prototype

Zeplin & Avocode integration supported

Take a quick tour

Please, go to Components section for full preview