Design system guidelines
Documentation for Material Design System 2.0 for Figma
Getting started
Introduction
Thanks for choosing Figma Design System. With this article you’ll be guided through the benefits and advantages to learn better how to operate within UI components and use full power of nested symbols and flexibility of customization in Figma environment.
Installation
Whether you are experienced Figma user or about to migrate from Sketch or Photoshop, after getting FIG source files you have to perform several actions to quickstart the usage:
- Get your Figma account
A few clicks required to sign up with Google account, or you can register using e-mail. Figma is free for individuals.
- Download desktop app
Figma works under Windows, Mac or directly in your browser. And it works well with .Sketch files. You can import your previous sources from Sketch.
- Drag and drop source file
After the file was opened successful it’s recommended to duplicate and keep the backup copy for every new project.
- Go to ‘Components’ tab
Use left bottom icon or just press Alt+2 key until components get preloaded. Now you’re good to go and start prototyping!
Components
This design system offers more than 450+ responsive components to deliver ultra fast prototyping opportunities. Here’s the list (in alphabetical order) of material design elements paginated into 22 sections:
- Application bars: Top, Bottom, FAB overlapped, FAB inserted, Desktop bars, Extended, Caption centered and more
- Backdrop: 6 pre-made templates included
- Bottom navigation: 3 / 4 / 5 items, Light & Dark
- Buttons: Flat, Outline, Icon buttons, Container buttons, FAB, Toggle, Social and Custom buttons
- Cards: more than 20 different card templates
- Chips: Default, Selected, Contact chips, Icon chips, Rows of chips
- Color components: Light, Dark, Gradient, Primary Accent
- Dialogs: Alert, Confirmation, Feedback, Choice, With inputs, Sign in / up widgets, Selection, Account, Full-screen dialog
- Elevation components: Card, Dropdown, Dialog
- Expansion panels: Collapsed, Expanded, Disabled, Panels with subcaption
- Image lists: Contains components for desktop & mobile grids
- Lists: Single line, List with switch, List with caption, Double caption, Settings module, Thumbnailed lists
- Menus: Contains many components for any dropdown menu
- Miscellaneous: Snack bars, Sliders, Phone pars, Placeholders, Notifications, Tooltips, Avatars, Badges and more
- Navigation drawer: Consists of dark, light, primary and accent variants
- Onboarding: 3 templates included
- Pickers: Calendar double, Datepicker, Timepicker, Monthpicker and more
- Selection: Checkbox list item, Radio item, Checked & Selected states, Dropdown selection modules, Switches
- Sheets: Side & Bottom, 3 / 4 / 6 items, Filters module
- Steppers: Vertical, Horizontal, Prev / Next footer
- Stroke components: Light, Dark, Gradient, Primary Accent, Dividers
- Tables: 40 / 48 / 56 dp components to build any kind of
- Tabs: Dark, Light, Icon tabs, Icon & Caption, Desktop outline tabs, Analytics tabs, Scrollable
- Text fields: Material classic, Outlined, Desktop, Search and more
- Typography: H1, H2, H3, H4, H5, H6, Body 1, Subtitle 2, BUTTON, Body 2, Caption, O V E R L I N E
Typography
Roboto font is used by default. There are several type master-components declared in the system to match material.io font specifications. If you wish to set your custom you have to perform the customization within Typography & Colors section. Thus you’ll replace the font globally in every widget or item where’s any label exists, because the architecture bases on nested components.
Icons
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
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:
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
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.
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
As mentioned above the system contains 450+ design components paginated into 22 categories and organized on the top level to make browsing within components more usable. Once you learned the structure well (usually it takes few hours of usage) you can significantly accelerate your workflow and toggle components by Instance despite the type of it. For example, to toggle between default input and focused, or to clone text field and convert it into card. It’s much more faster than default drag and drop method:
Structure
Due to smart architecture mostly every widget in the system contains at least a few nested parent components to deliver flexibility of customization. For example Text field consists of Primary & Dark color background component. In purpose of keeping inheritance recommended to always toggle background by Instances (this recommendation also fits for Typography, Stroke, Icons and other elements). However, you can always perform recoloring simple using ‘Fill’ and color picker, but notice thus the instance will be detached automatically.
Scalability
This system delivers maximum potential to use objects which are used as seamless in most applications. Lists, tabs, tables and more mostly cloned placed together in a row or column and repeating. This principle called as ‘Multicomponent’. Every multicomponent in the system marked as protruding behind the edge of the layer. Simply drag and scale it towards the axis.
Text capacity
With constraints set properly for every widget in the system there’s a feature to add more space for text just by scaling down the component (e.g. Text field, or List item). See below how it works:
Demos
If you wish to try some demo templates, extracted separately from the system to understand deeper the principle of constraints in Figma, responsivity; or simple check the quality of product, please refer to this pages:
Summary
Hope this guide helps to get acquainted with Figma Material Design System. If you looking for mobile app templates, take a look at Figma Android Kit
Still having a question? Feel free to contact me via Twitter, Telegram, or e-mail directly. Never heard of Figma design platform before? Use this link
Get started with Setproduct Figma UI libraries
I wish you happy prototyping!
Best wishes, Roman Kamushken
