快速生成Material 原生组件 | Sketch 技能分享

Android 的设计师福利到!

今天要介绍一个快速生成复杂 Material 组件的Sketch 插件—— Sketch Material。在介绍每个组件的生成方式同时,会给出对应组件的 Material Design 官方开发设计规范链接。

  • 全文阅读时长:5分钟

  • 多图

官方下载:https://websiddu.github.io/sketch-material/

GitHub下载:https://github.com/websiddu/sketch-material

 

安装

  1. 下载安装包

  2. 双击  Sketch Material.sketchplugin  完成安装

  3. 完成安装后的插件会在 Sketch > Plugins 中显示

各组件具体操作解析

快速生成Material 原生组件 | Sketch 技能分享

Sketch Material 一共有10个组件功能,可以帮助设计师快速的组建 Material Design 风格的组件,每次操作成功会生成该视觉样式分组,便于查找和多次使用。

 

1、生成 Buttons(按钮)

在 Sketch 中输入 button 所需文本,选中文本执行 Sketch Material > Button… 

共 6 种 Button(如下图左侧),由上到下依次对应右侧Button的样式。英文状态下生成的 button 文案会自动将小写转换为大写。

快速生成Material 原生组件 | Sketch 技能分享

快速生成Material 原生组件 | Sketch 技能分享

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 原生组件 | Sketch 技能分享

Material Design Chips 规范

https://material.io/guidelines/components/chips.html

 

3、生成 Diglogs

Diglogs 操作面板分左右两个区域。

左侧视觉样式选项,提供了 mobile 和Desktop 两种屏幕尺寸的样式,同时也可以选择是否显示弹窗顶部标题;

右侧为 Diglogs 文本输入区。

快速生成Material 原生组件 | Sketch 技能分享

Material Design Diglogs 规范

https://material.io/guidelines/components/dialogs.html

 

4、生成 Form(表单)

快速生成Material 原生组件 | Sketch 技能分享

表单的功能样式使用率很高,在很多地方都会出现。

表单操作面板左侧为样式视图,可选择操作 ADD   横向或者 +  纵向添加表格,或者 hover 进行删减。

快速生成Material 原生组件 | Sketch 技能分享

右侧为左侧选中的表格编辑器。共有 6 种表单样式可以选择。

快速生成Material 原生组件 | Sketch 技能分享

在表单设置中还可以导入和导出 JSON 文件,便于开发人员直接使用哟。

快速生成Material 原生组件 | Sketch 技能分享

Material Design Form 规范

https://material.io/guidelines/components/dialogs.html

5、生成 Icon

快速生成Material 原生组件 | Sketch 技能分享

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 原生组件 | Sketch 技能分享

Material Design  Snackbars 规范

https://material.io/guidelines/components/snackbars-toasts.html

 

7、生成 Table (表格)

快速生成Material 原生组件 | Sketch 技能分享

表格操作面板左侧为表格的基本选项,选择性生成需要的效果。也可以选择 table 尺寸。

同时,也可以直接在外部复制需要 Excel 和 Number  内容,黏贴到操作面板右侧,很贴心哦~

快速生成Material 原生组件 | Sketch 技能分享

Material Design Table 规范

https://material.io/guidelines/components/data-tables.html

 

8、生成 Tooltips (提示)

和生成 Button 一样,选中文本后执行命令可以直接生成。

快速生成Material 原生组件 | Sketch 技能分享

Material Design Tooltips 规范

https://material.io/guidelines/components/tooltips.html

 

9、生成 Typography (文本)

快速生成Material 原生组件 | Sketch 技能分享

同样,选中文字后,选中文本后执行命令即可调出文字面板进行更改,这些都是 Material Design 中规定的样式哦。

Material Design Typography 规范

https://material.io/guidelines/style/typography.html

 

9、生成 Elevations (投影高度)

共有7个投影值:0dp、1dp、2dp、4dp、6dp、8dp、16dp。

选中需要投影的图层,选择所需的投影高度即可完成设置。快速生成Material 原生组件 | Sketch 技能分享Material Design 规范

https://material.io/guidelines/material-design/elevation-shadows.html

 

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

 

▼热文推荐

500G 产品、运营、交互、UI设计,地表最强福利下载

王牌做图神器Sketch,简直让人欲罢不能

这套最强Sketch插件合集,竟然出自微信设计团队之手!?

APP切图常用英文对照参考

Sketch 技能分享三:Symbol ——模块化管理你的设计稿

快速生成Material 原生组件 | Sketch 技能分享

本文由波普先生编辑/原创,如需转载请回复“转载”并取得授权,否则视为抄袭

在波普先生公众号可回复以下关键词

回复“资源”,免费领取产品、运营、交互、UI设计,地表最强500G福利资源

回复“字体”,获得苹果中文/英文字体,安卓思源黑体/宋体

回复“光效”,获得珍藏Photoshop光效制作插件

回复“壁纸”,获得精选手机壁纸,每天有新惊喜

回复“科学上网”,获得设计师翻墙神器

始发于微信公众号:波普先生

通过「BeePress|微信公众号文章采集」WordPress 插件生成