谷歌新出的这款 Material Theme Editor 神器，让你做设计又快又好

本篇文章主要是详细介绍 Material Theme Editor 这款工具如何使用，让大家快速熟悉和了解 Google 的这款工具，希望对大家能够有所帮助！

△ Google 官方 Material Theme Editor 的操作视频

一、Material Theme Editor —「一款强大的主题编辑器」
在 2018 年 5 月份的 Google I/O 大会上，Google 设计团队一款叫做 Material Theme Editor 工具，可以帮助开发者更轻松地制作既符合自身品牌又符合 Material Design 风格的应用。这款全新的工具可以简化工作流程并提升团队工作效率！

本篇文章主要是详细介绍这款工具如何使用，让大家快速熟悉和了解 Google 的这款工具，或许在工作中能够用的上。

二、简介
简单来说，这是一款能够在 Sketch 上快速生成：基于 Material Design 设计规范的控件库，并且让用户能够最大程度的自定义组件样式的插件！（Tips：只能进行符合 Material Design 规则的更改）

三、下载
下载链接：https://material.io/tools/theme-editor

安装插件后，在 Plugins — Material — Open Theme Editor 中打开。

四、Material Theme Editor 操作面板
这就是主题编辑器的操作面板了：

这款主题编辑器有内置四套不同产品类别的主题，其中，Baseline 是 Material Design 基础设计组件主题，另外三个主题是 Google 基于 Material Design 设计语言创造出的不同产品类别的主题。

五、Material Studies
其实 Google 这次有基于 Material Design 语言设计创建了餐饮、旅行、新闻、购物、教育、金融等 7 款不同产品类别的主题，Google 称之为「 Material Studies 」，链接：https://material.io/design/material-studies/about-our-material-studies.html

在这个网站中，Google 有向你呈现每个主题整体设计思路，从产品架构、布局、色彩、字体排版、图标、组件、动效、设计与品牌的结合度等维度，非常详细，大家可以去看一下，相信会有很多的收获！

Material Studies 是为了向大家展示 Material Design 设计语言的灵活性，证明 Material Design 是可以创建出独特的以及富有表现力的产品的！让你了解 Material Design 并不是一个刻板不变的设计规范，而是能够基于其中的设计理念做非常多创造的设计体系！建议去看一下。

六、Baseline——Material Design 基础设计组件库
好，我们打开第一个 Baseline （也就是 Material Design 基础设计组件主题），这个是最常用到的！

打开后会进入 Sketch 界面，看右上角，内置了五个页面，分别是：

Cover 封面
Getting Started 入门介绍
Material Theme 主题库（主要控件、字体、颜色以及示例界面展示）
Material Components 组件（全部的组件展示）
Symbols（Sketch 默认生成的组件库）

现在，让我们来具体了解 Material Theme Editor 的四个功能。

功能一：颜色 Color

通过该插件我们能够快速对组件中的主色、次级色以及背景色进行全局替换，它还会根据（WCAG）2.0 的规范对你选取的颜色做可视性校准（WCAG 是指：Web 无障碍指南，能够帮助残疾人士「学习障碍、认知障碍、光过敏等患者」更方便地使用。）

在颜色控制的面板左下角有三个色块，分别对应主色、次及色、背景色的调整。

任意点开一个色块，会弹出另外一个操作面板，在这里可以选取颜色，「Custom」和「Material」 ，可以进行自定义，也可以在 Material 色板库里选取颜色。

这里我有录制一段视频，可以帮助大家更了解具体每一个色块对应调整的组件：

△ 视频链接：https://www.bilibili.com/video/av23926642

可以看出：

主色 — 应用程序栏、按钮、选中样式；
次级色 — FAB、底部导航、滑块、单选／复选框；
背景色 — 页面背景色。
功能二：字体 Typography

通过该插件，能够设置默认 Font Family，并且能够对每个字体层级设置字重，不过暂时不能修改字体大小，并且字体层级名称不能修改。

△ 视频链接：https://www.bilibili.com/video/av23926503

功能三：图形 Shape

有「Curved」 、「Angied」两个选项，通过这个插件可以全局设置卡片、按钮等的四个角形式，可以自定义直角、圆角或「折角」的形状。

△ 视频链接：https://www.bilibili.com/video/av23926276

功能四：图标 Iconography

Material Design 新推出了多种图标风格（填充，圆角，锐利，描边和双色），能够通过该插件快速下载不同图标风格的 Icons Symbol 以供使用。

这里的功能和官方宣传介绍的不一样，并不是直接点击就可以进行切换，而是会自动为你下载 icon 的 sketch 文件。

那难道不可以快捷更换 icon 了吗？不，还是有办法的！

△ 视频链接：https://www.bilibili.com/video/av23926183

这是我在 sketch 中新建了一个页面，用组件设计了三个页面，当你点击任何一个组件的时候，右侧会出现快捷操作栏让你更改组件，分类很详细，点开「icon」可以看到五种风格的 icon 都在里面，选择就可以快捷替换了，而且还可以更改 icon 的颜色，还是很方便的。

总结
Material Theme Editor 这款主题编辑器的功能我已经介绍完了。