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

下載地址：

• Dribbble →?PinLog
• Githhub → Github.com
• Sketch 官網搜索PinLog → SketchApp
• Sketch Runner 中直接搜索PinLog

為什么要開發 PinLog

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

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

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

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

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

開發前的準備

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

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

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

附 Sketch 新手指南：

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

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

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

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

跑通插件的主要功能

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

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

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

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

書寫插件的 UI

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

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

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

發布插件

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

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

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

PinLog的下載地址：

• Dribbble →?PinLog
• Githhub → Github.com
• Sketch 官網搜索PinLog → SketchApp
• Sketch Runner 中直接搜索PinLog

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

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

優設人氣專題

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

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

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

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

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

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com