提高溝通效率！幫設計師記錄修改位置的Sketch插件PinLog

@鐘二信 ：我們經(jīng)常會碰到設計稿交付前端工程師后，還需要更新設計稿的情況，如何讓工程師快速找到修改的地方呢，這個sketch插件專門為此而生！免費下載喲

下載地址：

• Dribbble →?PinLog
• Githhub → Github.com
• Sketch 官網(wǎng)搜索PinLog → SketchApp
• Sketch Runner 中直接搜索PinLog

為什么要開發(fā) PinLog

一個 UI 設計的最終呈現(xiàn)，當然要靠設計師的自我奮斗。但是，也要考慮到和前端工程師的充分溝通，PinLog 就是為了提高溝通效率而存在。

舉個很常見的例子，我們在進行大型項目的時候，經(jīng)常會碰到設計稿交付前端工程師后還需要更新設計稿的情況，這些情況可能是因為需求變更，也可能是前期設計不合理造成的。而當設計稿更新后，前端工程師僅憑「畫板名稱」其實很難快速的找到設計師修改的地方在哪里。

這時設計師就可以通過 PinLog 插件記錄下自己的修改位置和對這個修改的描述，我把這個動作稱之為 Add Pin 。

當前端工程師打開這個有修改記錄的 Sketch 文件之后，可以點擊插件菜單中的 Show Log 看到設計師記錄下的修改，點擊后可以直接跳轉到修改的位置，將修改的說明和設計稿對應起來。

下面的視頻介紹了 PinLog 的具體使用方法：

開發(fā)前的準備

如果你是一個插件開發(fā)的初學者，最好從解決簡單的問題開始。筆者最初開發(fā)的一個插件就是為了讓 Text 圖層的行高等于其字體大小的1.4倍，非常簡單，核心代碼甚至只有兩行。

知道自己要解決什么問題后可以去 Sketch Developer?看看插件開發(fā)的基礎，其中最重要的就是要了解 Sketch 插件其實是利用 JS 的語法來直接調(diào)用 Cocoa API 這一基本原理。

除了 Sketch 自己的開發(fā)者網(wǎng)站，Medium 作者 Mike Mariano 的 The Beginner’s Guide to Writing Sketch Plugins 系列文章也是非常好的入門教程。

附 Sketch 新手指南：

• 《Sketch知識樹！最詳細入門教程合集》
• 《10個幫你UI設計提速的Sketch使用技巧》

以PinLog 為例，最主要的功能有三個：

• 得到當前視圖的位置：要實現(xiàn)這個功能我就必須得到當前 Page 的 ID ，當前視圖在 X、Y 軸上的滾動值和視圖縮放的百分比。
• 將位置數(shù)據(jù)記錄在文件中：要在 Sketch 文件中找個地方存儲這些值。
• 跳轉到之前記錄的位置：先切換到正確的 Page ，再跳轉到正確的視圖位置。

而比較頭疼的是，目前 Sketch 沒有提供文檔來介紹實現(xiàn)這些方法的接口，最有效率的辦法是去看類似功能的插件，它們可能某部分與你想要實現(xiàn)的功能類似，你可以通過顯示包內(nèi)容，直接查看它們這部分代碼。PinLog 就是從 Sketch-Commands 插件的一個小功能中查閱到了切換 Page 和跳轉位置的方法，才得以開發(fā)完成。

跑通插件的主要功能

這里有兩個方法幫助驗證你所寫的代碼：

1. 使用 Sketch 官方出品的?Skpm 來生成插件模板，Skpm 還可以在你更新代碼后，實時渲染 Sketch 文件，幫助調(diào)試代碼。

2. 直接將代碼寫到 Sketch App 「Plugin」菜單的「Run Script」中，也可以運行代碼得到實時反饋。

通過上面這兩種方法，把之前分解出來的主要功能在 Sketch 上跑通，那么插件開發(fā)最重要的部分就基本完成了，有些簡單的插件甚至就已經(jīng)開發(fā)完成了。

書寫插件的 UI

PinLog 插件涉及到用戶輸入記錄和查看記錄，所以會需要有界面來交互。針對界面主要有 Mac 原生界面開發(fā)和 WebView 混合開發(fā)，兩種方案各有利弊：

• 原生界面 交互時可以很方便的調(diào)用 Cocoa 方法，不存在通信的問題，但是因為大多數(shù)插件開發(fā)者對 Mac 的開發(fā)并不了解，所以很難寫出較為復雜的原生UI。
• WebView 大多數(shù)開發(fā)者都熟悉 JS 和 Html 的開發(fā)，可以寫出較為復雜的 UI ，但是 WebView 中的 JS 是不能調(diào)用 Cocoa 方法的，需要用到 URL 的 Hash 值來傳遞，具體可以參考 Awkward 的文章 How to create floating Sketch plugins。

考慮到 PinLog 的實際情況，輸入記錄時的界面比較簡單，因此使用原生的 UI 開發(fā)，查看記錄的界面比較復雜可以使用 WebView 來開發(fā)。寫好UI后，再簡單測試一下，PinLog 插件的開發(fā)就完成了，接下來就是要讓大家知道我開發(fā)的插件，并且可以方便的下載。

發(fā)布插件

首先把你的插件放到 Github 中拷貝下地址，然后通過在 GitHub - sketchplugins/plugin-directory ：?An official directory of Sketch Plugins 中開一個 Issue 并貼上插件地址的方式，可以將插件發(fā)布到 Sketch 的官網(wǎng)中 。

除了發(fā)布在官方渠道上，Sketch Runner 也是大家喜聞樂見的插件平臺，具體發(fā)布方式也很人性化，在 Twitter 中發(fā)推給 Sketch Runner 并附上 Github 地址，就可以完成發(fā)布。

完成發(fā)布后，重啟 Sketch 馬上就能在 Sketch Runner 的 Install 中找到。

PinLog的下載地址：

• Dribbble →?PinLog
• Githhub → Github.com
• Sketch 官網(wǎng)搜索PinLog → SketchApp
• Sketch Runner 中直接搜索PinLog

感謝我司 Lola Jiang 為 PinLog 插件提供英文文案。

歡迎關注微信公眾號：「DesignING」

優(yōu)設人氣專題

iPhone X 學習指南丨優(yōu)設獨家專訪丨在線摳圖神器丨靈感大全

Sketch神器?|?免費圖庫丨配色神器丨讀書計劃丨PPT 神器丨魯班設計

iOS 11 學習指南丨人工智能丨PS 教程丨AI 教程丨C4D 教程?|?3D教程

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內(nèi)人氣最高的設計網(wǎng)址導航，設計師必備：http://hao.uisdc.com