Material Design之Material Theme Editor的介绍

Material Theme Editor

• 简单来说，Material Theme Editor 就是一个能够在 Sketch 中快速生成基于 Material Design 的设计规范，并且能够按照你的需求最大程度自定义组件样式的插件。
• Material Theme Editor 内置了四套主题，可以将它们看作是四个案例 App 的设计规范文档，我们可以通过 Material Theme Editor 全局修改这些规范文档中的颜色、字体、形状等元素，创建符合自身需求的 Symbol 库，从而生成自己的 Material App 设计规范。

下载～安装～打开～
1.首先下载安装Sketch

• 网址：http://www.sketchcn.com/

2.下载Material Theme Editor

• 下载网址：https://material.io/tools/theme-editor
• 安装完成后在Sketch工具列选取 Plugins > Material > Open Theme Editor
• 打开 Material Theme Editor

3. 主题选择

打开Material Theme Editor 后可以看到 Sketch 内出现了一个黑黑的小视窗，里面有「 Baseline 」( 基本设计) 、「 Crane 」( 旅游 ) 、「 Fortnightly 」( 新闻 ) 、「 Shrine 」( 购物 ) 四种主题可选择，除了最基础的 Material Design 元件以外，也有针对不同类别产品所设计的元件库。

选择了任意一个主题后，可以看到有五个内设的页面，分别是 :

• Cover 封面、
• Getting Started 入门介绍 、
• Material Theme 主题库（主要控件、字体、颜色以及实例界面展示）、
• Material Components 组件（全部的组件展示） 、
• Symbols （Sketch默认生成的组件库），
  其中 Material Theme 是主要范例介面的展示， Material Components 是所有元件的列表， Symbols 就是所有元件库。
  

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

四大功能

功能一：

• 颜色 Color

在这个操控介面上，我们可以任意改变「主色」、「次级色」、「背景色」这三个颜色，点入任一色块后，我们可以从 Custom 里面任意选择我们要的颜色，也可以从Material 里面 Material Design 提供的色盘去选取，选取颜色后会自动产生 Primary ( 主要 ) 、 Light ( 较亮 ) 、 Dark ( 较暗 ) 三种颜色。

选好颜色以后，这些颜色就会套用在元件上各个对应的色彩设定，完全不需要再像以前一样要一个个手动调整，用起来很方便！

可以看出：

• 主色----应用程序栏、按钮、选中样式；
• 次级色—FAB、底部导航、滑块、单选/复选框；
• 背景色—页面背景色；

功能二：

• 字体 Typography

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

功能三：

• 图形 Shape

• 形状设定中有「Curved」和「Angied」两种模式，
• Curved 会是平滑的圆角，而 Angied 则是切角的效果。
• 通过这个插件可以全局设置卡片、按钮等的四个角形式，可以自定义直角、圆角或「折角」的形状。

Curved

Angied

功能四：

• 图标 Iconography

• Material Design 新推出了多种图标风格（填充，圆角，锐利，描边和双色），能够通过该插件快速下载不同图标风格的 Icons Symbol 以供使用。
• 这里的功能和官方宣传介绍的不一样，并不是直接点击就可以进行切换，而是会自动为你下载 icon 的 sketch 文件。
  

http://5xruby.tw/posts/material-theme-editor/