For practicing Sketch plugin development, I created StickyGrid to let shape points sticked with grids.

Draw something in rough and apply this plugin then you’ll get geometric shapes at ease.

How to install

From GitHub releases, Download a zipped archive then unarchive it then double click StickyGrid.sketchplugin so you are prepared for using StickyGrid.

Loving CLI-way than anything, You also want to run those commands to get the same thing.

cd $HOME/Library/Application Support/com.bohemiancoding.sketch3/Plugins
git clone https://github.com/uetchy/Sketch-StickyGrid.git

Usage

At first, selecting ctrl + + G を押すと、パスがグリッドの交差点に吸い付く。

ショートカット以外にも、メニューからPlugins > Sketch-StickyGrid > Snap to Gridを選んでも良い。

シェイプはもちろん、グルーピングされたシェイプも、逆にシェイプポイントだけでも吸い付く。

プラグインの開発にあたって

プラグインのデバッグ

デバッギングにはSketch-DevToolsを使っていましたが、最新版の Sketch では使えなくなってしまった。

その代わりに Mac 標準アプリの Console.app を使う方法が公式デベロッパーサイトの記事 Debugging - Sketch Developer で紹介されている。

スクリプト内でlog関数を呼び出すと、Console.app にログが出力される。

log(context.document.gridSize)

ドキュメントの情報源

ドキュメントは公式デベロッパーサイト Sketch Developer があるものの、パス編集に関するドキュメントは全くなかった。

そこで、class-dump を使って Sketch.app のヘッダーファイルを抽出し、ひたすら目 grepをしてシェイプ操作とグリッドに関する API を探し出し、プラグインの実装に役立てた。

また、先人によって公開されている数多の Sketch プラグインのソースを見ることも、開発の助けになった。

結論

苦行僧じみた Sketch プラグインの開発にはclass-dumpConsole.appが必携。