最近閑暇的時候?qū)懥艘粋€小插件。 借此機會跟大家分享一下這個插件的流程以及它的誕生。

為什么要發(fā)展

—

一個UI設(shè)計的最終呈現(xiàn)，當(dāng)然取決于設(shè)計師自己的努力，但也必須考慮與前端工程師的充分溝通，這是為了提高溝通效率而存在的。

舉一個很常見的例子，我們在做大型項目的時候，經(jīng)常會遇到設(shè)計稿交付給前端工程師后需要更新的情況。 這些情況可能是由于需求變化或者早期設(shè)計不合理造成的。 而當(dāng)設(shè)計稿更新時，前端工程師僅僅通過“畫板名稱”其實很難快速找到設(shè)計師修改的地方。 這時設(shè)計者可以通過插件記錄自己修改的位置以及修改的描述。 我將此操作稱為“添加 Pin 圖”。

前端工程師打開有修改記錄的文件后，可以點擊插件菜單中的Show Log，查看設(shè)計者記錄的修改情況。 點擊后，他可以直接跳轉(zhuǎn)到修改的位置，并將修改指令與設(shè)計稿進行匹配。 。

下面的視頻解釋了如何使用它：

開發(fā)前準備

—

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

知道自己要解決什么問題之后，就可以看一下插件開發(fā)的基礎(chǔ)知識了。 最重要的是要了解插件實際上是使用JS語法直接調(diào)用Cocoa API的基本原理。

除了自己的開發(fā)者網(wǎng)站之外，作者Mike的The's Guide to @/the--guide-to----part-1-系列文章也是非常好的入門教程。

插件主要功能分解

—

例如，主要有三個功能：

獲取當(dāng)前視圖的位置：要實現(xiàn)這個功能sketch插件，我必須獲取當(dāng)前Page的ID、當(dāng)前視圖在X軸和Y軸上的滾動值以及視圖縮放的百分比。

在文件中記錄位置數(shù)據(jù)：在文件中查找存儲這些值的位置。

跳轉(zhuǎn)到之前記錄的位置：先切換到正確的Page，然后跳轉(zhuǎn)到正確的視圖位置。

更麻煩的是，目前還沒有文檔介紹實現(xiàn)這些方法的接口。 最有效的方法就是尋找功能相似的插件。 其中一些可能與您想要實現(xiàn)的功能類似。 你可以通過 來顯示包內(nèi)容，直接查看他們的代碼。 就是從-插件的一個小功能中，我找到了切換頁面和跳轉(zhuǎn)位置的方法，并開發(fā)完成。

跑通插件主要功能

—

這里有兩種方法可以幫助驗證您編寫的代碼：

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

2. 直接將代碼寫入App的“運行”菜單中，也可以運行代碼以獲得實時反饋。

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

編寫插件的UI

—

插件涉及到用戶輸入記錄和查看記錄，所以需要一個接口進行交互。 對于界面來說，主要有Mac原生界面開發(fā)和混合開發(fā)。 兩種選擇都有各自的優(yōu)點和缺點：

考慮到實際情況，錄入記錄的界面比較簡單，所以采用原生UI開發(fā)，而查看記錄的界面比較復(fù)雜，可以使用原生UI開發(fā)。 編寫完UI并簡單測試后sketch插件，插件的開發(fā)就完成了。 下一步就是讓大家了解我開發(fā)的插件，并方便大家下載。

發(fā)布插件

—

首先把你的插件放進去并復(fù)制地址，然后在-/-: An of ()中打開一個Issue并粘貼插件地址，就可以將插件發(fā)布到官網(wǎng)了。

除了在官方渠道發(fā)布之外，它也是大家喜聞樂見的插件平臺。 具體的發(fā)布方式也非常人性化。 您可以通過在中國發(fā)推文并附上地址來完成發(fā)布。

發(fā)布完成后，立即重啟即可發(fā)現(xiàn)。

最終廣告

—

下載方法：

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

如有侵權(quán)請聯(lián)系刪除！