「插件」Runner更新Pro版,帮助设计师远离996

[image:8C5D6381-4A12-4B2F-9939-2FC14A6F134B-37899-0000DC2F0DEDD7B8/1*QBUj26eByCK4WpFlHRtInw.jpeg]
三年多前Runner团队在德国汉堡的骇客松上第一次发布了Sketch插件Runner的beta版本。从那以后,这个团队的目标一直很清晰:

创造一个加速设计工作流的工具。

他们只给Runner添加真正能帮设计师工作提速的功能,而非来者不拒。今天,Runner团队发布了史上最大一次版本更新:Runner Pro。

相关参数


高级功能

Runner Pro的设计思路是让Sketch中所有的功能都可以被高效调用。所以新增了两个核心功能「RunBar」和「Rider」。RunBar是一个高效迷你的工具栏,而Rider是一个进行样式复写的新途径。

RunBar - 一个自定义的迷你工具栏

[image:3AA132A4-7CED-4D36-AEDD-46A15B00E607-37899-0000EB3FD58F80B0/Runner Pro Demo – Runbar.2019-04-25 23_34_03.gif]
你可以在Sketch编辑区的上方发现一个迷你的工具栏,那就是RunBar,虽然小,但是集成了非常多实用的功能。RunBar会记录你最近浏览过的画板,为你提供后退或前进的导航功能。就好比你浏览器里的历史记录。对在大型项目里工作的设计师,真是救命了。
Jump Bar让你可以在任何页面的任何图层里进行导航,只需要两三次点击。当然你也可以在这里看到每个页面里所有的画板。
RunBar里的重头戏就是Actions。你可以把Sketch原生功能或者插件工具集成在这里。添加功能后,按住option拖动即可完成布置。有了Actions,你再也不会用到原生的工具栏了。他解放了宝贵的空间,尤其对小屏幕而言。
[image:E9A6FF78-754B-4375-9DAE-8CAE1A7E5CB4-37899-0000E3AEF779C6E0/1*3QHS2MhXOzp6bWeIXaGosA.png]
RunBar在很小的空间里发挥了很大的价值,这才是Runner团队为Sketch定制这个迷你工具栏的初衷。RunBar的每一部分都可以在设置里定制,让你可以保留对自己有用的部分。在这个只高26个像素的迷你工具栏里,你完全可以放置对自己最有用的部分和功能。

Rider - 新的样式复写方法

Runner最经典的一个功能就是插入组件。
当Sketch更新了组件复写功能时,组件变得强大高效。同时,插入组件变成了一个重要的小任务,跟复写他们的表现。迄今,Runner没有复写相关的功能。这次我们解决了这个需求。
[image:D42BF5FE-32B5-4FFE-A5B0-D2FDA24DAC31-37899-0000EB3E918C4D7F/Runner Pro Demo – Rider.2019-04-25 23_34_55.gif]
隆重介绍:Rider。一个新的方式来搜索和预览组件复写框,让你可以在设计系统里轻松导航,并执行正确的复写。使用Runner Pro你可以按住option单机任何复写框,会跳出Rider搜索框。
当然,我觉得这个功能一点屁用都没有,微笑脸。

Install Plugins - 插件详情

[image:58A04C42-8FD1-4018-B763-E7E0812BBDD5-37899-0000E6B39A00912A/1*T9GRxcZN7GLAuzGjP1e4GA.png]
这么长时间以来,Runner一直是设计师用来发现和安装插件的便捷方式。但是你无法通过简单的图标和描述确定这个插件可以解决手头的问题。新的插件预览界面你可以查看该插件包含的所有功能。一旦你发现这个插件满足需求,可以马上安装使用。

Dark Mode - 深色模式

[image:46351591-F942-4936-8200-15BD2B172508-37899-0000E12985A2014C/DarkModeLayer1.png]
Runner可以跟随macOS自动切换界面模式。

优化功能

当Runner团队开始升级插件时,他们开始裁剪没什么价值的功能,裁剪随着时间变得冗余的功能,这样我们才能把精力放在真正有用的功能上。除了RunBar和Rider,我们刷新了现存的功能,让Runner Pro成为了最好用的Sketch插件之一。一起看看这些优化点。

更显眼的组件预览

Runner团队把组件预览放在了窗口下方,这样预览面积就更大了,视野更开阔,并且让你准确鉴别长名字的组件。在你有一个庞大设计系统时尤其有用,或者当你要处理组件的长名字时。
[image:18C71579-F90C-4F70-8783-34CA29D7E156-37899-0000E5166739C2A7/1*OBUTVGgZnQswO9VAZNvY-A.png]

限制搜索范围

[image:EC377357-0637-4589-BBF3-36F6F0BB4F00-37899-0000E536DB4073FD/1*XNRGPdJted1rS0A4XJFmyQ.png]
你可以决定限制搜索范围,指定需要搜索的库,比如你在设计iOS应用界面,不需要搜索macOS的组件库。

命名建议

[image:8889234B-5F65-4A73-B735-2E6897F7E117-37899-0000E539AEB5F9A0/1*vDL7NQBH0mw9PSR113ru_Q.png]
创建组件和样式时,往往不记得之前的命名规则。在Runner中使用Create命令可以看到现存组件和样式的命名,从而作为参考,规范新的命名。

快捷键

[image:8DD82153-F3A2-4D69-B0EF-D8D735C424CC-37899-0000E541E9F3371A/1*viOmylnRj9RrV_iGXLtnxg.png]
现在可以在Runner自己的设置里调整各个功能对应的快捷键了。

基础功能

好了同学们,兴奋之余,让我们复习一下基础功能。之前的经典功能依然保留在Runner 中。

Run

[image:9D474EF8-02C4-4A7C-B061-6214F95859EA-37899-0000EB3C91BC6C7C/run.2019-04-25 23_31_54.gif]
你可以「Run」这个功能快速检索所有原生功能和插件功能。不要在繁复的菜单和原生工具栏里迷路了。

Goto

[image:970135E3-CF22-457D-A908-FFB2C67FB483-37899-0000EB39885674CA/goto.2019-04-25 23_30_25.gif]
立刻定位Sketch文件中任何一个页面、画板或者组件母版。

Insert

[image:EFD2C354-FC1B-4804-ADAD-F44E788AB9B9-37899-0000EB3A6BA0A18C/insert.2019-04-25 23_30_53.gif]
搜索和插入文件或组件库里的组件。

Apply

[image:41F848EA-7269-40D1-898F-3C686F3CDF83-37899-0000EB373FDAE759/apply.2019-04-25 23_29_16.gif]
为选定的图层应用共享样式。

Create

[image:7C494E1E-98F0-49DC-A82C-261AEC185AE4-37899-0000EB386E13E2F9/create.2019-04-25 23_29_53.gif]
用这个功能可以快速创建复用组件或共享样式。

Install

[image:93C1FD25-95DE-46E5-B704-7516CB543D21-37899-0000EB3B480F09EB/install.2019-04-25 23_31_24.gif] 用Install命令在Sketch中发现和安装插件。