Design system guidelines

Documentation for Material Design System 2.0 for Figma

Getting started

Introduction

Installation

Components

Typography

Typography section fits latest 2018 material.io specifications

Icons

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

Style

🔎 Click on the image to zoom in

Colors

Elevation

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

Stroke

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

Dividers

Layout

Basics

Grid

Hidden

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

Templates

Components

Overview

You can add any of components to the canvas almost without ‘Components’ tab

Structure

Source file of isometric input is here

Scalability

Learn more about multicomponents in this post

Text capacity

It’s easy to convert single input into multi-line text area

Demos

Open in browser
Open in browser
Open in browser
Open in browser

Summary

Get started with Setproduct Figma UI libraries

Top-notch Figma templates — setproduct.com