2019合集 | 配合Sketch的逆天插件

以下都是本人在工作中常用到功能,并非插件全部功能。个人认为也不一定每个功能都要去用,很多用处不大的,没必要费脑子记住。

你是否也有过安装18N汉化插件后的惨痛教训?多次崩溃闪退,文件都不自动保存...相信不少人有过这个经历。我今天就为大家推荐几个真真实实实用的Sketch插件。

No.1  蓝湖

推荐指数 ⭐️⭐️⭐️⭐️⭐️

  • 自动标注,一键下载多倍切图 (我一般在symbol中标记切图)

  • 同步 Sketch Prototyping 并支持共享,交互跳转演示

  • Axure RP 8.0生成的Html文件压缩包上传至「项目文档」,在线查看产品原型界面

  • 在线添加标签,交互说明/设计说明同步实时更新

  • 按页面进行连线,清晰展现产品逻辑

  • 直接复制使用蓝湖生成 CSS、iOS 和 Android 代码(部分可直接使用)


应该有不少人和我一样觉得它跟 Mockplus/摹客挺像的,但是摹客体验上真心不如蓝湖。我用过两次,主要体现在以下3点:

  • 视觉上体验较差,摹客背景色/投影比较脏,不如蓝湖简洁清爽;

  • 摹客有问题需要提交书面申请,等待解决,而蓝湖有在线客服(现在版本升级企业版才有在线客服,但是加QQ群反馈也很及时);

  • 摹客没法识别symbol中的切图,只能识别面板中直接标记的,切图的范围不准,总偏大。


PS:不是蓝湖的托,是真心觉得这个团队规模很小,但力量很大。而且是在认真做产品,佩服。

No.2  Kitchen

推荐指数 ⭐️⭐️⭐️⭐️⭐️

  • 一键填充真实图片和文字(名字、邮箱、电话、日期、时间、地址)

  • 智能排版「边距」和「间距」,解放Sketch排版生产力(特别好用)

  • 一键拖拽使用海量 Iconfont 图标和自己上传至 Iconfont 网站的所有图标

  • 提供精选色板库,可直接使用

详细请看Kitchen的官方教程


No.3  Paddy

推荐指数 ⭐️⭐️⭐️⭐️

  • 让图层自动填充间距

  • 对齐和分布( h:表示水平  v: 表示垂直),与 Distributer 功能类似,但Paddy不稳定,对齐分布这块更推荐 Distributer

第一点和Kitchen里面的智能排版类似,在Symbol两者都可全局控制。唯一不同的是,Paddy不会影响组名,它是依据背景的命名进行全局控制的。


No.4 Image Replaste

推荐指数 ⭐️⭐️⭐️⭐️

  • 使用剪贴板图片一键快速填充图形(图层样式,非剪切蒙版)

Clipoard Fill 功能类似,但是Clipoard Fill太久没更新了(好像有一年没更新了,怕不稳定),所以推荐 Image Replaste 。


步骤:

1、command + shift + 4截图(Mac截图快捷键)

2、使用快捷键 command + shift + Y 粘贴至图形


No.5 Magic Mirror

推荐指数 ⭐️⭐️⭐️⭐️

  • 在 Sketch 中使用智能对象(需购买注册码)

步骤:

1、 Plugins > Magic Mirror > Enable / Disable MagicMirror 启用 / 禁用 Magic Mirror

2、打开并选中需要展示的画板,在 Sketch 界面右侧属性检查器可找到 Magic Mirror 面板,勾选 Include In Artboards 包含该画板(勾选 Auto Artboard Refresh 可在画板修改时自动刷新)

3、往 Sketch 拖入展示模版 / 样机,使用钢笔工具 V 绘制出智能对象的目标区域

4、选中目标区域,在右侧 Magic Mirror 面板中可选择智能对象的对应画板和缩放倍数 Auto @1-4x

5、执行 Plugins > Magic Mirror > Refresh All Artboards 可刷新所有画板


No.6  Sketch Isometric

推荐指数 ⭐️⭐️⭐️⭐️


  • 快速使用画板及图形生成轴测视图(有点像2.5D的感觉),不过它最好的使用方式是搭配 Magic Mirror 智能对象使用,用来包装作品很方便

基本功能演示

搭配 Magic Mirror后

2.5D效果可以绘制简单的插画

No.7  Easing Gradient 

推荐指数 ⭐️⭐️⭐️

  • 让你的渐变效果更好调节、更自然(command + alt  + G)

No.8  Chromatic Sketch

推荐指数 ⭐️⭐️⭐️

  • 创建更好看统一的渐变和色阶


与 Easing Gradient 的区别是:

1、Chromatic Sketch可创建色阶;

2、Chromatic Sketch 渐变不可手动调整,而 Easing Gradient 可以;

3、Chromatic Sketch 调整后的渐变可能会改变色相,而Easing Gradient只通过首尾两个颜色的深浅影响。


下图是我对两者做的比较:

很显然第1组 Chromatic Sketch 调整的渐变除红、绿外,还添加了橙色,第2组除了蓝、绿外,还添加了紫色!


No.9  RP

推荐指数 ⭐️⭐️⭐️


  • 一键将 Sketch 设计稿转换为 Axure 支持内容(方便做原型)


步骤:

1、control + shift + R 复制选中元素 / control + shift + P 复制所有画板中元素

2、打开 Axure 并新建文档,粘贴 到为 Axure


No.10  Rename It

推荐指数 ⭐️⭐️⭐️

  • 同时重命名多个图层(command + control + R)

  • 以升序或降序顺序重命名图层(键入 %n 按照图层名中含有的编号升序排列,同样也可使用 %N 来降序排列)

  • 命名中显示宽度和高度(键入 %w 或 %h 添加图层的宽度或高度)

  • 批量查找,并替换( command + control  + alt + R)


No.11  Alembic

推荐指数 ⭐️⭐️⭐️

  • 一键提取图片颜色(类似拾色器)


步骤:

1、执行 Plugins > Alembic 出现弹层

2、选中需要提取色值的图片

3、单击一个颜色将其色值复制到剪贴板


No.12  Symbol Organizer

推荐指数 ⭐️⭐️⭐️

  • 根据名称快速组织 Symbols 页

步骤:

1、进入 Symbols 页面

2、Plugins > Symbol Organizer > Configure Symbol Organizer ( command + option + shift +O)

3、Plugins > Symbol Organizer > Run Symbol Organizer( command + option + control + O )


按照 Symbol 名称建立标题这一功能,很适合做设计规范时使用

No.13  Distributor 

推荐指数 ⭐️⭐️


  • 快速使所选对象以指定间距按照垂直(V)/水平(H)分布

No.14  Flavor   

推荐指数 ⭐️

由像素大厨团队出品的一个插件,但由于其功能可替代性太强,所以...呃 了解就好,更推荐蚂蚁金服团队的 Kitchen,下载Flavor作备用也行。


  • 快速复制 (其实Make Gid 就可以做到,只是Flaver看起来比较直观)

  • 一键填充文字名字、邮箱、电话、日期、时间、地址(Kitchen也有)

以上就是我推荐的14款Sketch插件,

希望对大家有所帮助。

喜欢就动动手指评论/转发,

你的喜欢是我继续码字的动力!


扫码关注我的个人公众号获取更多干货~

UI&产品&开发协作利器 - 蓝湖

设计复用时代来临之 Humaaans

来说说多端UI设计

本文来自:宛苏    作者:宛苏

文章版权归原作者,内容为网络收集。如有侵权请告知我们并会及时删除。邮箱: hello@sketchui.net