iOSエンジニアにも便利なSketchプラグイン6選

こんにちは!iOSエンジニアの木村です。
iOSエンジニアの皆さん、Sketchは使っていますか?

SketchはWebサイトやネイティブアプリを対象としたデザイン用に作られているため、
デザインから実装に落とし込みが素早く行えるようになります。

また、操作方法もシンプルになっているので、エンジニアでもデザインの確認や、素材書き出しなどは簡単に行えるのもポイントであり、
自分でマージンの確認や素材の微調整が出来るとデザイナーさんとのやり取り回数も減らせるので開発効率アップが狙えます。

そして、既に便利なSketchですが、もっと便利にすることができるプラグインがあります。
プラグインを上手く利用することで、Sketchを更に便利にすることが出来ます。

そこで、今回は僕的エンジニア視点で良い!というSketchプラグインについて紹介したいと思います。

まずSketch Toolboxをインストールする

便利なSketchプラグインですが、
標準のプラグインマネージャはインストール済みのプラグインのOn/Offしか操作が出来ません。
プラグインのインストールとアンインストールはFinder等で、ファイルを直接操作する必要があります。

以下の手順で標準のプラグインマネージャが開きます。
Menu > Plugins > Manage Plugins…

shot1

そこで、Sketch Toolboxというサードパーティ製のプラグインマネージャを使います。
Sketch Toolboxはインストールボタンをクリックするだけで、簡単にプラグインのインストールを行ってくれます。

XcodeプラグインマネージャのAlcatrazのようなものですね。

shot2

Regexp Rename : 正規表現を使ってリネーム

巨大なSketchファイルになってくると、オブジェクトの名前管理が重要になってきます。
そして、時にはリネームを行わなければならない時もあるかもしれません。
そんなときに便利なのが Regexp Rename です。
正規表現を使ってリネームを行うことが出来ます。

これで一発でリネームできたらデザイナーさんからモテそうですね!

shot3

Swift Color : UIColorのSwiftコードを生成

デザインと同じ色を表示したい時に、スポイトを使って、HexをUIColorに…
など、ちゃんと管理する場合は別ですが、さくっと色を付けたい時に便利なのがSwift Colorです。

選択したオブジェクトからUIColorのコードを生成してくれます。
プロトタイプとしてアプリを作るときに力を発揮しそうです!

Sketch Measure : サイズやマージンを可視化する

オブジェクトのサイズや、オブジェクト間のマージンはSketchの標準機能で確認することは可能ですが、Sketch Measureを使うことで、知りたいサイズとマージンを可視化する事ができます。

これはデザイナーさんがエンジニアに指示書として渡すときに使われることが多そうですが、
自分でチェックしたい時でもかなり便利です。

Androidのdpiに対応しているのGoodなポイントですね。

sketch-measure

PaintCode plugin : SketchからPaintCodeへ

Sketchのパス情報をPaintCodeにインポートできるPaintCode plugin
PaintCodeとはCoreGraphicsを用いた描画コードをグラフィカルに生成することが出来る最高に便利なツールです。
本記事ではPaintCodeについては割愛します。
(Couples iOS版のトークの吹き出しはPaintCodeで作りました。)

shot5

Send To Slack : シュッとSlackへアップロード

Slack上でアプリの画面の話をしていると、「それって、どういう画面だっけ?」みたいになってしまいことはありませんか?
そんな時に Send To Slack プラグインを使えば、シュッと話をしたい画面のスクショをSlackへアップロードできます。

shot6

Sketch Constraints : SketchでAutoLayout!?

さすがにiOSのAutoLayoutには敵いませんが、
AutoLayoutに似たUIでそれっぽい動きを実現できるSketch Constraintsというものがあります。
Sketchファイル上で親レイヤーと相対的な位置の制約を設定することが出来ます。
簡単なレスポンシブであればSketch上でシミュレーション出来そうですね!

shot4

他にもたくさんのプラグインがあります

今回紹介したプラグインは、デザインを閲覧・管理するときに便利なものでした。
デザインを作るときに便利なプラグインはもっとたくさんあります。

Sketchの公式サイトにプラグインをまとめられているので、
自分では使わないけどデザイナーさんにとっては便利そうなものは教えてあげると良いかもしれませんね!

プラグインを作る

もちろんプラグインは自分で作ることも可能です。
デザイナーさんが何かに困っていたらプラグインを作ってあげるのはどうでしょうか?
(これはモテそうですね。)

公開されているプラグインは小さくてシンプルなプラグインが多いため、
コードを読めば参考になるかもしれません。

プラグインはCocoaScriptというJavaScript + Objective-Cを混ぜたようなシンタックスで記述出来るスクリプト言語で開発することが出来ます。

iOS開発者であれば、慣れ親しんだObjective-CとJavaScriptで書けるのも良い点だと思います。
(欲を言えばSwiftで書きたい!)

ドキュメントも充実してきているようです。
(一部Work In Progressが多いですが…)

おわりに

いかがでしたでしょうか。
プラグインでSketchの出来ることはどんどん広げられそうです。
そしてSketch本体も今後のバージョンアップでもっと便利になっていくと思います。
Sketchが使えるとエンジニアとしての幅も広がるので、
Sketchプラグインを使って、作って、快適なデザイン実装を!

  • このエントリーをはてなブックマークに追加

エウレカでは、一緒に働いていただける方を絶賛募集中です。募集中の職種はこちらからご確認ください!皆様のエントリーをお待ちしております!

Recommend

React+ReduxなネイティブアプリをReact Nativeでシュッと作る

SlackのSlash CommandsをApp Engineで稼働させる