快速生成Material 原生组件 | Sketch 技能分享
Android 的设计师福利到！
今天要介绍一个快速生成复杂 Material 组件的Sketch 插件—— Sketch Material。在介绍每个组件的生成方式同时，会给出对应组件的 Material Design 官方开发设计规范链接。
全文阅读时长：5分钟
多图
官方下载：https://websiddu.github.io/sketch-material/
GitHub下载：https://github.com/websiddu/sketch-material
安装
下载安装包
双击 Sketch Material.sketchplugin 完成安装
完成安装后的插件会在 Sketch > Plugins 中显示
各组件具体操作解析
Sketch Material 一共有10个组件功能，可以帮助设计师快速的组建 Material Design 风格的组件，每次操作成功会生成该视觉样式分组，便于查找和多次使用。
1、生成 Buttons（按钮）
在 Sketch 中输入 button 所需文本，选中文本执行 Sketch Material > Button...
共 6 种 Button（如下图左侧），由上到下依次对应右侧Button的样式。英文状态下生成的 button 文案会自动将小写转换为大写。
Material Design Button 规范
https://material.io/guidelines/components/buttons.html#buttons-raised-buttons
2、生成 Chips
和 Button 操作不同，需要Chips 样式可直接执行 Sketch Material > Chip... 调出 Chips Generator（Chips 控制面板）。
控制面板分为左右两侧，左侧为6种 Chips 样式，右侧为 自由编辑区域，可添加和更改Chips所需要文案。选择和编辑完成后，点击 Generate 将会生成所需的 Chips 样式。
Material Design Chips 规范
https://material.io/guidelines/components/chips.html
3、生成 Diglogs
Diglogs 操作面板分左右两个区域。
左侧视觉样式选项，提供了 mobile 和Desktop 两种屏幕尺寸的样式，同时也可以选择是否显示弹窗顶部标题；
右侧为 Diglogs 文本输入区。
Material Design Diglogs 规范
https://material.io/guidelines/components/dialogs.html
4、生成 Form（表单）
表单的功能样式使用率很高，在很多地方都会出现。
表单操作面板左侧为样式视图，可选择操作 ADD 横向或者 + 纵向添加表格，或者 hover 进行删减。
右侧为左侧选中的表格编辑器。共有 6 种表单样式可以选择。
在表单设置中还可以导入和导出 JSON 文件，便于开发人员直接使用哟。
Material Design Form 规范
https://material.io/guidelines/components/dialogs.html
5、生成 Icon
Sketch Material > icon，调出icon库。输入关键词可以搜索到想要的icon。
同样也可以切换 icon 的颜色，在查看模式下切换，icon颜色不会有变化，选中所需icon，将其拖出icon 库，形成所需icon。
Material Design Icon 规范
https://material.io/guidelines/style/icons.html
6、生成 Snackbars
Snackbars 的操作面板和Diglogs 很像，同样提供了两个平台的尺寸，也可以对Button进行选择性隐藏。
Material Design Snackbars 规范
https://material.io/guidelines/components/snackbars-toasts.html
7、生成 Table （表格）
表格操作面板左侧为表格的基本选项，选择性生成需要的效果。也可以选择 table 尺寸。
同时，也可以直接在外部复制需要 Excel 和 Number 内容，黏贴到操作面板右侧，很贴心哦~
Material Design Table 规范
https://material.io/guidelines/components/data-tables.html
8、生成 Tooltips （提示）
和生成 Button 一样，选中文本后执行命令可以直接生成。
Material Design Tooltips 规范
https://material.io/guidelines/components/tooltips.html
9、生成 Typography （文本）
同样，选中文字后，选中文本后执行命令即可调出文字面板进行更改，这些都是 Material Design 中规定的样式哦。
Material Design Typography 规范
https://material.io/guidelines/style/typography.html
9、生成 Elevations （投影高度）
共有7个投影值：0dp、1dp、2dp、4dp、6dp、8dp、16dp。
选中需要投影的图层，选择所需的投影高度即可完成设置。Material Design 规范
https://material.io/guidelines/material-design/elevation-shadows.html
最后一点，规范是官方设定出来的，给予我们在设计过程中的参考目标，但是我们在使用的过程中，还是可以根据发挥自己的创意，推陈出新，规范应该使得我们的设计更加统一和完整，不应该成为我们达到设计目标的束缚。
▼热文推荐
Sketch 技能分享三：Symbol ——模块化管理你的设计稿
本文由波普先生编辑/原创，如需转载请回复“转载”并取得授权，否则视为抄袭
在波普先生公众号可回复以下关键词
回复“资源”，免费领取产品、运营、交互、UI设计，地表最强500G福利资源
回复“字体”，获得苹果中文/英文字体，安卓思源黑体/宋体
回复“光效”，获得珍藏Photoshop光效制作插件
回复“壁纸”，获得精选手机壁纸，每天有新惊喜
回复“科学上网”，获得设计师翻墙神器
