The new
#Material3
and
#Android14
UI kit is live!
Biggest feature: Android 14! All notification types, new permissions, new system behaviors & more.
Updated several Material 3 components such as side sheets, sliders, progress indicators & carousels!
After half a year and over a thousand components, my Material You & Android 12 UI kit is finally complete!
I'll be releasing it later this month, totally for free, on Figma Community! :)
It's here! My Material You & Android 12 UI kit is now live on
@figmadesign
Community!
💠Over 1000 variants
📦 All Material3 components & tokens
📱 Android 12 System UI & Widgets
🎨 Dynamic color support
🛠️ Improved customization
Get all of it, for free!
Some of the new components coming in the next update of the UI kit:
🔐 Passkey support
⚠️ New permissions (Granular media control & location data sharing notice)
📤 New Android 14 share sheet (Now filed in with sharing options!)
Finished the Lockscreen component for the Android 14 UI kit.
In terms of component props, it's by far the biggest. So many nested props...
It supports all lockscreen configurations you'd expect, all unlocking methods, all notification types as well as notification overflow.
More progress on the
#Android14
and
#MaterialYou
UI Kit:
• Support for the new MTB update.
• Responsive mockups have been finalized.
• Added missing CallStyle notification component. (Incoming and ongoing)
• Started work on notification documentation.
It's almost done 🤞
Made some cool improvements to my calendar components:
You can now choose which week day the month starts at. Two nice things about it:
☑ It's an Auto Layout, so a month that has 6 rows will resize as you'd expect.
☑ Date ranges are fully kept and adapt accordingly!
For the next release of my Android & Material You UI kit, I'm revamping how system base components are shown. Whereas previously they were all thrown together haphazardly, they're now neatly organized by category.
Today I went to open Assistant and this new UI showed up. I haven't seen any mention of it or screenshots floating around. Odd that someone that doesn't use Assistant at all happened to get it.
@ArtemR
@hallstephenj
Material You & Android 13 is live!
✨Material 3:
— Giant refactoring of components for improved customization with nested instances.
✨ Android 13:
— Better system bars
— New notification panel
— New media player
— New permission dialogs
It's free! ⬇️
The new update to my Material 3 / Android 13 UI kit will include the new search bar component that is currently being developed for Android. It's not fully implemented in the library, but the tokens tell us all the features it will have. :)
Oh boy, it's finally done. The new slider component in
#Material3
is now in my upcoming
#Android14
UI kit update!
✨ Fully customizable and responsive thanks to a combination of Auto Layout and boolean operations!
This was really hard to build but I'm really proud of it. 😊
My
@materialdesign
template just hit 20K downloads on
@figmadesign
community! I'm so excited so many people are making use of it and enjoying it. 🥳🥳🥳
Currently building all of the Material You component changes and v3 should be out as soon as the docs have been released! ♥
Haven't seen this documented, but
@figma
will now automatically update the constraints of absolute-positioned elements inside Auto Layout if you use the Align buttons up top. Whoever did that, THANK YOU SO MUCH. It saves so much time.
My overhauled
#MaterialTheming
template is out on Figma Community!
• 500+ variants [ ! ]
• Auto Layout V3 support [ ! ]
• Better shape theming support
• New & updated components
• Updated guides
• Android 11 components [ ! ]
Get it for free! ⬇
Recreated all the Material You mockups because I couldn't sleep 🙃
I'm still waiting for a couple of fixes with the Material plugin before I can finalize the rest of the kit, but it should be out by January, if everything goes well. :)
New stuff for the
#Android14
#MaterialYou
kit:
• State support for segmented buttons
• Toggleable icon buttons have been added
• Widget components: Checkbox, radio and switches.
Unfortunately, documentation is taking too long, and a 2023 release won't happen. I really tried!
My updated Material You UI kit is live!
✨ Widget improvements with color extraction
✨ Rounded and cut corners available to all components
✨ Full Component Properties support
✨ New Material3 components & states
✨ Android 13...?👀
Get it for free!
➡️
@jph_anderson
To The Moon is praised - which is well deserved - but is mostly forgotten.
Overappreciated? Witcher 3. Because it took the GOTY award from Bloodborne and I'm a fucking fanboy.
@ChrisRGun
It's not just bullet points, though. There's leaked gameplay and cutscenes. I understand reserving judgement until it's out, but the hate is not unfounded. There are some questionable decisions here.
Android 14 base component organization is finally done! 🥳
Plus, new improvements to keyboard components.
• Word suggestions
• Auto complete (Clipboard, autofill - all types)
Last but not least: Share sheet is now feature complete, with custom shortcut support.
I didn't realize
@figmadesign
lifted the 250 maximum value for blur, so now Android 12's dynamic widgets can work inside Figma with just a bit of blending mode magic. 🥳
I'm finally releasing my Material Components + Android 10 UI Kit for
@figmadesign
!
#MDCforFigma
Features:
• Material Theming (Color, Type & Shape!)
• Dark Mode (w/ automatic Elevation Overlays)
• Code samples (Themes & Styles)
• Auto Layout support
Even though I've had these color styles for a couple years now, I still think it's so cool how you can pull this sort of instant theming with blending modes in Figma.
My Material You UI kit has surpassed 50K downloads! (Could definitely use more ratings, though 👀)
Thanks to everyone who's used it and provided feedback!
Material You & Android 13 is live!
✨Material 3:
— Giant refactoring of components for improved customization with nested instances.
✨ Android 13:
— Better system bars
— New notification panel
— New media player
— New permission dialogs
It's free! ⬇️
Here's the changelog for the upcoming Android 13 update of my Material UI kit. I'm just going through the entire file now and seeing if I can find any inconsistencies before release. 😉
@JohnWolfeYT
There's a big difference between half a dozen replies from known creators / personalities and thousands of people paying $8 to basically make non-paying consumers invisible.
Pinnit has surpassed 10K installs!
I didn't expect to see it grow this fast but here we are! There's been a lot of feedback and feature requests ever since we launched, and don't worry, we're taking it all into consideration. :)
➡
Long overdue additions to the status bar components:
• New location indicator in privacy chips;
• Ability to show notifications and control their icons;
• Ability to toggle system status icons;
And of course, it all works with Auto Tint.
FALSE ALARM. I think it's a randomized exhaustion animation. I spent a few minutes looking for it before without killing enemies and couldn't get it, but just got it once now.
Almost done with the giant overhaul of my
#MaterialDesign
Figma template. This new version will fully support Auto Layout V3 & Variants! Here's a sneak peek of what's possible. 🤠
The new version of the Material You kit will be out soon! The last component? Android 13's photo picker!
• Change between single and multiple selections without losing overrides
• Easily change selections from photos to videos
• Photos maintain their aspect ratio when resized
Here's a summary of the interesting bits of Material You that have been uploaded to GitHub in the past few days.
Starting off with tabs, which got updated to the same style as Google's themed tabs, with their rounded upper corners and label-dependent indicator width.
@daviddoel
Is there a Twitter blackout of Bernie? Every single debate, I N-E-V-E-R see his name in Trending Topics. I don't know how that's even possible.
Just released an update to my
#MaterialDesign
UI Kit on Figma Community! It contains the brand new Time Pickers introduced in MDC 1.3.0! Includes 12/24-hour versions for dial and input variants. Full Material Theming support.
Duplicate it here:
Thanks to a late night workaround, I can finally say it: Cut corners are back, and shape theming is now feature complete! In the next update of my Material You UI kit, designers can choose between all the available sizes for both styles.
Release is next week! 😉
If you're just starting to design for Android and its features, UI components, by themselves, won't help you much.
For the next version of my Android 13 UI Kit, I'll be adding documentation to system components, so designers can understand their context and how they work. 🤝
Now that Figma Community has rolled out, my
#MaterialTheming
template has surpassed 3k duplications in just two weeks!
It's a nice feeling. 🥰
If you haven't already, you can duplicate the file here:
One thing that I've always wanted to do but was not able to until now due to the cut corners bug: Material2's Shrine, now with Material You.
(This file will be available with the release of the UI kit 😉)
A few dozen nested containers later... 😎
This would've been really easy to do if you didn't want to properly Smart Animate all the layers, but I really wanted both Auto Layout and Smart Animate to work together, and they did! :)
Today I published the design study for
@get_interval
, a Flutter app for remote workers that lets you time and track intervals spent in a project throughout your day, weeks, or even months!
✨Study:
Developed by
@mikebullingtn
Least favorite part of OneUI has to be the extremely tiny touch targets for media notifications. Unlike stock Android - and Google's version - a full notification is no longer an option. This is what you get.
After my last tweet, I wondered if I could faithfully replicate Android 13's media player in Figma. The answer is yes!
✅ Extracts colors from the background
✅ Provides a dynamically colored scrim
✅ Applies the appropriate value for buttons & icons
After testing with
@its_sasikanth
, we noticed Android changes the notification accent colors to maintain contrast based on the device theme.
The UI kit now has the same behavior. It's not a simple HSL override - it will respect the original color's saturation!
15K duplications🙌
The next update is halfway done and will focus entirely on component states!
Unfortunately, I'm dealing with some personal stuff at the moment, so it'll take a bit. Hopefully it'll come out before I have to redesign it all for whatever
#MaterialYou
brings. 👌
@figmadesign
For those interested in it, **there is no constraint support** so you can't resize components and contents based on the frame size, making responsive layouts impossible.
This is nothing like Smart Layout. This is a button resizer plugin.
Meet Pinnit!
• Create & pin notes as notifications. They will be recreated as permanent notifications in your notification panel!
Much more to come: Full app notification history support, tracking and filtering!
Designed by
@edpratti
#MaterialDesign
Now that the MDC docs are starting to come out (and they're fantastic, sincere thanks to all the GitHub maintainers), I could finally build the full set of Material You buttons. Here are they: Filled, Tonal, Outlined, Surface, and Text.
In the current version of my Material You UI kit, widgets can extract color from the background, but the layering of these styles can lead to inconsistencies. In the upcoming update, this has been fixed, and now widgets will have consistent, dynamic colors regardless of order.
@YasmineEvjen
Nope, it's all coming from the background! Using blur + multiple fills w/ blending modes per color style, I'm able to get the right value for the background, surface and accent colors.
I didn't realize
@figmadesign
lifted the 250 maximum value for blur, so now Android 12's dynamic widgets can work inside Figma with just a bit of blending mode magic. 🥳
Almost done adding
@figmadesign
Variant support to all of my
#MaterialDesign
Theming components! :)
Should be available for everyone this week or the next on Figma Community.
The new update is out!
• New surface color tokens!
• Better name convention for component properties;
New components:
• Search bars and all their configurations;
• The Material3 Carousel, with 3 variants;
• Chat Bubbles from Android 13, with prototyping animations!
Material You & Android 13 is live!
✨Material 3:
— Giant refactoring of components for improved customization with nested instances.
✨ Android 13:
— Better system bars
— New notification panel
— New media player
— New permission dialogs
It's free! ⬇️
I always go above and beyond when it comes to design documentation. I hope everyone who downloads my
#MaterialYou
update will be able to take advantage of these tutorials to create their own special themes. 😊
Here's a proof of concept: A fully responsive Material Design input field with Shape Theming support in
@figmadesign
. Supports individual radius for both rounded and cut corners as well.
My
@figmadesign
wishlist for 2021:
Let me apply color styles to shadows.
Let me apply color styles to shadows.
Let me apply color styles to shadows.
Let me apply color styles to shadows.
Let me apply color styles to sh-