Material Design 3 UI Kit for Sketch

💎 Featured by Sketch!

🚨 Available for free — donations appreciated.

With Material Design 3 (MD3), Google unveiled the latest evolution to its design language — an adaptive, expressive system personalised to your device.

As part of that, they introduced a new way of applying color to interfaces, an updated type system, and 10 overhauled components. Take a look at this article and video to find out more about Material You.

However, Google hasn't created a design kit for Sketch. They've only made one for Figma so far.

So, this Material Design 3 UI Kit — built exclusively for Sketch — aims to fill that gap in a super-accurate, super-comprehensive way. It's a one person effort that'll get updated as and when Google's Material Design team releases updates and/or makes changes.

💯 Components are built from Google's documentation (and other resources).

🌗 Components are set up and shown in light & dark themes.

↔️ Components are fully responsive using Sketch's Smart Layout functionality.

🔀 Symbol overrides are well structured and extensively used.

🔠 Typography tokens are implemented as text styles.

🎨 Color tokens are implemented as layer styles & color variables.

Components

All of Google's new MD3 components are included in this UI kit. That also encompasses all states (i.e. hover, focused, pressed, dragged and disabled) and all variants for each of them (shown below in italics).

✅ Buttons
(elevated, filled, filled tonal, outlined, text)

✅ Cards
(elevated, filled, outlined)

✅ Chips
(assist, filter, input, suggestion)

✅ Dialogs

✅ Extended FABs
(standard, full width)

✅ FABs
(standard, small, large)

✅ Menus
(regular, dense)

✅ Navigation Bars

✅ Navigation Drawers
(standard, modal)

✅ Navigation Rails
(gravity-top, gravity-center, gravity-bottom)

✅ Text Fields
(filled, outline)

✅ Top App Bar
(small-centered, small, medium, large)

Components are also set up to deal with optional UI elements (as detailed in Google's documentation). Trailing icons in the Navigation Bars, for example, can be toggled on/off. Similarly, the Navigation Rail items can be shown with or without labels.

Up next

You'll soon get more examples of MD3's dynamic color scheme system (as separate files) and even more examples of the Chip and Top App Bar components.

It'll also contain a few tweaks and adjustments to the existing setup. As you'd expect with something so new, Google's MD3 documentation is a little bit patchy in parts. While their Figma file helped to fill in quite a few of the gaps, I'll be clarifying some of the smaller things that are still unclear with their Material Design team.

Get in touch

I'd love to hear from you! Send me your thoughts on how this UI kit can be improved. Let me know what you'd like to see added to it. Tell me how you'll be using it.

Credits: Material Icons, Roboto, Caique Silva, Gary Bendig.