Android Design Kit. 140 material app templates and 253 UI components
I’ve challenged myself to design material design application system within one month
Few weeks ago I’ve challenged myself to create next digital product — Android Design Kit. 100% scalable from mobile to desktop apps within the same modules. So, if you just arrived to the boat, here’s a couple of posts you probably should start with: Introduction and First app screens completed.
The plan was quite simple: I took my Figma Design System for Figma (which is consisting of 500+ independent design modules to prototype any kind of apps) and to test to prove for myself is it worth to consider as workflow booster or not…
Figma Android kit. 140 mobile templates
Components-driven Android mobile UI library for Figma. Consists of 140 responsive application templates made of total…
Overall, everything is finished now: 253 material components + 140 mobile app screens. It took approx. one month to develop high-grade Android design kit. Which is followed precisely by official material guidelines and crafted into 8dp grid. Every screen is resizing and constrained properly! I took care of everything in advance. For your design & development boost you only need to drag, drop and fit — that’s it!
PROS: Yes, finally — Material Design System boosts your production-ready prototyping.
CONS: You should be learning some hotkeys and be good at Figma workflow. Basically, it takes few hours to become faster at Figma, if you’re migrating from Photoshop and less for Sketch leavers :)
HINT: Set your nudge amount in Figma to ‘8’ to resize and move objects to fit within 8dp grid faster (Hamburger > Preferences > Nudge amount > ‘8’)
Why it’s more than ordinary UI kit?
Because of the architecture! Being built from nested components, this app design system grants your full customization control within less movements.
Atomic design classic principles applied at maximum in here: this Button made of atoms, then placed inside Sign in module and considers now as Organism. Finally, this organism was placed to mobile and desktop templates giving you the full power of Figma instances at your service. Once you triggered your Atom, thus will spread to every Organism and higher levels where’s this Atom exists. Absolutely must have feature for quickstarting every new project.
140 android app templates at your service
Paginated into 16 most frequent categories: Sign in & Register, Search flow, Filters, Home & Categories, Product card, Wish list, Shopping cart, Checkout, Deals & Promo, User profile, Navigation
Components sections overview
The components bundle is divided and grouped into 16 categories.
Colors & Shadows, Typography & Controls, Text fields & Inputs
Navigation bars, Drawer, Item cards, Grid elements
Search & List items, Product page modules, Cart & Checkout, Filtering & Properties
Sign in & Register modules, Dialogs constructor, Placeholders & Miscellaneous elements
Buy this Android Design Kit
Drag, drop and fit. That’s it!
It’s a commercial product, but ideas shared for free. High quality application templates and design components now available. Top level of UI/UX detalization of components and ultimate thoroughness for every app screen will deliver accelerated development and save a huge amount of time…
Thanks for your attention! Hope this pictures will inspire you to complete your design tasks faster. There’s a final post about to come on the next week with screens explanation and final release announce! So, it’s high time to follow me or AMA: Twitter • Dribbble • Linkedin • Telegram