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 文案会自动将小写转换为大写。
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