Material Theme Editor插件

Material Theme Editor插件是谷歌于今年的I/O 大會上公布的一款sketch插件，這款插件可以說是一款制作Material Design風格應用的神器。Material Theme Editor插件可以在 Sketch 上快速生成基于 Material Design 設計規范的控件庫，并且讓用戶能夠最大程度的自定義組件樣式。

插件介紹：

Material Theme Editor 內置了四套主題，可以將它們看作是四個案例 App 的設計規范文檔，我們可以通過 Material Theme Editor 全局修改這些規范文檔中的顏色、字體、形狀等元素，創建符合自身需求的 Symbol 庫，從而生成自己的 Material App 設計規范。

設置顏色

用戶可以自定義 Material Theme 的主色、次色、背景色和字體顏色，輸入特定的色值或者直接從 Material 色板里選擇都行，每選定一種顏色就會全局改變所有相關 Symbols 的顏色。

從上圖可以看到當顏色變化時，色塊上的文字和圖標顏色也會跟著變化來保證可讀性。當設置文字顏色時會有一個背景與文字的對比卡片，直觀地展示不同字號下的可讀性，出現嘆號則意味著需要校準，點最下面的「Fix contrast」便會自動推薦一個文本顏色。

可讀性校正

添加字體

每個主題允許添加三套字體，同時可以針對標題、內容等不同板塊設定不同的字體和字重，在 Material Theme Editor 中設定一套字體后，便會自動應用至全局。

改變形狀

默認的材料設計形狀是一個圓角為 4dp 的圓角矩形，最新的 Material Guidelines 允許形狀有多種變化，可以將形狀設計為圓角、直角和斜角，同時可以調整邊角的大小和數量。

在 Material Theme Editor 里可以輕松把相關 Symbols 全局設置為圓角或者斜角，也可以選擇四個角的控制點來單獨控制其中某幾個角，拖動控制桿可隨意改變邊角的大小。它的合理性在于并不是所有卡片或者按鈕都會隨之改變，比如 Backdrop 的表層只有上面兩個角是可變的。

下載多種風格的圖標

Google 基于 Material Guidelines 繪制了 5 種不同風格的系統圖標，包括填充、尖角、圓角、線性和雙色五種，不同的 App 可以應用不同的圖標以突出其自身的風格。在 Material Theme Editor 中可以直接下載這五套圖標的 Sketch 源文件，方便直接拿到原稿里使用。

Baseline介紹：

我們打開第一個 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 的顏色，還是很方便的。