Icons

This icons package available separately. Learn more how to get it

This design system contains 1000+ material icons set built-in. In purpose of getting rid of importing SVG icons in your every project, every icon converted into component and organized carefully into 40 categories. It’s recommended to toggle between icons by ‘Instance’ dropdown.

Every icon equipped with background component and masked color layer. Thus you can recolor whole set at once.

Style

🔎 Click on the image to zoom in

From this section you’re about to control, manage or mass-customize the details for the whole system. It’s recommended to toggle stroke, background and elevation within Instances to keep proper interrelationships between master and subcomponents for further mass-customization.

Colors

For the purpose of theming there are 5 colors used. Base colors is: Light, Dark, Primary and Accent. Gradient color is considered as optional. Mostly every UI item or widget contains background component connected to master-color. Thus you can quickly set a new palette for the project you’re about to start with design system. You can pick any material color here, or use official material.io color tool

Tip: you can add more colors to the system, by cloning one of the existing, setting new name, individual properties and converting into the component. Then always toggle to it by Instance.

Elevation

By default Figma Material System contains slightly improved shadows with reflex and with the goal of delivering more smooth style and clearness. This improvements fits material.io elevation approach, but differs. If you wish to set original elevation, please refer to Elevation in Material Design section and set exact properties manually for master-components. This way you’ll spread new shadow styles over all widgets:

This method fits to control all the shadows for the system: dialogs, cards, menus, etc.

Stroke

In purpose of flexibility every stroke is separated into master-component and toggles within Instance between: Light, Dark, Primary, Accent or Disabled style. Note: light stroke recommended to use on dark surfaces. For example stroke component integrated in both of Ghost buttons and Text fields. Customizing will affect changes for all the widgets where outline layer exists. This is the principle of design system architecture.

Tip: you can add more different custom stroke styles, e.g. dashed, dotted or bolder than 1px. Use the same approach as adding custom color

Primary stroke component exists in ghost buttons, dark stroke integrated into text fields and etc.

Dividers

Dividing master-component used for visual separation. There are few available: simple line and dashed. Second is custom and used more rarely. For example it embedded both into Navigation drawer subheader element and List item. Once customized, it will affect for all UI modules where dividers exist.

Tip: you can add or reduce more opacity to master-divider to make it more visible through all the system

Layout

Basics

This system was developed in purpose of helping you to build high-fidelity prototypes for web and mobile apps. To collaborate with your devs team more more effective, it’s recommended to use official material.io react-components or third-party frameworks like material-ui-next.com. Figma Web API convenient here as well.

Grid

Every component from the system precisely crafted into 8dp grid with ultra attention to guidelines. Thus you can fit any widget from the system into Bootstrap grid when necessary. When building your layouts please refer to Material breakpoint specs to develop full-responsive apps and use proper amount of columns and gutter indents.

Hidden

Some components (especially lists-like) contains hidden elements to be more informative for users. For example, Nav drawer item contains both of numeric badge and simple label with counter. Every icon contains hidden background, to convert it into the button for further export. Cards may contain additional icons at the corner and etc. Inputs contain right-aligned icon and used sometimes to increase the meaning. Always expand the widget at the layer panel and explore for hidden little details.

Enable hidden items for all sub-components at once or select specific one and toggle visibility individually

Templates

This system equipped with 60+ mobile and desktop layouts and templates to help you startup your project faster than ever before. Most frequent patterns from material.io examples converted into Figma workflow, properly constrained and full-responsive. The last thing to do is pick it up and integrate into your artboard with further customization according your project needs.

Components

Overview