Material 3 Design Kit Free Figma Template

Material 3 Design Kit - Free Figma Template

Introducing Material Design 3

Meet Material Design 3, Material Designs most personal design system yet. The Material 3 Design Kit provides a comprehensive introduction to the design system, with styles and components to help you get started.

Visualize dynamic color in your UI

The Material 3 Design Kit is built to work with the Material Theme Builder Figma plugin. Select an image or color to visualize dynamic color in your UI.

Looking for icons? Try the Google Icons Library

Suggestions and/or feedback?

Email m3-design-kit-feedback@google.com

Fill out this Google feedback form

or ping us @materialdesign on Twitter.

Changelog

02.09.23 V1.7

Components and Styles Added: 

• Side Sheets

Updates:

• a11y update to the Date Picker

Bugs addressed: 

• Added Absolute Position to Camera Cutout element inside status bar
• Date Picker day layer names fixed
• Changed Status Bar and Bottom Handle constraints to scale correctly within Device Frames
• Nav Drawer - there were text properties set up but not in use, causing component to appear as 'invalid'

12.15.22 V1.6

Components and Styles Added: 

• Search bar and modal
• Custom variants for Progress Indicators
• Avatar imagery with metadata

Updates:

• Cover art refresh
• Component properties added to multiple components

Bugs addressed: 

• Textfields label color
• Incorrect opacity on disabled filter chip
• Incorrect Type style on "Title-large": from 'regular' to 'medium'
• Typo on the Body/Large styles page: from 0.15 to 0.5
• Outline pressed button icon was secondary color, updated to use primary color

10.18.22 V1.5

Huge update

Components and Styles Added: 

• Badge
• Small FABs
• Progress indicators
• Checkboxes
• Tabs
• Dividers
• Segmented buttons
• Bottom sheets 
• Time pickers
• Date pickers
• Sliders
• Lists
• Snackbars
• Navigation drawers (Dark)
• Outline-variant color role
• Keyboards added

Bugs addressed: 

• Removed Top App Bar elevation on scroll
• Icon buttons now reflect 48dp size for tap target
• State layers for switches are now color roles and several other bug fixes
• Fixed minor Text Style issues and deleted excess Text Styles
• Fixed Nav bar active label color

Updates: 

• Components updated to have nested new components (ex: badges, dividers)
• Components updated to include outline-variant color role (ex: outline card)
• Disabled FABs removed
• Hex values removed color roles only
• Top app bar now leverages 48dp icon buttons
• Restructured all Chips components
• Restructured all Fab components
• Text fields updated w/icon button 
• Improved several components with auto layout 

07.01.22 V1.4

• Fixed the switches component 
• Fixed a bug where the chips were mislabeled
• Fixed a bug with the surface value of elevated cards and elevated chips
• Fixed label of on-surface value in dark mode
• Fixed a bug in navigation bars where the badge was shifting between active and inactive states
• Updated color role structure

05.11.22 V1.3

• New Material 3 components, including Icon Buttons, Switches, and Bottom App Bars 
• Fixed a bug where users would be asked to install Google Sans
• Fixed a bug where Assistive and Filter chips contained a conflict error

02.14.22 V1.2

• Our top request - the design kit now includes Text Fields! 
• Updated chips to include missing variants
• Fixed a bug in Dialogs which prevented the component from working correctly

11.10.21 V1.1

• Updated links under color and typography
• Added additional color roles under .read-only to allow for state opacity tokens, fixing a bug where some states colors would not update when using the Theme Builder plugin.

10.27.21 V1

• Kit release

This freebie Material 3 Design Kit was originally shared by Material Design on this url.

The category for this freebie is Uncategorized. Tools used to create this freebie are Figma and Adobe XD.

Helpful hint: If the license is unknown, it is usually because they forgot to mention it explicitly; not because they were being stingy. Before using it for a commerical project, you can ask Material Design nicely and they will probably allow you to use it.