Figma Material Design Desktop UI

SaaS Design
5 min readMay 27, 2019

--

Working on a Material Design project in Figma? If so, we’ve just finished launching the new Figma Material Design UI for desktop. This includes 30+ full-width (1440px) desktop templates for Figma, including dashboard templates, e-commerce templates, and a landing page template.

🌟 We are also humbled that it was featured on UI8! 🌟

If you’re a designer, agency owner, or developer and are working on a project — whether it be for a client or your own purposes — chances are, you’ve figured out that researching Google’s Material Design guidelines can be quite daunting and time-consuming.

With so many small details to memorize with Material Design, it can be a pain to make sure everything is pixel perfect. That’s why we, as a team, have created this handy Figma Material Design UI system to help save you time.

OK! So, what is it, exactly?

Well, it’s actually both a Material Design library and UI system, with thousands of Figma components and ready-to-customize, pixel-perfect templates (light and dark theme). It’s more than just a UI kit — it’s an entire design system. Of course, we’ve also added editable templates to make life easier!

And here’s the thing: we’ve built this system from the ground up using Figma components. Many design systems out there were built for other tools like Sketch, and while you can import them, there are often annoying formatting issues and issues converting to components.

This design system was built native for Figma, meaning that every pixel was designed for use in Figma (no headaches or formatting issues to worry about).

Alright, alright. If you’re analytical like us, then you probably want to hear about the specs, right?

Included in the kit are 30+ full-width 1440px desktop templates, ideal for a website or web app. These pixel-perfect templates come in light and dark themes and are fully customizable, so that you can modify it to suit the needs of your project.

Plus, there is also a Material Design Library made entirely of Figma components, allowing for easy drag-and-drop design creation.

30+ High-Quality Material Design UI Templates

Figma Material Design UI Desktop Template

Yep, since this is more than a design system, we’ve included 30+ pixel-perfect Material Design desktop templates for you to use and edit as needed.

Each template is full-width at 1440px, making the templates ideal for websites and web apps.

Featuring a variety of different screens, you will find both light and dark themed templates, along with inspiration and ideas for dashboard templates and e-commerce templates.

1,500+ Material Design Library Components

Material Design Library for Figma —1,500+ Components

A Google Material Design library for Figma is included, with all of the Material Design assets you could ever need for your projects — over 1,500 components in total.

These components are building blocks and can be easily added to screens. It eliminates the need for hours or days of researching Material Design guidelines, as we’ve done all of the tedious work for you.

Simply drag and drop the components, and edit as needed! Focus on your creative strengths, without all of the boring manual research.

Save Hours of Time & Research

Do you hate the idea of spending many hours researching the Google Material Design guidelines, spending most of your time on research rather than creative design?

We’ve got you! We (Hannah and Marina) created this design kit to help save time by building a native Figma Material Design library, along with ready-to-go templates, to save time in the future.

And now we’re sharing it with you. By purchasing this kit, you can save many hours of time and research (and MORE time utilizing your creative strengths). Whether you’re a designer or a creative agency owner, this kit can save you 300+ hours of time per project.

Easy-to-Edit Templates for Your Project(s)

Each template is easy to edit and can be re-used for as many projects as you’d like over time. This includes personal and commercial/corporate projects. Once you load/import the project in Figma, you can create “Duplicates” for each project.

Since everything is designed using components, you can easily edit things like the master color and style guide, along with icons and other elements.

In other words, there is no need to edit every single screen to make changes to a project — simply edit in one area and you’re done! :-)

For Commercial or Personal Use

You’ll get a license for commercial use, which means that you can use it on unlimited corporate or personal projects. It’s ideal for design agencies or even tech startups looking to launch a new product.

You can keep using this system over time for unlimited projects once you have purchased the kit. No limits or annual fees!

Where can I buy it?

Learn more about the kit & purchase it here! We use Gumroad as a secure payment processor, which allows you to select PayPal or credit card.

We hope that it saves you a ton of time! :-)

--

--