Material Design List Items Free Figma Template

Material Design List Items - Free Figma Template

Based on Google Material Design Guidelines.

This design kit features:

• Material 2 and Material 3 list components in light and dark themes.
• Leading and trailing item components: icon, radio button (unselected and selected states), checkbox (unchecked, intermediate, and checked states), switch (non-toggled and toggled states), avatar (monogram, icon, and image variants), image, video, button (contained, outlined, and text variants for Material 2 buttons & filled, tonal, outlined, and text variants for Material 3 buttons. Additionally, all buttons support leading and trailing icons alongside the button label).
• Material Icon library integration
• Lights plugin compatibility for Material 2 list items.
• Material Theme Builder plugin compatibility for Material 3 list items.
• Support for new component property authoring features.

External Links

1. Material Design Guidelines
2. Material Icons
3. Lights
4. Material Theme Builder
5. New Component Property Authoring Features

Changelog

09.23.2021

• Published community file.

09.26.2021

• Added empty state illustration to blank page.

09.27.2021

• Added About page to file.

03.17.2022

• Removed gradient from cover image.
• Changed hex value of canvas background color.
• Increased saturation of empty state illustration (and supporting text).
• Added small and medium size image options to leading and trailing item picker.

04.22.2022

• Added avatar and button options to leading and trailing item picker.

07.21.2022

• Slightly tweaked primary color style to meet WCAG contrast ratio (4.5:1) for components.
• Added entire collection of Material Design Icons in all five styles (Filled, Outlined, Rounded, Sharp, and Two Tone) for optimized icon selection and replacement in leading and trailing list items.

07.23.2022

• Added guidance on list item customizations in About page.
• Added brief description about list items in file description.
• Removed conflicting styles from external and missing libraries.

11.08.2022 (v2.0)

• Rebuilt all components from scratch to leverage new Component Property Authoring features.
• Added Material 3 list items components.
• Added Dark Theme list item components for Material 2.
• Added Lights plugin compatibility for Material 2 list items.
• Added Material Theme Builder plugin compatibility for Material 3 list items.
• Added Monogram and Icon variants for Avatars.
• Added additional button variants with leading and trailing icon options.
• Added button styles: Contained, Outlined, and Text for Material 2 buttons; Filled, Tonal, Outlined, and Text for Material 3 buttons.
• Removed Small Image component.
• Renamed Medium Image component to Image.
• Renamed Large Image component to Video.
• Renamed About page to Guidance.
• Renamed Playground page to List Items.
• Added extensive documentation on component property and instance customizations, theming customizations, and contextual examples in Guidance page.
• Redesigned all file-specific panels and sections.
• Altered empty state illustration in blank page.
• Added Material 2 & Material 3 cover images in light and dark themes.
• Set new cover image.
• Edited Community file description.

This freebie Material Design List Items was originally shared by Adi Chakravarty 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 Adi Chakravarty nicely and they will probably allow you to use it.