我們努力使Sketch成為夢想中的“設(shè)計師工具箱”。但是每個人都有不同的需求,也許你需要一個我們還沒有實現(xiàn)的功能。不要擔(dān)心:插件已經(jīng)可以滿足您的需求,或者您可以輕松創(chuàng)建一個插件。
如果您有興趣擴(kuò)展Sketch,那么您就位于正確的位置。在這里,我們展示Sketch可擴(kuò)展性文檔的概要以及如何快速構(gòu)建您的第一個Sketch插件。
如果您只想使用現(xiàn)有的插件,請參閱插件目錄。
你可以用插件做什么?
Sketch中的插件可以做任何用戶可以做的事情(甚至更多!)。例如:
- 根據(jù)復(fù)雜的規(guī)則選擇文檔中的圖層
- 操作圖層屬性
- 創(chuàng)建新圖層
- 以所有支持的格式導(dǎo)出資產(chǎn)
- 與用戶交互(要求輸入,顯示輸出)
- 從外部文件和Web服務(wù)獲取數(shù)據(jù)
- 與剪貼板交互
- 操作Sketch的環(huán)境(編輯指南,縮放等...)
- 通過從插件調(diào)用菜單選項來自動化現(xiàn)有功能
- 設(shè)計規(guī)格
- 內(nèi)容生成
- 透視轉(zhuǎn)換
查看Sketch插件的最簡單方法是通過插件目錄。您可以瀏覽有用的插件,安裝它們以嘗試它們,并了解如何將Sketch擴(kuò)展到您自己的設(shè)計場景。
編寫一個擴(kuò)展
我們創(chuàng)建了一個小工具鏈,這使得創(chuàng)建一個新插件變得非常簡單。這對開始非常有用,你也可以找到現(xiàn)有的插件示例。
擴(kuò)展程序是用JavaScript編寫的。Sketch提供了一個小型REPL式控制臺,您可以在嘗試構(gòu)建插件之前試用其API。
擴(kuò)展想法
Sketch功能的許多優(yōu)秀社區(qū)創(chuàng)意可以更好地實現(xiàn)為插件而不是核心產(chǎn)品的一部分。這樣用戶就可以通過安裝正確的插件來挑選他們想要的功能。Sketch團(tuán)隊在插件請求庫中跟蹤可能的插件為GitHub問題。如果你正在尋找一個偉大的插件來構(gòu)建,請看看這些問題。
下一步
- 您的第一個插件 - 嘗試創(chuàng)建一個簡單的Hello World插件。
- 擴(kuò)展API - 了解Sketch可擴(kuò)展性API。
- 擴(kuò)展示例 - 您可以查看和構(gòu)建的擴(kuò)展示例列表。
- 開發(fā)者論壇 - 一個論壇,插件開發(fā)者分享他們關(guān)于Sketch的所有知識的知識。
插件基礎(chǔ)
在磁盤上,插件只是以特定布局排列的文件夾。
它包含一個或多個腳本。每個腳本定義一個或多個以某種方式擴(kuò)展Sketch的命令。它還可以包含命令用于執(zhí)行任何操作的任何其他可選資源(如圖像)。
插件腳本使用JavaScript編寫。
術(shù)語
在我們進(jìn)一步討論之前,讓我們定義一些術(shù)語。
- 插件:一組腳本,命令和其他資源組合在一起作為一個獨(dú)立單元
- Plugin Bundle:磁盤上的文件夾,其中包含組成插件的文件
- 操作:用戶所做的事情(選擇菜單或更改文檔)觸發(fā)命令
- 命令:一個插件可以定義多個命令; 通常每一個都與不同的菜單或鍵盤快捷鍵相關(guān)聯(lián),并導(dǎo)致執(zhí)行不同的處理程序。
- Handler:執(zhí)行一些代碼來實現(xiàn)Command的函數(shù)。
- 腳本:包含一個或多個實現(xiàn)處理程序的命令的一個或多個JavaScript文件。
我如何制作插件?
到現(xiàn)在為止,你可能想知道如何開始寫你自己的。
開始使用插件最簡單的方法是打開Sketch,打開文檔并control + shift + k打開Run Script面板。你不需要安裝任何東西; 你可以打開它并在那里實驗。如果您想使用真實的開發(fā)環(huán)境(您需要為了分發(fā)插件),請查看開發(fā)環(huán)境頁面。
最小的插件示例如下所示:
export default function(context) {
context.document.showMessage('Hello, world!')
}
它在Sketch文檔底部呈現(xiàn)一個Toast “Hello,world!”。
接下來的幾個指南將逐漸向您介紹插件的內(nèi)部工作。我們將檢查插件的構(gòu)建塊:清單和腳本。一旦你掌握了它們,你可以創(chuàng)建復(fù)雜的插件!
關(guān)于JavaScript的說明
Sketch插件是用JavaScript編寫的,所以我們假設(shè)您對JavaScript語言有基本的了解。如果您覺得不太自信,我們建議您刷新JavaScript知識,以便更輕松地進(jìn)行跟蹤。
我們還在示例中使用了一些ES6語法。我們盡量少用,因為它還是比較新的,但我們鼓勵您熟悉箭頭函數(shù),let和const語句。
該腳本不在瀏覽器或節(jié)點環(huán)境中運(yùn)行,而是在每個本機(jī)MacOS和Sketch API都暴露的特殊環(huán)境中運(yùn)行。這是一個先進(jìn)的,但有必要真正理解如何建立更先進(jìn)的東西。
原文:https://developer.sketchapp.com/guides/
您的第一個插件
本文檔將帶您創(chuàng)建您的第一個Sketch插件(“Hello World”),并將解釋Sketch的基本擴(kuò)展性概念。
在本演練中,您將向Sketch添加一個新命令,該命令將顯示一個簡單的“Hello World”消息。在稍后的演練中,您將與Sketch畫布交互并查詢用戶當(dāng)前選定的圖層。
先決條件
您需要安裝Node.js并且可以使用它$PATH。Node.js包括npm,Node.js包管理器,它將用于安裝Sketch插件開發(fā)人員的工具鏈。
生成一個新的插件
將自己的功能添加到Sketch的最簡單方法是通過添加命令。一個命令注冊一個回調(diào)函數(shù),該函數(shù)可以從插件菜單或鍵綁定中調(diào)用。
我們編寫了一個小工具鏈,skpm以幫助您入門。安裝skpm并搭建一個新的插件:
$ npm install -g skpm
$ skpm create my-plugin
$ cd my-plugin
運(yùn)行你的插件
- 構(gòu)建插件:
npm run build - 啟動Sketch,打開文檔
- 選擇
Plugins>my-plugin>My Command - 恭喜!您剛剛創(chuàng)建并執(zhí)行了您的第一個Sketch命令!
插件的結(jié)構(gòu)
運(yùn)行后,生成的插件應(yīng)該具有以下結(jié)構(gòu):
.
├── .gitignore
├── README.md
├── src # sources
│ ├── manifest.json # plugin's manifest
│ └── my-command.js # source code of the command
├── node_modules
│ └── skpm # the sketch plugin developer toolchain
├── my-plugin.sketchplugin # compilation output, the actual plugin
│ └── Contents
│ ├── Resources
│ └── Sketch
│ ├── manifest.json
│ └── my-command.js
└── package.json
讓我們通過所有這些文件的目的,并解釋他們做了什么:
插件清單: manifest.json
- 每個Sketch插件必須有一個描述它及其功能的manifest.json文件。
- Sketch在啟動過程中讀取此文件。
- 請閱讀
manifest.json清單參考以獲取更多信息。
package.json
如果您之前查看過nodejs包,則必須熟悉它package.json。它描述了你的包(在這種情況下是插件)的依賴關(guān)系,并包含一些關(guān)于它的元數(shù)據(jù)。
你會注意到一個特殊的領(lǐng)域:skpm。你可以在這里指定關(guān)于你的插件的元數(shù)據(jù)(而不是在這里manifest.json)。作為一個經(jīng)驗法則,我通常會manifest.json在將所有其他信息放入時將相關(guān)命令的信息放入package.json(skpm將在編譯時將這些信息添加到manifest.json中,以便您不必復(fù)制它們)。
src/my-command.js
這是一個插件命令定義的地方。它被引用manifest.json并且必須導(dǎo)出一個函數(shù)。
一個簡單的改變
在中src/my-command.js,嘗試替換命令實現(xiàn)以顯示所選圖層的數(shù)量:
export default function(context) {
const selectedLayers = context.selection
const selectedCount = selectedLayers.length
if (selectedCount === 0) {
context.document.showMessage('No layers are selected.')
} else {
context.document.showMessage(`${selectedCount} layers selected.`)
}
}
通過運(yùn)行重新構(gòu)建插件npm run build。打開一個Sketch文檔,選擇一些圖層。當(dāng)您運(yùn)行my-plugin命令時,您現(xiàn)在應(yīng)該可以看到所選圖層的數(shù)量。
專業(yè)提示:您可以通過運(yùn)行自動重建插件
npm run watch
發(fā)布您的擴(kuò)展
閱讀關(guān)于如何共享插件。
下一步
在這個演練中,我們看到了一個非常簡單的插件。
如果您想更詳細(xì)地了解插件API,請嘗試以下主題:
- 擴(kuò)展API概述 - 了解Sketch可擴(kuò)展性的可能性。
- 其他插件示例 - 查看我們的示例插件項目列表。
原文:https://developer.sketchapp.com/guides/first-plugin/
開發(fā)環(huán)境
如果您花費(fèi)了開發(fā)Plugins for Sketch的不少重要時間,則可以使用這些首選項對工作流程進(jìn)行一些改進(jìn)。
由于并非所有Sketch用戶都是插件開發(fā)人員,因此在“首選項”面板中為這些首選項設(shè)置UI并沒有任何意義。您需要使用Terminal.app來啟用/禁用它們。
為插件定義一個代碼編輯器
有最喜歡的代碼編輯器?你可以告訴Sketch使用它來編輯插件。例如,如果你使用[Atom],(https://atom.io/)你可以這樣做:
$ defaults write ~/Library/Preferences/com.bohemiancoding.sketch3.plist "Plugin Editor" "/usr/local/bin/atom"
并重新啟動Sketch,您會看到一些新的菜單項:
- 轉(zhuǎn)到首選項>插件并右鍵單擊任何列出的插件。您將看到一個“編輯代碼...”選項,該選項將啟動編輯器并打開所選的插件代碼。
- 打開插件菜單,你會看到一個'編輯插件...'選項,它將啟動你的編輯器并打開整個'插件'文件夾。
調(diào)整“自定義插件...”編輯器
要更改“運(yùn)行腳本...”面板中使用的字體(例如,使用SF Mono),可以這樣做:
$ defaults write ~/Library/Preferences/com.bohemiancoding.sketch3.plist scriptEditorFont "SF Mono Light"
要回到默認(rèn)設(shè)置(Andale Mono),只需刪除首選項:
$ defaults delete ~/Library/Preferences/com.bohemiancoding.sketch3.plist scriptEditorFont
要更改編輯器的字體大?。J(rèn)值為12),請使用
$ defaults write ~/Library/Preferences/com.bohemiancoding.sketch3.plist scriptEditorFontSize 14
監(jiān)聽Action API中的所有操作
警告:這是一項非常昂貴的操作,并且會影響Sketch的性能。請僅在您的開發(fā)系統(tǒng)上使用此功能,而不要在客戶的計算機(jī)上啟用此功能。
當(dāng)與新的合作操作API,你可能想(試圖找到時專門聽取多個事件,其 事件是您要使用的一個)。
為此,請使用actionWildcardsAllowed首選項。如果設(shè)置為YES,則允許腳本為事件注冊通配符處理程序。這是默認(rèn)關(guān)閉的,它可能會對性能產(chǎn)生不利影響,因此請小心處理。
$ defaults write ~/Library/Preferences/com.bohemiancoding.sketch3.plist actionWildcardsAllowed -bool YES
一旦你這樣做了,你可以通過*在你的handlers.actions對象中添加一個鍵來告訴你的插件為每個操作調(diào)用一個方法manifest.json:
{
...
"handlers": {
+ "actions": {
+ "*": "onActionHandler"
+ }
}
...
}
運(yùn)行前始終重新加載腳本
出于性能原因,Sketch會緩存Plugins文件夾的內(nèi)容。這對用戶來說非常方便,因為插件運(yùn)行速度非???,但如果您是開發(fā)人員,則會讓您的生活變得艱難。這就是為什么我們添加了一個首選項來禁用此緩存機(jī)制并強(qiáng)制Sketch始終從磁盤重新加載插件的代碼:
$ defaults write ~/Library/Preferences/com.bohemiancoding.sketch3.plist AlwaysReloadScript -bool YES
如果啟用此功能,只要保存腳本,就可以在Sketch中進(jìn)行測試了(再見,只是為了測試一個小小的改變而重新啟動它)!
請注意,此設(shè)置決定了當(dāng)Sketch為腳本創(chuàng)建新的JavaScript上下文時,腳本的來源是否從光盤重新加載。如果是NO,源會被緩存,如果是YES,源始終會從光盤重新加載。
然而,當(dāng)一個新的JavaScript上下文產(chǎn)生時,它不會做的事情就會改變。對于長時間運(yùn)行的腳本,相同的上下文保存在內(nèi)存中(它必須是 - 正在運(yùn)行的腳本正在使用它),直到腳本退出。因此,如果您正在測試長時間運(yùn)行的腳本,您仍然必須找到停止腳本的方法,以避免上下文丟失(通常意味著重新啟動Sketch或設(shè)置coscript.setShouldKeepAround(false))。
檢查WebView
如果你的插件使用webview,很可能你需要在某個時候檢查它。
為此,您需要添加首選項:
$ defaults write com.bohemiancoding.sketch3 WebKitDeveloperExtras -bool true
然后你可以簡單地右鍵點擊你的web視圖并點擊Inspect。檢查員應(yīng)該出現(xiàn)。
原文:https://developer.sketchapp.com/guides/preferences/
調(diào)試
開發(fā)Sketch插件時,您可能需要一些方法來了解代碼運(yùn)行時發(fā)生了什么。
日志
調(diào)試JavaScript代碼最常用的方法是console.log在關(guān)鍵步驟中添加一堆。不幸的是,JavaScriptCore(Sketch插件運(yùn)行的上下文)沒有提供console。相反,調(diào)用的特殊方法log是可用的。
有幾個選項可以查看這些日志:
- 打開Console.app并查找Sketch日志
- 看看這個文件
~/Library/Logs/com.bohemiancoding.sketch3/Plugin Output.log - 運(yùn)行
skpm log它將輸出上面的文件(skpm log -f對日志進(jìn)行流式處理)
skpm將填充console以便console.log照常使用。除了使用log場景后面的方法之外,它還會將日志轉(zhuǎn)發(fā)給sketch-dev-tools。
debugger 和變量檢查
當(dāng)插件運(yùn)行時,Sketch會創(chuàng)建一個與其關(guān)聯(lián)的JavaScript上下文。可以使用Safari檢查此上下文。
在Safari中,轉(zhuǎn)到Develop> name of your machine> Automatically Show Web Inspector for JSContexts。而且你可能想要啟用,Automatically Pause Connecting to JSContext否則檢查器將會關(guān)閉,然后才能與之交互(當(dāng)腳本運(yùn)行完成后,上下文將被銷毀)。
現(xiàn)在,您可以在代碼中使用斷點,在運(yùn)行時檢查變量的值等。
Objective-C類內(nèi)省(Introspection)
Sketch中的插件系統(tǒng)可讓您完全訪問應(yīng)用程序的內(nèi)部結(jié)構(gòu)和macOS中的核心框架。Sketch使用Objective-C構(gòu)建,其類被橋接到JavaScript。知道你正在處理哪些類以及定義了哪些方法通常很有用。
您可以使用由網(wǎng)橋定義的一些自省方法來訪問這些信息。例如:
String(context.document.class()) // MSDocument
var mocha = context.document.class().mocha()
mocha.properties() // array of MSDocument specific properties defined on a MSDocument instance
mocha.propertiesWithAncestors() // array of all the properties defined on a MSDocument instance
mocha.instanceMethods() // array of methods defined on a MSDocument instance
mocha.instanceMethodsWithAncestors()
mocha.classMethods() // array of methods defined on the MSDocument class
mocha.classMethodsWithAncestors()
mocha.protocols() // array of protocols the MSDocument class inherits from
mocha.protocolsWithAncestors()
Sketch的開發(fā)工具
我們創(chuàng)建了一個小的Sketch特定工具來幫助您調(diào)試插件,并希望讓您的生活更輕松。它采用Sketch插件的形式,您可以在此下載并隨其啟動cmd + option + j。
原文:https://developer.sketchapp.com/guides/debugging-plugins/
ActionAPI
在Sketch 3.8中,我們引入了Action API:一種讓插件對應(yīng)用程序中的事件作出反應(yīng)的方式。使用它,插件作者可以編寫在觸發(fā)某些操作時執(zhí)行的代碼,如“打開文檔”,“保存”,“添加畫板”......
什么是操作?
操作是應(yīng)用程序中發(fā)生的事件,通常是用戶交互的結(jié)果。操作有名稱CloseDocument,DistributeHorizontally或者TogglePresentationMode,你可以告訴你的插件在這些操作被觸發(fā)時運(yùn)行代碼。
我如何注冊我的插件來“聆聽”一個操作?
簡單:你只需在manifest.json你的插件已有的文件中添加一個處理程序。
我們將為該OpenDocument操作添加一個新的處理程序:
"commands" : [
...
+ {
+ "script" : "my-action-listener.js",
+ "name" : "My Action Listener",
+ "handlers" : {
+ "actions": {
+ "OpenDocument": "onOpenDocument"
+ }
+ },
+ "identifier" : "my-action-listener-identifier"
+ }
...
],
我們告訴我們的插件,我們希望onOpenDocument在文檔打開時運(yùn)行該功能,所以讓我們將其添加到my-action-listener.js:
export function onOpenDocument(context) {
context.document.showMessage('Document Opened')
}
保存所有內(nèi)容,構(gòu)建插件,現(xiàn)在,無論何時在Sketch中打開文檔,您都應(yīng)該看到一個小小的吐司(Toast)橫幅,上面寫著“文檔已打開”。
操作上下文
當(dāng)一個操作被觸發(fā)時,Sketch可以向目標(biāo)函數(shù)發(fā)送一些關(guān)于操作本身的信息(例如選擇改變時選擇的圖層,或者打開新文檔時的當(dāng)前文檔)。我們稱之為操作上下文,并且可以使用context作為目標(biāo)函數(shù)的參數(shù)發(fā)送的操作context.actionContext。
但請記住,并非所有操作都會設(shè)置Action Context。事實上,他們中的大多數(shù)目前都沒有,所以如果您認(rèn)為您想在Action Context中訪問某些內(nèi)容,請向我們發(fā)送便條,然后盡快添加。
begin/ finish操作
一些操作(如SelectionChanged)實際上發(fā)生在兩個階段:begin和finish。如果你想調(diào)用一個函數(shù)只對其中的一個,你可以添加一個處理程序SelectionChanged.begin,或SelectionChanged.finish。如果您不添加任何內(nèi)容,該操作將被觸發(fā)兩次。
找到正確的操作
有關(guān)API中所有可用操作的列表,請查看操作參考部分。
專業(yè)提示:有時瀏覽列表的工作量太大,而您只想要更直接一些。對于這些情況,您可以聽取所有操作以找到您需要的一個。
再次,如果有任何事件想要添加到列表中,請告訴我們,我們將嘗試添加它(由于性能原因,某些事件不在列表中,例如“圖層被拖動”)。
下一步
如果您想更詳細(xì)地了解Action API,請嘗試以下主題:
- Action API參考 - 了解可用操作的完整列表。
- 其他插件示例 - 查看我們的示例插件項目列表。
原文:https://developer.sketchapp.com/guides/action-api/
發(fā)布插件
Sketch插件列在GitHub存儲庫中。本文檔解釋了如何在那里發(fā)布它以及如何讓Sketch接收插件的更新。
第一次發(fā)布
Sketch插件列在GitHub存儲庫中:https://github.com/sketchplugins/plugin-directory。
要將您的插件添加到列表中,請使用關(guān)于您的插件的信息打開PR。合并后,您的插件將顯示在此處:https://sketchapp.com/extensions/plugins/
如果您使用skpm,第一次使用插件發(fā)布skpm publish,它會自動為您創(chuàng)建PR。
發(fā)布更新
從Sketch v45起,Sketch提供了官方支持的機(jī)制來更新應(yīng)用程序中的插件。
如果您的插件已經(jīng)內(nèi)置了自己的更新機(jī)制,我們鼓勵您轉(zhuǎn)向使用新系統(tǒng)。這將改善用戶體驗,因為用戶將能夠在應(yīng)用程序的“首選項”面板中管理選項卡內(nèi)的所有已安裝插件。
啟動時,我們檢查所有安裝插件的更新,如果有任何問題,我們會在Sketch的窗口上顯示一個徽章。點擊它會讓用戶訪問應(yīng)用程序的首選項,在那里他們將能夠更新他們的插件。
目前Sketch只允許用戶更新到最新版本。將來的Sketch版本可能會為用戶提供更多的選項來選擇可以下載和安裝哪個插件版本。
您有兩種解決方案可以選擇使用此更新機(jī)制:
1.使用 skpm
通過運(yùn)行skpm publish,它會自動發(fā)布插件的更新版本,并確保Sketch可以提取它。
2.手動
manifest.json包含在您的插件包中的文件中有一個額外的條目,您需要定義更新才能正常工作。
該條目被調(diào)用appcast,它是一個指定appcast文件的URL的字符串。
appcast.xml文件
appcast文件包含有關(guān)插件更新的信息,例如可用更新的版本以及可從中下載更新的位置。Sketch下載此文件以確定是否有可用的插件更新。
Appcast符合Sparkle文檔和發(fā)布更新頁面中描述的Sparkle定義的appcast 。對于Sketch插件,僅支持.zip文件作為附件。
當(dāng)用于插件時,最小和最大系統(tǒng)版本不涉及操作系統(tǒng)的版本。究竟如何將它們用于更高版本的Sketch中仍未確定。
以下Appcast示例列出了插件的三個不同版本。每個版本都有自己的下載鏈接和簡要說明文字。
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:sparkle="http://www.andymatuschak.org/xml-namespaces/sparkle" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
<title>Hello World Sketch Test Plugin</title>
<link>http://sparkle-project.org/files/sparkletestcast.xml</link>
<description>Brilliant Hello World Plugin</description>
<language>en</language>
<item>
<title>Version 1.1</title>
<description>
<![CDATA[
<ul>
<li>Minor update v1.1</li>
</ul>
]]>
</description>
<enclosure url="https://brillianthello.sketchplugins.com/files/HelloWorldSketchPluginTestv11.zip" sparkle:version="1.1" />
</item>
<item>
<title>Version 1.2</title>
<description>
<![CDATA[
<ul>
<li>Minor update v1.2</li>
</ul>
]]>
</description>
<enclosure url="https://brillianthello.sketchplugins.com/files/HelloWorldSketchPluginTestv12.zip" sparkle:version="1.2" />
</item>
<item>
<title>Version 2.0</title>
<description>
<![CDATA[
<ul>
<li>Major update v2.0</li>
</ul>
]]>
</description>
<enclosure url="https://brillianthello.sketchplugins.com/files/HelloWorldSketchPluginTestv20.zip" sparkle:version="2.0" />
</item>
</channel>
</rss>
在您的插件中實現(xiàn)啟動和關(guān)閉方法
如果你的插件做了任何需要初始化的事情,你應(yīng)該把這個Startup處理器作為插件的一部分。執(zhí)行Shutdown處理程序也是一樣,你應(yīng)該實現(xiàn)你的插件需要的任何清理代碼。你可能已經(jīng)在使用這些事件,但是插件更新比以前更重要。
當(dāng)插件更新時,正在更新的版本將發(fā)送該Shutdown操作。新版本將發(fā)送一個Startup操作。
例如,如果您的插件在Sketch中顯示了一些用戶界面元素,則應(yīng)刪除Shutdown處理程序中的那些元素。通過這種方式,新插件將能夠顯示已更新的用戶界面組件以及所有舊用戶界面元素已被刪除。
對于插件所維護(hù)的任何持久數(shù)據(jù)也是如此。任何未保存的信息應(yīng)在Shutdown調(diào)用時寫入磁盤。
不要在Startup可以稍后運(yùn)行的處理程序中包含代碼。
故障排除
所以你已經(jīng)遵循了所有的步驟,你的插件還沒有更新?試試這些:
- 刪除
PluginsWarehouse居住的文件夾。這是我們緩存插件下載的地方,如果您已經(jīng)測試了不同版本的appcast,那么您可能在那里有一些值得清理的舊東西。~/Library/Application Support/com.bohemiancoding.sketch3/ - 確保
manifest.json您下載的ZIP中有與您的appcast中的版本號相匹配的版本號。如果appcast表示ZIP包含v1.2,但實際的ZIP表示它是v1.1,則安裝將不起作用。
原文:https://developer.sketchapp.com/guides/preferences/
插件捆綁
插件是一個或多個腳本的集合。每個腳本定義一個或多個以某種方式擴(kuò)展Sketch的命令。
在磁盤上,插件是具有.sketchplugin文件擴(kuò)展名的文件夾,包含文件和子文件夾。
嚴(yán)格來說,插件實際上是一個OS X軟件包,被安排為OS X軟件包。
包是Finder向用戶呈現(xiàn)的任何目錄,就好像它是單個文件一樣(您可以使用Finder中的“ 顯示包內(nèi)容”命令查看內(nèi)部)。
一個包是一個具有標(biāo)準(zhǔn)化層次結(jié)構(gòu)的目錄,該目錄包含可執(zhí)行代碼和該代碼使用的資源。
Sketch插件不允許本機(jī)編譯代碼,但我們確實使用標(biāo)準(zhǔn)包布局(例如,資源位于包中的資源/文件夾中),特定于插件的文件位于Sketch /目錄中。
插件捆綁文件夾結(jié)構(gòu)
Bundles包含一個manifest.json文件,一個或多個.cocoascript文件(包含用CocoaScript或JavaScript編寫的腳本),它們實現(xiàn)Plugins菜單中顯示的命令以及任意數(shù)量的共享庫腳本和資源文件。
這是一個例子:
mrwalker.sketchplugin
Contents/
Sketch/
manifest.json
shared.js
Select Circles.cocoascript
Select Rectangles.cocoascript
Resources/
Screenshot.png
Icon.png
最關(guān)鍵的文件是manifest.json文件,它告訴Sketch其他所有內(nèi)容。
表現(xiàn)
清單是一個JSON文件,其中包含有關(guān)插件,其命令和資源的元數(shù)據(jù)。
它描述了諸如全名,描述和作者姓名等內(nèi)容。它列出了插件定義的任何命令的名稱,并告訴Sketch調(diào)用相應(yīng)的菜單項以及將它們放入哪個菜單。
這是一個例子:
{
"name": "Select Shapes",
"description": "Plugins to select and deselect shapes",
"author": "Joe Bloggs",
"homepage": "https://github.com/example/sketchplugins",
"version": "1.0",
"identifier": "com.example.sketch.shape-plugins",
"appcast": "https://excellent.sketchplugin.com/excellent-plugin-appcast.xml",
"compatibleVersion": "3",
"bundleVersion": 1,
"commands": [
{
"name": "All",
"identifier": "all",
"shortcut": "ctrl shift a",
"script": "shared.js",
"handler": "selectAll"
},
{
"name": "Circles",
"identifier": "circles",
"script": "Select Circles.cocoascript"
},
{
"name": "Rectangles",
"identifier": "rectangles",
"script": "Select Rectangles.cocoascript"
}
],
"menu": {
"items": ["all", "circles", "rectangles"]
}
}
這個插件被稱為“選擇形狀”。它定義了三個命令“全部”,“圓”和“矩形”,它們將被放置在“選擇形狀”菜單中。
這個插件可以通過Sketch進(jìn)行更新。Sketch將在指定的位置下載文件appcast并使用它來確定是否有更新。
將此文件進(jìn)一步解壓縮,以下是支持的密鑰及其用途:
name
這個插件的名稱。默認(rèn)情況下,它將用作插件菜單命令出現(xiàn)的子菜單的名稱。
description
描述此插件的命令(或命令)所做的字符串。
author
指定插件作者的字符串。
authorEmail
指定如何通過電子郵件與插件作者聯(lián)系的可選字符串。
homepage
可選字符串,指定用戶在線資源以查找更多信息或為插件提供反饋。
version
例如,一個字符串,指定插件的語義版本。1.0``1.1.1
identifier
一個字符串,指定插件的唯一標(biāo)識符。
例如,強(qiáng)烈建議使用反向域語法com.example.sketch.shape-plugins。
Sketch在內(nèi)部使用該字符串來跟蹤插件,為其存儲設(shè)置等。
appcast
指定appcast文件的URL的字符串。appcast文件包含有關(guān)插件更新的信息,例如可用更新的版本以及可從中下載更新的位置。Sketch下載此文件以確定是否有可用的插件更新。
compatibleVersion 和 maxCompatibleVersion
一個字符串,指定版本素描在其中作者已測試了插件,例如3,3.1,3.2.2。
目前(Sketch3.4)這是一個可選鍵,但我們可以在插件頁面的某個時刻將它用作過濾選項。
它在內(nèi)部使用BCCompareVersions函數(shù)來分割字符串.,然后比較每個組件的整數(shù)值。
bundleVersion
元數(shù)據(jù)包的布局版本。如果排除,則假定值為1。
這只是我們面向未來的機(jī)制。如果將來我們看到bundleVersion> 1的插件,我們就會知道我們可以以不同的方式處理元數(shù)據(jù)中的其他值。
現(xiàn)在可以忽略它。
disableCocoaScriptPreprocessor
這是一個高級設(shè)置,默認(rèn)為false。設(shè)置true為時,它將禁用CocoaScript自己的預(yù)處理器。這樣,您就可以使用諸如browserify或ES6模塊語法的構(gòu)建系統(tǒng)來開發(fā)您的插件。
將此選項設(shè)置為true執(zhí)行以下操作:
- 禁用
@import支持,您必須手動處理您的導(dǎo)入 - 禁用括號語法(即
[obj msg:]:),則只能使用點語法
commands
插件定義的一組命令。
數(shù)組中的每個項目都是一個字典,用于指定命令的名稱,快捷方式和其他屬性。有關(guān)更多詳細(xì)信息,請參閱插件命令。
menu
描述此插件中命令的菜單布局的字典。
請參閱插件菜單以獲取有關(guān)該詞典內(nèi)容的更多詳細(xì)信息,以及如何構(gòu)建每個插件的菜單。
插件命令
插件定義一個或多個用戶執(zhí)行的命令。
清單中的命令數(shù)組描述了這些。數(shù)組中的每個條目都是一個字典,具有以下屬性:
name
命令的顯示名稱。該值在插件菜單中使用。
identifier
一個字符串,用于指定插件捆綁中命令的唯一標(biāo)識符。這用于一致地將命令映射到操作,而不考慮命令名稱的變化。
shortcut
一個可選的字符串,指定了該命令的默認(rèn)快捷鍵,例如:ctrl t,cmd t,ctrl shift t。
script
Sketch實現(xiàn)此命令的腳本的插件包文件夾內(nèi)的相對路徑。
handler
用腳本調(diào)用此命令的函數(shù)的名稱。該函數(shù)必須采用單個context參數(shù),這是一個帶有當(dāng)前文檔和選擇項等鍵的字典。如果未指定,則該命令預(yù)期為onRun:
var onRun = function (context) {
var doc = context.document;
var selection = context.selection;
…
}
插件菜單
當(dāng)它加載插件時,Sketch為它創(chuàng)建一個菜單,并使用清單文件中“菜單”字典中的信息填充該菜單。
該字典可以包含以下鍵。
title
指定用于子菜單的標(biāo)題的字符串。
items
這是一個列出要包含在菜單中的項目的數(shù)組。
它可以包含兩種類型的項目:
- 一個給出命令標(biāo)識符的字符串
- 描述子菜單的字典(包含“標(biāo)題”和“項目”)
isRoot
默認(rèn)情況下,此字典中列出的菜單項將顯示在菜單中,其名稱由標(biāo)題鍵指定。
如果指定了isRoot鍵,并且值為true,則這些項目將插入到插件菜單的根級別,而不是插入到子文件夾中。在這種情況下,標(biāo)題密鑰將被忽略。
這個鍵在子菜單中被忽略。
菜單示例
這是一個例子。它在名為“My Plugin Menu”的菜單中定義了三個命令。菜單的前兩項對應(yīng)于插件的兩個命令,但第三項是名為“My Plugin Submenu”的子菜單。這個子菜單中有一個項目(插件命令的第三個項目):
{
"menu": {
"title": "My Plugin Menu",
"items": [
"command1-identifier",
"command2-identifier",
{
"title": "My Plugin Submenu",
"items": ["command3-identifier"]
}
]
}
}
處理程序
插件命令由處理程序?qū)崿F(xiàn)。
這些只是生活在.cocoascriptPlugin包中的一個文件中的JavaScript函數(shù),它包含一個包含某個上下文的參數(shù)。
這里有一個簡單的例子:
var doMyCommand = function(context) {
context.document.currentPage().deselectAllLayers()
}
在清單文件中,您可以指定一個描述插件定義的每個命令的字典。
在這本詞典中,腳本和處理程序鍵告訴Sketch要查看哪個腳本文件,以及要運(yùn)行哪個處理程序。
您可以自由地將每個命令實現(xiàn)放入其自己的腳本文件中,或?qū)⑺鼈內(nèi)糠湃雴蝹€文件中。
您必須為每個命令指定腳本密鑰。
如果將每個命令放入其自己的腳本文件中,則可以省略處理程序密鑰。在這種情況下,Sketch將默認(rèn)調(diào)用onRun處理程序。
如果將多個命令處理程序放入同一個腳本文件中,則需要為每個腳本文件使用處理程序密鑰,因為它們不能全部使用onRun處理程序!
原文:https://developer.sketchapp.com/guides/plugin-bundles/
插件,腳本和命令
Sketch中的插件定義了一個或多個命令,其中Sketch將顯示菜單項。
這些命令中的每一個實際上都是作為一個JavaScript函數(shù)實現(xiàn)的(我們稱之為處理程序),位于該包中的腳本文件中。
每個腳本可以包含盡可能多的處理程序,并且每個命令都可以由不同的處理程序?qū)崿F(xiàn),因此,無論您是按照每個命令安排一個腳本,還是將所有命令處理程序放在單個腳本文件中,都由您決定。
因此,要了解如何制作插件,首先需要了解如何編寫Sketch腳本。
教你如何編寫JavaScript代碼超出了這些頁面的范圍,所以我們假設(shè)你已經(jīng)知道了這一點。如果沒有,互聯(lián)網(wǎng)上有很多好的學(xué)習(xí)資源!
腳本語法
Sketch中的腳本使用CocoaScript編寫。
這是一個橋梁,可讓您編寫可調(diào)用本機(jī)Objective-C / Cocoa的JavaScript腳本。
使用它,你可以用JavaScript編寫你的插件的邏輯,但是當(dāng)你想讓它做某事時,可以調(diào)用實現(xiàn)Sketch的實際類和方法。
基礎(chǔ)如下:
- 你會像往常一樣編寫JavaScript代碼
- 使用橋接器,您可以從主機(jī)應(yīng)用程序(在本例中為Sketch)或從系統(tǒng)本身獲取Objective-C對象
- 基本的Objective-C對象具有等同的JavaScript(如字符串和數(shù)字),通??梢砸耘cJS版本相同的方式使用
- 您可以像在JS中一樣讀取和寫入自定義Objective-C對象的屬性
- 您可以使用熟悉的JavaScript語法或Objective-C方括號語法來調(diào)用自定義Objective-C對象的方法。
(有關(guān)更多詳細(xì)信息,請參閱更多關(guān)于CocoaScript頁面。)
當(dāng)您的腳本被Sketch調(diào)用時,您會傳遞一些上下文,包括表示當(dāng)前Sketch文檔和選擇的Objective-C對象。
然后,您可以讀取屬性,執(zhí)行計算并調(diào)用這些對象的方法,以完成腳本的目的。
腳本上下文
當(dāng)用戶選擇插件菜單命令時,Sketch會查找要調(diào)用的處理程序(CocoaScript函數(shù))以及調(diào)用它的腳本文件。
當(dāng)處理程序被調(diào)用時,它會傳遞一個上下文變量。這包含一些重要的屬性,您可以使用它們訪問您需要的對象。
例如,selection屬性為您提供當(dāng)前文檔中選定圖層的列表:
var onRun = function(context) {
var selection = context.selection
for (var i = 0; i < selection.count(); i++) {
var layer = selection[i]
log('layer ' + layer.name + ' is selected.')
}
}
Sketch中的所有插件都可以訪問以下默認(rèn)變量:
-
command:
MSPluginCommand表示當(dāng)前正在執(zhí)行的腳本命令的對象 -
文檔:
MSDocument代表當(dāng)前文檔的對象 -
plugin:
MSPluginBundle表示包含當(dāng)前正在執(zhí)行的腳本的插件包的對象 -
scriptPath:
NSString包含當(dāng)前正在執(zhí)行的腳本的完整路徑 - scriptURL:與scriptPath類似,但是作為NSURL對象
-
選擇
NSArray當(dāng)前文檔中選擇的一個或多個圖層; 這個數(shù)組中的每一項都是一個MSLayer對象
嘗試腳本
嘗試簡單腳本的最簡單方法是通過插件>自定義插件...菜單項。
這給你一個文本字段,你可以輸入你的腳本。
點擊運(yùn)行按鈕將執(zhí)行腳本并在下面板顯示任何輸出或錯誤。
您可以使用此界面進(jìn)行探索和實驗。
創(chuàng)建一個插件
一旦你有一個你想要開發(fā)成適當(dāng)?shù)牟寮哪_本,你可以使用Run Custom Script ...表單中的Save ...按鈕。
這將創(chuàng)建一個Plugin文件夾(稱為Plugin Bundle)并將腳本保存到其中。
生成的插件將具有單個命令和單個腳本文件。執(zhí)行該命令將調(diào)用onRun腳本中的函數(shù),該函數(shù)將包含您輸入的代碼。
從這個起點開始,您可以通過直接編輯文件夾中的文件來擴(kuò)展您的插件。
你可以添加更多的代碼到你的onRun函數(shù),添加更多的功能,甚至更多的腳本文件。
通過編輯manifest.json插件文件夾中的文件,您可以自定義命令的名稱,輸入描述,甚至可以展開插件以定義多個命令。
有關(guān)更多信息,請參閱插件包。
原文:https://developer.sketchapp.com/guides/plugin-scripts/
插件位置
當(dāng)Sketch啟動時,它會掃描磁盤上的文件夾以查找插件。
~/Library/Application Support/com.bohemiancoding.sketch3/Plugins
(?這里是你的主文件夾的簡寫,例如/Users/iosdevlog)
您可以輕松訪問此插件文件夾Alt,方法是打開插件菜單并選擇“顯示插件文件夾”。
安裝插件
如果您雙擊.sketchplugin文件,Sketch會將其復(fù)制到您的Plugins文件夾中。它實現(xiàn)的任何命令應(yīng)立即顯示在插件菜單中。
或者,您可以通過簡單地將它們自己移動到插件文件夾來安裝插件。
注意:Sketch也支持使用別名和指向單個插件的鏈接,或支持插件文件夾本身。這允許您將它們放置在其他地方(例如,Dropbox文件夾以保持Sketch同步的多個安裝)。
刪除插件
要刪除插件,只需選擇插件>管理插件...菜單選項,選擇要從列表中刪除的插件,然后右鍵單擊插件或單擊齒輪圖標(biāo),然后選擇卸載“插件名稱”:

插件提供的任何命令都將立即從插件菜單中刪除。
或者,您可以取消選中列表中的任何插件,以在不卸載它的情況下禁用它。
原文:https://developer.sketchapp.com/guides/installing-plugins/
更多關(guān)于CocoaScript
Sketch插件可以通過Mocha和CocoaScript實現(xiàn),它允許您使用JavaScript編寫的外部腳本使用Objective-C / Cocoa代碼。該橋負(fù)責(zé)JavaScript和Cocoa之間的翻譯,因此您可以專注于重要的部分(即使Sketch成為可怕的東西)。
來自CocoaScript的README:
CocoaScript建立在Apple的JavaScriptCore之上,這是與Safari相同的JavaScript引擎。所以,當(dāng)你在CocoaScript中編寫代碼時,你確實在編寫JavaScript。
CocoaScript還包含一個橋梁,可讓您通過JavaScript訪問Apple的Cocoa框架。這意味著除了標(biāo)準(zhǔn)JavaScript庫之外,您還可以使用許多精彩的類和函數(shù)。
JavaScript環(huán)境
您的插件腳本不會在瀏覽器中運(yùn)行,但會在JavaScriptCore上下文中運(yùn)行。因此它運(yùn)行的JavaScript環(huán)境有點不常見。
- 在JavaScript的標(biāo)準(zhǔn)庫可用。
- 其他的都不是。這意味著
setTimeout,fetch,console等都是不可用。 - NodeJS核心模塊不可用。
話雖這么說,如果你使用skpm,它會自動填充工具有些事情你:console,setTimeout,setInterval和fetch。
訪問Cocoa和Sketch API
您可以從CocoaScript訪問所有Cocoa和Sketch API。
Objective-C屬性的行為與在橋的JavaScript端應(yīng)該一樣。
Objective-C方法作為對象的不透明JavaScript代理的屬性公開。
將選擇器名稱轉(zhuǎn)換為JavaScript屬性名稱時采取以下步驟:
- 所有冒號都轉(zhuǎn)換為下劃線(最新的下劃線是可選的)。
- 選擇器的每個組件都連接成一個沒有分隔的字符串。
這樣,一個選擇器如executeOperation:withObject:error:轉(zhuǎn)換為函數(shù)名稱executeOperation_withObject_error()。
例如,如果你想打開一個File Picker面板,你可以使用NSOpenPanel類:
var openPanel = NSOpenPanel.openPanel()
openPanel.setCanChooseDirectories(false)
openPanel.setCanChooseFiles(true)
openPanel.setCanCreateDirectories(false)
openPanel.setDirectoryURL(NSURL.fileURLWithPath('~/Documents/'))
openPanel.setTitle('Choose a file')
openPanel.setPrompt('Choose')
openPanel.runModal()
如果您需要更多關(guān)于Cocoa的信息,請查看參考資料部分。
一些特定的全局變量
指針
對于某些Obj-C選擇器,您可能需要傳遞一個指針。這在JavaScript中不存在,所以有一種全局方法來創(chuàng)建一個:
var ptr = MOPointer.alloc().init()
var ptrToSomething = MOPointer.alloc().initWithValue(something)
長時間運(yùn)行腳本
如果您的腳本正在進(jìn)行異步操作,我們需要告訴Sketch保留它并且不要垃圾收集它。
你可以通過訪問COScript:
COScript.currentCOScript().shouldKeepAround = true
腳本完成其工作后,不要忘記釋放它:
COScript.currentCOScript().shouldKeepAround = false
下一步
有關(guān)這座橋如何運(yùn)作的更多信息,請查看Mocha README,它確實是完整的(但需要一些Obj-C的概念)。
原文:https://developer.sketchapp.com/guides/cocoascript/
SketchTool
SketchTool是一個與Sketch捆綁在一起的命令行實用程序,它允許您使用Sketch文檔執(zhí)行一些操作,例如檢查它們或?qū)С鲑Y產(chǎn)。它還允許您從命令行控制Sketch以執(zhí)行一些操作。
安裝
SketchTool 與Sketch(和Sketch Beta)捆綁在一起。你可以找到它。
Sketch.app/Contents/Resources/sketchtool/bin/sketchtool
建議您在Sketch中使用它,而不是將其復(fù)制到其他位置,以便始終使用最新版本(更新Sketch時更新SketchTool,并且您需要使用更新后的版本進(jìn)行閱讀使用最新版本的Sketch保存的文件)。
注意:SketchTool需要OSX 10.11或更高版本。
重要
SketchTool可以免費(fèi)使用,但它沒有絕對擔(dān)保。這就是說,如果您發(fā)現(xiàn)任何錯誤或有任何功能請求,請發(fā)送電子郵件給我們,我們將盡我們所能改善它。
如果所使用的所有字體已安裝在系統(tǒng)上,SketchTool只能導(dǎo)出文檔。
請注意,Sketch的未來版本將更改文件格式,因此請確保始終運(yùn)行最新版本的工具。
用法
要了解可用的命令,請運(yùn)行
$ sketchtool help
看到幫助。
以下是您可以使用SketchTool執(zhí)行的一些示例
轉(zhuǎn)儲文件
$ sketchtool dump path/to/document.sketch
以JSON格式獲取文檔結(jié)構(gòu)的轉(zhuǎn)儲。
如果您需要查看文檔的元數(shù)據(jù),但不想完整轉(zhuǎn)儲,則可以使用
$ sketchtool metadata path/to/document.sketch
你會得到類似的東西:
{
"commit" : "b8111e3393c4ca1f2399ecfdfc1e9488029ebe7b",
"pagesAndArtboards" : {
"E6890372-BE93-4E4C-ACD1-8F8B10862938" : {
"name" : "Page 1",
"artboards" : {
"214B376A-C4A3-47A9-9B87-DFBC49A6EFE0" : {
"name" : "Artboard 2"
},
"F8FE177A-5D6D-4A37-8BD1-B246A83A9C21" : {
"name" : "Artboard 1"
}
}
}
},
"version" : 97,
"fonts" : [
],
"compatibilityVersion" : 93,
"app" : "com.bohemiancoding.sketch3",
"autosaved" : 0,
"variant" : "NONAPPSTORE",
"created" : {
"commit" : "b8111e3393c4ca1f2399ecfdfc1e9488029ebe7b",
"appVersion" : "48.2",
"build" : 47327,
"app" : "com.bohemiancoding.sketch3",
"compatibilityVersion" : 93,
"version" : 97,
"variant" : "NONAPPSTORE"
},
"saveHistory" : [
"NONAPPSTORE.47327"
],
"appVersion" : "48.2",
"build" : 47327
}
導(dǎo)出資產(chǎn)
您可以使用SketchTool導(dǎo)出Sketch文檔中的資源。SketchTool可以導(dǎo)出預(yù)定義的資源(即:在Sketch UI中可導(dǎo)出的圖層和畫板)或任何你想要的圖層。
導(dǎo)出畫板
運(yùn)行
$ sketchtool export artboards path/to/document.sketch
將導(dǎo)出文檔中的所有畫板,無論其可導(dǎo)出狀態(tài)如何。如果畫板已設(shè)置為可導(dǎo)出,則SketchTool將導(dǎo)出所有尺寸和格式。否則,默認(rèn)情況下,它們將以PNG格式以1x導(dǎo)出,您可以使用命令行選項指定自定義格式或大小:
$ sketchtool export artboards path/to/document.sketch --formats=jpg
您可以一次導(dǎo)出多個格式:
$ sketchtool export artboards path/to/document.sketch -formats = jpg,png,svg
要查看SketchTool支持哪些格式,請運(yùn)行sketchtool list formats。
要定義大小,你可以這樣做:
$ sketchtool export artboards path/to/document.sketch --scales=1,2
這會給你1x和2x版本的畫板。
默認(rèn)情況下,文件被導(dǎo)出到當(dāng)前文檔,但您可以像這樣定義輸出路徑:
$ sketchtool export artboards path/to/document.sketch --output=output/path
如果不想導(dǎo)出所有畫板,可以通過使用圖層ID 的item或items選項來告訴SketchTool要導(dǎo)出的畫板:
$ sketchtool export artboards path/to/document.sketch --item=214B376A-C4A3-47A9-9B87-DFBC49A6EFE0
(獲取美工板的ID,使用sketchtool metadata或sketchtool list artboards)。
有關(guān)導(dǎo)出畫板時可以執(zhí)行的其他操作的更多信息,請參閱sketchtool help export artboard。
導(dǎo)出圖層,切片或頁面
圖層,切片和頁面就像畫板一樣工作,所以您可以閱讀前一節(jié)用'圖層','切片'或'頁面'替換'畫板'
獲取文檔預(yù)覽
$ sketchtool export preview path/to/document.sketch
將為您提供文檔中最后編輯頁面的PNG預(yù)覽,并將其另存為preview.png。SketchTool將嘗試渲染100%的預(yù)覽,但如果文檔太大,則會縮小預(yù)覽,使其適合2048 x 2048像素的矩形。
運(yùn)行一個插件
SketchTool可以告訴Sketch啟動并運(yùn)行一個插件。如果您正在持續(xù)集成系統(tǒng)上測試插件,或者您需要自動執(zhí)行無聊任務(wù),這非常有用。
想象一下,我們有這個代碼的插件:
context.document.showMessage("Remote plugin running!")
我們從Run Script ...面板中將它保存為'Remote Plugin' ,然后運(yùn)行:
$ sketchtool run ~/Library/Application\ Support/com.bohemiancoding.sketch3/Plugins/Remote\ Plugin.sketchplugin com.bohemiancoding.sketch.runscriptidentifier
請注意,這com.bohemiancoding.sketch.runscriptidentifier是Sketch在保存插件時使用的默認(rèn)命令標(biāo)識符,但在您的情況下它可能會有所不同。如果您只想運(yùn)行包中的第一個命令,則可以使用""而不是標(biāo)識符。
SketchTool現(xiàn)在將啟動Sketch,等待文檔打開,然后運(yùn)行我們的插件。Sketch將成為最前端的應(yīng)用程序,但如果您希望它保留在后臺(例如,您正在運(yùn)行代碼編輯器的測試,并且不希望Sketch捕獲焦點),則可以使用該--without-activating選項。
原文:https://developer.sketchapp.com/guides/sketchtool/
參考
Sketch中的插件系統(tǒng)可讓您完全訪問應(yīng)用程序的內(nèi)部結(jié)構(gòu)和macOS中的核心框架。所以你有一個強(qiáng)大的能力來構(gòu)建幾乎任何東西。
然而,強(qiáng)大的能力有很大的責(zé)任,所以你需要在每個Sketch版本中留意你的代碼。我們會在重構(gòu)時不時更改Sketch的內(nèi)部結(jié)構(gòu),因此您的插件可能會調(diào)用一些已重命名或刪除的方法。
我們確實意識到這當(dāng)然不是理想的。這就是為什么我們支持內(nèi)部和插件之間的JavaScript API。我們希望它覆蓋了90%的用例。如果沒有,您可以隨時進(jìn)入內(nèi)部,風(fēng)險自擔(dān)。
下面的頁面包含插件可以偵聽的所有操作的簡要說明,以及一些可以與之交互的關(guān)鍵Sketch類。這是JavaScript API,它在Sketch版本中保持穩(wěn)定。
盡管我們不打算記錄內(nèi)部信息,但您可以查看3種信息來源:
- 官方的AppKit文件:這是建立在Apple框架上的Sketch。
- 基礎(chǔ):更重要的蘋果課程和服務(wù)。
- Sketch Headers(Thanks @abynim):這是Sketch使用的所有類的標(biāo)題。如果您的插件由于使用了已刪除的方法而與新版本分離,則可以檢查差異以查找替換。
再一次,最后一個環(huán)節(jié)是自負(fù)風(fēng)險,我們不會記錄或凍結(jié)這些,但我們希望給你做任何事情的權(quán)力。
要了解如何使用這些Objective-C類,請查看CocoaScript文檔。
原文:https://developer.sketchapp.com/reference/
資源
JavaScript
徹徹底底的新手
- 在Codecademy學(xué)習(xí)JavaScript的基礎(chǔ)知識
- Eloquent JavaScript,一本關(guān)于JavaScript,編程和數(shù)字奇跡的書。
有經(jīng)驗的開發(fā)者
- 在Mozilla上學(xué)習(xí)Web> JavaScript
- 重新介紹JavaScript
- JavaScript:The Good Parts,一本O'Reilly的書。
Cocoa
CocoaScript
- Sketch-Plugins-Cookbook,來自Andrey Shakhmin的一系列精彩技巧和信息
- 為插件開發(fā)人員繪制插件片段
- 我做了一個Sketch插件,你也可以
- debugging-sketch-plugins
- 我如何在不知道代碼的情況下為我的團(tuán)隊制作Sketch插件
- 程序員設(shè)計不同:為什么我為Sketch 3構(gòu)建了一個CSS插件
- runner-speed-up-your-sketch-workflow
示例插件
- Github上提供了一些示例插件
- 一個模板/示例Sketch插件,在Interface Builder中內(nèi)置UI,并通過黑魔法連接到CocoaScript:Sketch-NibUITemplatePlugin
第三方插件
- Sketch插件,GitHub上托管的Sketch插件列表。
- awesome-sket.ch,Sketch插件的精選列表。
- sketchplugins.com,Sketch Plugin開發(fā)者的郵件列表。
- Sketchpacks,查找并發(fā)現(xiàn)Sketch最有用的插件
工具
-
SketchTool - 用于從
.sketch文檔中導(dǎo)出頁面和切片的OS X命令行應(yīng)用程序。 - sketchapp-scripter,由Timur Carpeev創(chuàng)建的一個Atom包,用于從Atom編輯器運(yùn)行Sketch腳本。
- class-dump。我們盡力記錄所有內(nèi)容,但如果您喜歡冒險類型,則可能需要玩這個游戲。
- sketchpacks-relay,sketchpacks。將您的Sketch插件發(fā)布到Sketchpacks插件注冊表。自動為您的Appcast Feed提供原生插件更新。
- skpm - 用于創(chuàng)建,制作和發(fā)布Sketch插件的實用程序。