[中秋福利]盘点那些让你事半功倍的sketch插件

Posted 2021-04-26 UXOFFER

又到了一年一度的中秋节了，在这个象征圆满的美好节日里uxoffer团队也感谢各位小伙伴们的陪伴，特此借着这篇文章给大家送上月饼节福利（阅读完你就知道啦），话不多说，福利走着～

---

 

想做一枚好的设计师，工具用不6怎么行。前几天跟一直合作的某CEO大人聊天的时候，他告诉我有一个他特别佩服我的瞬间，竟然是有次远程会议的时候，我一边跟他讨论着需求屏幕上一边就把wireframe画好了，感觉我手速惊人，证明了我的职业素养（羞羞）。

不过确实，对于sketch的熟练度着实帮助我更高效的完成了手头的工作，减少了很多简单重复性劳动，能够把更多的时间放到客户和产品身上。

那么今天我就来分享几个你不得不用的sketch插件。

 

Runner - http://sketchrunner.com/

想要操作6，第一步要做到的就是全键盘操作。从键盘到鼠标的操作距离是帮助我们理解设计鸿沟和距离的一个很好的例子（请戳这篇文章了解更多：https://docs.google.com/document/d/1RLBoqgXM8KZfj1EceolTjJwC2JWnVJl9lNK0bo3C4N8/edit）

虽然在sketch这样的工具上真的实现全键盘操作是肯定不可能的，但是Runner这个工具，真正做到了所有能用键盘做的事情都帮我们用键盘实现了这个牛逼的梦想。不信你看看：

 

什么改字体，变大小，加图片，控制各种layer，根本就不在话下，打几个字母就能实现。

（大家原谅我，这图压缩之后也很大，大家还是自行下载runner感受一波）

更厉害的是用键盘预览和插入各种你预设好的symbol，再也不用去sketch右上角辛苦的找寻然后拖拽了。

当你拥有一个优秀的style guide之后，配合着runner，完成一边讨论需求一边就把初步的hi-fi图画好根本就不在话下。如果你的symbol里面还有合理的属性和继承关系，那你的工作效率绝对是光速的。（关于sketch symbol的继承关系我们下次再详细聊聊）

NestedSymbols,图片来源：https://medium.com/sketch-app-sources/icon-sets-with-color-override-in-sketch-f6c893278bd3

 

当然，如果你觉得runner就这么简单，你就错了。基本所有可以通过指令控制的事情，你都可以用runner实现。比如插件管理。每次sketch更新了我就要从新更新所有插件，很是头疼。然而runner让这件事情变成了一键化的，请看下图

（同理，这张其实也是gif来着，压缩之后质量太低简直不能看） 

Runner究竟有多厉害，真的只有用的人才知道。Runner是一位来自柏林的设计师Roy （https://medium.com/@rvroo）开发的，完全免费。有时候想想还有人在做着这些让世界更美好一点的事情，就会觉得非常温暖。

 

Craft

如果是Runner解放了我的双手，那么Craft则是帮我减少了很多不必要的重复性工作。如果用的好，真是做app设计的大利器。

Craft可以直接插入图片，文字等。刚面世的时候其实是想要解决Designwith real data，既用真是数据做设计的问题。后来大获好评，又出了很多很厉害的功能。

图片来自：https://speckyboy.com/sketch-app-craft/

 

最主要的就是你可以写入自己的数据，比如你的产品是一款电商产品，你可以把一些商品信息，价格，包括商品图片等信息写入一个json文件，craft的duplicate工具将帮你建立这些商品并且给他们真实的预设数据。下面的图是我当年给公司同事做的一个演示，mobile团队的设计师看到这个功能的时候眼睛都亮了。不过这个功能的技术门槛稍微高一些，平时使用的时候craft自带的各种预设数据就足够用了。

 更不用说，如果你是付费玩家，还能享受Freehand，直接在线讨论设计，远程工作什么的再也不怕了。

图片来自craft官网

 

还有个更厉害的，就是现在craft可以直接在sketch里面做prototype了，唯一的条件就是你需要有invision 的账户。

 

Iconfont

Iconfont是个很简单的小工具，但是解决了使用iconfont里面的种种痛点，比如总是要去看cheatsheet，看不到预览，更改icon比较麻烦等等。支持svg和json两种格式的iconfont，对于安装好的icon，可以搜索，可以直接插入。配合一下runner，改icon也完全可以脱离鼠标操作啦。

 

Magic Mirror

记得刚转到使用sketch的时候，每次想去做一个有透视效果的iphone上的UI预览图都要专门打开potoshop。Magicmirror出现之后真是让人爽的不行。相信你一看图就明白了：

想要这样高大上的展示图真的变成了点一下的事情：

 

只分享链接没资源的小编不是好小编。欢迎大家转发我们的文章并在后台回复截图和“中秋福利”，小编会双手奉上一套magic mirror的模板哦。

 

进阶版本

LaunchPad

作为一个技术宅，每次都在想，如果涉及想代码那样，一个类可以控制所有的相关属性比如颜色就好了。记得刚开始做设计的时候，强迫症的要保证一个按钮上，不论文字是长是短，左右留白都是一样大的，着实废了很多时间。

不过LauchPad的面世，包括LaunchPad和AutoLayout两个组件，真是拯救了本技术宅。从此之后我的按钮都长这样了，左右间距整齐：

 

加上之前说的下次会介绍的Nested Symbols，实现了颜色字体icon随便换的梦想：

图片来自：https://medium.com/sketch-app-sources/more-flexibility-with-buttons-in-sketch-cc496b125017

 

这套插件本意是想用sketch完成响应式设计，当你选择不同的设备大小的时候，直接生成响应式的sketch设计。比如下图，通过设置不同设计组件的响应模式，在iphone不同的size间可以自由切换。

 

在这个宗旨下，很多不同的应用就应运而生了，而之前的“自动留白”按钮就是其中之一。

 

后来Anima team在这个基础上做了LaunchPad，能够把你的设计图直接变成网站,并且生成的网站直接是响应式的。

你还可以在网站里面插入链接，包括内链和外链：

图片来自：https://medium.com/sketch-app-sources/introducing-launchpad-for-sketch-648b775f73dc

 

甚至还能插入一个表单：

 这两个工具需要你对于响应式设计有一些深层的理解，但是我心目中的真神器。

 

别忘了转发我们的文章并在后台贴上你转发的截图和以及回复关键词“中秋福利”，小编会给你想要的资源喔。

  往期干货   

---