sketch android模板,快速生成Material 原生组件 | Sketch 技能分享

原标题：快速生成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

最后一点，规范是官方设定出来的，给予我们在设计过程中的参考目标，但是我们在使用的过程中，还是可以根据发挥自己的创意，推陈出新，规范应该使得我们的设计更加统一和完整，不应该成为我们达到设计目标的束缚。

本文由波普先生编辑/原创返回搜狐，查看更多

责任编辑：