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

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.

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…

Image for post
Image for post

Global styles

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.

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)

Image for post
Image for post

Components

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

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 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.

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…

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.

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.

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.

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?

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

Image for post
Image for post
Image for post
Image for post

Calendar / Planner

Image for post
Image for post
Image for post
Image for post

E-commerce

Image for post
Image for post
Image for post
Image for post

Finance / Trading

Image for post
Image for post
Image for post
Image for post

Social News

Image for post
Image for post
Image for post
Image for post

Application Components

Image for post
Image for post
Image for post
Image for post

Messenger / Communication

Image for post
Image for post
Image for post
Image for post

Small Desktop Items

Image for post
Image for post
Image for post
Image for post

Kanban / Tasks

Image for post
Image for post
Image for post
Image for post

Project Management / Roadmap

Image for post
Image for post
Image for post
Image for post

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.

Happy prototyping!

Cheers, Roman

Dribbble, Behance, YouTube, Uplabs, Twitter, Reddit, Telegram, Instagram

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.

Written by

Top-notch Figma templates — setproduct.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store