「插件」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中發現和安裝插件。