Components-based, responsive UI library with unique smart architecture for your design acceleration

Material Design System for Figma

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
  • Guided with descriptive documentation / onboarding
  • Made to fit for both of desktop & mobile applications
  • Material & custom design modules fitted to 8dp grid with following to guidelines
  • 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

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

Now with web API

Material Design System made exclusively for Figma - free design and development platform. It enables apps, websites and internal tools to integrate directly with the realtime state of design in Figma from a robust Web API and open JSON format.

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

This design system consists of 25 sections

Click on image for full-size preview
Application bars & headers
Buttons & filtering
Bottom navigation
Cards templates
Charts constructor & builder
Chips & badges
Master colors & backgrounds as components
Datepickers & timepickers
Dialogs constructor
Expansion panels
Huge material icons pack included as components
Lists items & settings items
Devices layouts for quick start
Menus & dropdown items
Misc. elements. Sliders, switches, snackbars, avatars and more
Navigation drawers & sidebars
Placeholders & engagement
Selection & option items
Steppers & walkthrough
Text fields & inputs
Tables constructor
Tabs for navigation

over 1682 components total

And more prototyping modules made of

Application bar, Headers, Buttons, Filtering, Bottom navigation, Cards, Charts constructor, Chips, Badges, Colors & backgrounds, Date & timepicker, Dialogs constructor, Expansion panels, Grid lists, 1171 material icons, Lists, Layouts whiteframes (mobile, tablet, desktop), Menus dropdown, Navigation drawers, Selection items, Snackbars, Steppers, Text fields & inputs, Tables constructor, Tabs, Typography, Template examples