This article is a detailed introduction to the Material Theme Editor tool how to use this tool, let you quickly familiarize and understand this tool of Google, I hope you can help!
First, Material Theme Editor – “a powerful Theme Editor”.
At the Google I/O conference in May 2018, the Google design team, called the Material Theme Editor tool, helps developers to make easier applications that meet their own brand and conform to the Material Design style. This new tool can simplify workflow and improve team efficiency.
This article is a detailed description of the use of this tool, so that you can quickly familiarize and understand the Google tool, perhaps in the work can be used.
Two. Brief introduction
In a nutshell, this is a plug-in that can be quickly generated on Sketch: a control library based on the Material Design design specification and allows the user to maximize custom component style plug-ins! (Tips: only changes that comply with Material Design rules)
After installing the plug-in, it opens in Plugins – Material – Open Theme Editor.
Four, Material Theme Editor operation panel
This is the operation panel of the theme editor:
The theme editor has a theme built in four different product categories, in which Baseline is the theme of the Material Design basic design component and the other three themes based on the different product categories created by Google based on the Material Design design language.
Five, Material Studies
In fact, Google has 7 different categories of products, such as catering, travel, news, shopping, education, and finance, based on the Material Design language design, which Google calls “Material Studies”.
In this site, Google has the overall design idea of each theme to you, from the product architecture, layout, color, font typesetting, icons, components, dynamic effects, design and brand combination of dimensions, very detailed, you can go to see, I believe there will be a lot of harvest!
Material Studies is to show you the flexibility of the Material Design design language, proving that Material Design is a unique and expressive product that can be created! Let you know that Material Design is not a rigid design specification, but a very creative design system based on the design concept. I suggest to look at it.
Six, Baseline — Material Design basic design component library
OK, let’s open the first Baseline (which is the theme of Material Design basic design component), which is the most commonly used.
When you open it, you will enter the Sketch interface. Look at the top right corner. There are five pages in it.
Introduction to Getting Started
Material Theme theme library (main controls, fonts, colors, and sample interface display)
Material Components component (display of all components)
Symbols (component library generated by default by Sketch)
Now let’s take a closer look at the four functions of Material Theme Editor.
Function one: color Color
Through this plug-in, we can quickly replace the main color, secondary color, and background color in the component. It will also make visual calibration for the color you choose according to the (WCAG) 2 specification (WCAG is the Web barrier free guide, which can help the disabled people with learning disabilities, cognitive impairments, light allergies, and so on. ” Easy to use.)
There are three color blocks in the lower left corner of the color control panel, corresponding to the adjustment of main color, secondary and color, and background color.
Open a color block at any point and pop up another operation panel, where you can select colors, “Custom” and “Material”, to customize and select colors in the Material color board library.
Here I have recorded a video, which helps you to know more about the specific components of each color block.
It can be seen that:
Main color application column, button, and selected style;
Secondary color – FAB, bottom navigation, slider, single / check box;
Background color – page background color.
Function two: font Typography
With this plug-in, you can set the default Font Family and set word weights for each font level, but you can’t modify the font size for a while, and the name of the font hierarchy can’t be modified.
Function three: Graphic Shape
There are two options for “Curved” and “Angied”. Through this plug-in, you can set the four corners of cards, buttons, and so on, which can be used to customize the shape of a right angle, a rounded corner, or a “angle”.
Function four: icon Iconography
Material Design has developed a variety of icon styles (stuffing, fillet, sharpness, stroke and double color) that can be quickly downloaded through the plug-in for Icons Symbol with different styles of icons for use.
The functions here are different from the official publicity. Instead of clicking directly, you can switch, but automatically download the sketch files of icon for you.
Can’t you change the icon quickly? No, there’s a way to do it!
This is I built a page in sketch, designed three pages with components, when you click on any component, the right side will appear a quick operation bar to make you change the component, the classification is very detailed, the point open “icon” can see that the five styles of icon are inside, the choice can be replaced quickly, but also It is convenient to change the color of icon.
I have introduced the function of this theme editor of Material Theme Editor.
In general, Material Theme Editor is a pleasant surprise tool that will streamline our workflow and improve team efficiency. It also shows that the Material Design UE design tool has completely turned to Sketch!