Material design for desktop
Advanced design kit for desktop applications or web-based tools. Business edition made for Figma
Scaling material design practices for wide screens
This is an auto-updated post with press releases and updates
A product that deserves switching into Figma immediately
Meet the business edition of a Material desktop system for UXeful apps, web products, hi-fi prototyping, or for design team purposes. Fits for both web or downloadable applications. Contains most frequent to use UX patterns and UI elements with clicked and onhovered statements provided. Hundreds of production-ready perfectly crafted responsive design components at your service.
13 sections of components & 33 desktop layouts
There are many UI items provided as instances in this design kit. You are free to detach it and declare as the new component. Properly named, this new UI item becomes available to reuse along with of provided styles by default. It’s flexible to set your own variety of most used buttons, tabs, lists and etc…
Global styles
Typography
This design system text styles based on a font combination Roboto + Quicksand (fine Google’s Product Sans alternative). It’s recommended to use the first for base text and the second for headings. Both of it available at fonts.google.com, so no font to download and install manually into a system.
Colors & Elevation
The advanced color system is aimed to provide full control for shades of grey for backgrounds, text or other elements. There are 5 base colors, 5 smooth colors and 10 variants of gradients declared as styles. This design system equipped with smart elevation styles, so you can operate within the depth starting from 2dp to 24dp shadows. It’s recommended to attach the elevation directly to the background layer (use Ctrl/CMD+left mouse click to select instantly)
Components
Buttons
FAB, Square, Raised, Switches, Captioned, Rounded and others available in the following styles: Filled, Smooth, Outlined and Elevated. The color is up to you, simply attach new fill/stroke/shadow styles in the right Design panel
Lists
Most of the list-like UI elements in a whole system is based on a single master-component. There are few combinations available for a soft quickstart: Single-line list, Double-line list, Multiline list Iconic list, Userpic list, Logo list.
Tabs
Tabs and segmented controls are classics. Swap from material default tab to desktop half-outlined just by enabling specific hidden layer inside the instance. Then refill it with new color according to your palette. Segmented tabs available in a variety of 3, 4 and 5 items in a row within 3 sample styles.
Logos
This section is a time-saver for MVPs and other ideas validation projects. Each variant based on free Google fonts, so the last thing you have to perform here — is to paste your brand name and replace the capital letter. Choose the most convenient and save a penny from ordinary logo designer…
Text fields
A variety of different sizes available to craft clear and usable data collect patterns. Some of the inputs are material classics. Some of it equipped with the icon to increase the meaning. Some of them are scaled down properly to fit desktop grid requirements. And what’s the most interesting here — all provided styles is a single whole instance.
Chips
Simple and ordinary UI items. Served within a few styles according to specifications of your layout: Outlined, Elevated, Smooth, Highlighted and Dashed. Just pick the most proper for your case, declare as an additional component or copy-paste as the existing instance directly onto your layout.
Modals & Popovers
This section consists of the blocks for Modals, Dialogs, Confirmations, Notifications, Alerts and etc. Guided with additional colored instances to deliver a specific message to the end user. Popovers could be used as context menus, or as a dropdown pattern. Use dark version for white surfaces as more impactful interaction.
Tables
Table components to create any flexible data grid are provided in several dimensions: 24dp, 40dp, 48dp and 64dp depending on a layout resolution, project type and devices. Endless scalability is supported by Figma multicomponent approach. Moreover, it comes filled with sample content: Database, Statistics, Cryptotrading, and Colored table. Highlighted state when sorting function is activated is here as well.
More components available for preview here:
Templates
Each template served for light and dark themes and production-ready for further customization. You are always free and welcome to detach, max, combine and reuse the UI widgets, groups and frames implemented in every layout. Is it worth mentioning every of it comes scalable, properly constrained and crafted into the 8dp material desktop grid with the care of every pixel?
Variation of styles and component-based approach
Produce more design variants and choose the most convenient theme. Just pick the right template for your purposes, combine, reuse and attach new styles. Generate your screens on-the-fly. These templates were built by advanced components to deliver endless scalability into the design system.
Dashboard
Calendar / Planner
E-commerce
Finance / Trading
Social News
Application Components
Messenger / Communication
Small Desktop Items
Kanban / Tasks
Project Management / Roadmap
More dark screens to come in the next few days…
How to get it?
Secured payment via Gumroad. This product will be automatically sent into your mailbox after the successful purchase.
PS: Scrolled till the end? Congratulations, here’s your reward: 30% OFF discount code. Paste this 30OFF combination during the purchase process. Start this from the window above.
