復(fù)雜Material Design風(fēng)格交互控件生成插件Sketch Material

Sketch Material是一名谷歌的設(shè)計(jì)師打造的sketch插件，這款插件可以幫助開發(fā)者們快速生成復(fù)雜的原質(zhì)化設(shè)計(jì)風(fēng)格的交互控件，例如按鈕、表單、表格等。該插件致力于提升設(shè)計(jì)師使用 Sketch 時(shí)的工作效率。

插件功能：

1、按鈕生成 | Button

選定文字圖層后，使用這個(gè)功能可以生成兩種類型（Flat、Raised）的按鈕，每種類型支持三個(gè)狀態(tài)（pressed，disable，normal）。生成按鈕時(shí)，會(huì)自動(dòng)將小寫英文轉(zhuǎn)化為大寫。

Material Design 中關(guān)于 Buttons 的描述[Buttons - Components - Material design guidelines] (https://material.io/guidelines/components/buttons.html#buttons-raised-buttons)

2、標(biāo)簽生成 | Chips

可以設(shè)置容器寬度，這個(gè)關(guān)系到標(biāo)簽自動(dòng)換行。在輸入文字后回車以生成標(biāo)簽，大家可以根據(jù)自己的需要選擇標(biāo)簽的狀態(tài)。

Material Design 中關(guān)于 Chips 的描述[Chips - Components - Material design guidelines] (https://material.io/guidelines/components/chips.html#chips-usage)

3、彈窗生成 | Dialogs

彈窗生成器支持生成移動(dòng)端和桌面端的彈窗，另外可以選擇是否帶有標(biāo)題。彈窗中的所有文字元素均可編輯。比直接置入 symbol 后再作修改要省事多了。該功能非常良心。

Material Design 中關(guān)于 Dialogs 的描述[Dialogs - Components - Material design guidelines] (https://material.io/guidelines/components/dialogs.html#dialogs-full-screen-dialogs)

4、表單生成 | Forms

支持添加包括單選框、復(fù)選框、輸入框等五種類型的表單元件。另外，自由度非常高，所有可視字段均可在生成器右側(cè)進(jìn)行編輯。該功能同樣非常良心。

1.7版本中部分字段沒有限制字長(zhǎng)，會(huì)溢出編輯框，我已在 Github 上向谷歌大大反饋。

5、圖標(biāo)庫(kù) | Icons | shift+command+i

圖標(biāo)庫(kù)比較強(qiáng)大，支持四種顏色的換色以及搜索，錄入了幾乎所有 material design 里用到的圖標(biāo)。就算不是在設(shè)計(jì) md 風(fēng)格的產(chǎn)品，概念稿的階段也可用這些圖標(biāo)來占位。

6、吐司生成 | Snackbar

吐司生成功能支持移動(dòng)端和桌面端的吐司，所有可見字段均可編輯。另外，你也可以選擇隱藏或顯示按鈕。

這里按鈕的文字輸入會(huì)有亂序情況，我也在 Github 上反饋了。

Material Design 中關(guān)于 Snackbar 的描述[Snackbars & toasts - Components - Material design guidelines] (https://material.io/guidelines/components/snackbars-toasts.html)

7、表格生成 | Table

表格生成器支持從 Excel 和 Number 里粘貼復(fù)制數(shù)據(jù)進(jìn)來，很驚艷。另外，可以選擇是否有表頭、復(fù)選框、投影以及換頁(yè)按鈕，也可以選擇表格的尺寸是舒適或緊湊。

生成器的左下角還有個(gè)效果預(yù)覽，挺有心。

8、提示生成 | Tooltip

和 Buttons 功能基本一致，就是選擇文字圖層后將其生成為提示框。

Material Design 中關(guān)于 Tooltips 的描述[Tooltips - Components - Material design guidelines](https://material.io/guidelines/components/tooltips.html)

9、文字樣式選擇 | Typography

選擇文字圖層后，在樣式選擇其中選擇對(duì)應(yīng)的樣式即可更改文字樣式，這些都是 Material Design 中規(guī)定的樣式。

Material Design 中關(guān)于文字樣式的規(guī)定[Typography - Style - Material design guidelines] (https://material.io/guidelines/style/typography.html#typography-typeface)

10、浮高調(diào)整 | Elevations

當(dāng)你選擇一個(gè)圖層或分組時(shí)，可以用該功能來調(diào)節(jié)其浮高投影，總共分了六個(gè)投影值。

使用注意：

如果在做 Material Design 風(fēng)格產(chǎn)品的設(shè)計(jì)，這款插件無疑是天上掉餡餅，省去了大量重復(fù)勞動(dòng)的時(shí)間。讓設(shè)計(jì)師能夠?qū)Ｗ⒂谠O(shè)計(jì)工作本身，而不是和 symbol 死磕。

當(dāng)然，也有個(gè)小問題，就是使用這個(gè)插件后會(huì)把 symbol 頁(yè)面弄的非常亂，這個(gè)還請(qǐng)大家使用前預(yù)估好風(fēng)險(xiǎn)。