Z Yuhan：本文原作者徐小馬啄清，獲權(quán)轉(zhuǎn)載自《分鐘了解谷歌全棧設(shè)計師打造的 Sketch 插件：Sketch Material》
——
前言
Sketch Material 是一個由谷歌全棧設(shè)計師 Siddhartha 設(shè)計開發(fā)的 Sketch 插件城瞎，能夠生成復(fù)雜的 Material Design 風(fēng)格的交互控件拱她，比如按鈕肄渗、表單鸣个、表格等榛斯。該插件致力于提升設(shè)計師使用 Sketch 時的工作效率绊汹。
閱讀時間：5分鐘
流量預(yù)估：2.8MB
開發(fā)者：Siddhartha
谷歌設(shè)計師一枚磺箕，這是他的個站：http://websiddu.com
下載地址
Github：https://github.com/websiddu/sketch-material/raw/master/builds/versions/sketch-material.latest.zip
百度網(wǎng)盤：https://pan.baidu.com/s/1qYRWWsW
——
插件功能
一共有十個功能奖慌，并沒有可視化面板，還請大家配合 Sketch Runner?使用松靡。
1简僧、按鈕生成 | Button
選定文字圖層后，使用這個功能可以生成兩種類型（Flat雕欺、Raised）的按鈕岛马，每種類型支持三個狀態(tài)（pressed，disable屠列，normal）啦逆。生成按鈕時，會自動將小寫英文轉(zhuǎn)化為大寫笛洛。
Material Design 中關(guān)于 Buttons 的描述：Buttons - Components - Material design guidelines
2夏志、標簽生成 | Chips
可以設(shè)置容器寬度，這個關(guān)系到標簽自動換行苛让。在輸入文字后回車以生成標簽沟蔑，大家可以根據(jù)自己的需要選擇標簽的狀態(tài)湿诊。
Material Design 中關(guān)于 Chips 的描述：Chips - Components - Material design guidelines
3、彈窗生成 | Dialogs
彈窗生成器支持生成移動端和桌面端的彈窗瘦材，另外可以選擇是否帶有標題厅须。彈窗中的所有文字元素均可編輯。比直接置入 symbol 后再作修改要省事多了食棕。該功能非常良心朗和。
Material Design 中關(guān)于 Dialogs 的描述：Dialogs - Components - Material design guidelines
4、表單生成 | Forms
支持添加包括單選框宣蠕、復(fù)選框例隆、輸入框等五種類型的表單元件。另外抢蚀，自由度非常高镀层，所有可視字段均可在生成器右側(cè)進行編輯。該功能同樣非常良心。
1.7版本中部分字段沒有限制字長，會溢出編輯框鞋怀，我已在 Github 上向谷歌大大反饋。
5坞古、圖標庫 | Icons | shift+command+i
圖標庫比較強大，支持四種顏色的換色以及搜索劫樟，錄入了幾乎所有 material design 里用到的圖標痪枫。就算不是在設(shè)計 md 風(fēng)格的產(chǎn)品，概念稿的階段也可用這些圖標來占位叠艳。
6奶陈、吐司生成 | Snackbar
吐司生成功能支持移動端和桌面端的吐司，所有可見字段均可編輯附较。另外吃粒，你也可以選擇隱藏或顯示按鈕。
這里按鈕的文字輸入會有亂序情況拒课，我也在 Github 上反饋了徐勃。
Material Design 中關(guān)于 Snackbar 的描述：Snackbars & toasts - Components - Material design guidelines
7、表格生成 | Table
表格生成器支持從 Excel 和 Number 里粘貼復(fù)制數(shù)據(jù)進來早像，很驚艷僻肖。另外，可以選擇是否有表頭卢鹦、復(fù)選框檐涝、投影以及換頁按鈕，也可以選擇表格的尺寸是舒適或緊湊。
生成器的左下角還有個效果預(yù)覽谁榜，挺有心。
8凡纳、提示生成 | Tooltip
和 Buttons 功能基本一致窃植，就是選擇文字圖層后將其生成為提示框。
Material Design 中關(guān)于 Tooltips 的描述：Tooltips - Components - Material design guidelines
9荐糜、文字樣式選擇 | Typography
選擇文字圖層后巷怜，在樣式選擇其中選擇對應(yīng)的樣式即可更改文字樣式，這些都是 Material Design 中規(guī)定的樣式暴氏。
Material Design 中關(guān)于文字樣式的規(guī)定：Typography - Style - Material design guidelines
10延塑、浮高調(diào)整 | Elevations
當你選擇一個圖層或分組時，可以用該功能來調(diào)節(jié)其浮高投影答渔，總共分了六個投影值关带。
Material Design 中關(guān)于浮高的規(guī)定：Elevation & shadows - Material design - Material design guidelines
幫助 | Help
當我打開這個 Help 準備查看文檔時，赫然發(fā)現(xiàn)谷歌大大留下的蛛絲馬跡：
documentation coming soon...
欲練此功...
——
總結(jié)
如果在做 Material Design 風(fēng)格產(chǎn)品的設(shè)計沼撕，這款插件無疑是天上掉餡餅宋雏，省去了大量重復(fù)勞動的時間。讓設(shè)計師能夠?qū)Ｗ⒂谠O(shè)計工作本身务豺，而不是和 symbol 死磕磨总。
當然，也有個小問題笼沥，就是使用這個插件后會把 symbol 頁面弄的非常亂蚪燕，這個還請大家使用前預(yù)估好風(fēng)險。
我是 Teambition 的交互設(shè)計師徐小馬（微信：heiheilaugh）奔浅，歡迎交流馆纳，請注明知乎 ID。作為知乎老透明乘凸，第二次發(fā)聲厕诡，大家多給意見。
再附贈兩個谷歌大大的 Sketch 插件
Sync to Slides：GitHub - websiddu/sync-to-slides: Sync your Sketch artboards to Google Slides with ease
Symbol me：GitHub - websiddu/sketch-symbol-me: Convert all your similar layers to symbols with a single click
相關(guān)閱讀
《五分鐘了解微信團隊打造的 Sketch 插件 ：WeSketch》
最后营勤，多謝大家的時間灵嫌。
——
