こんにちは。デザイナーの羽野です。KitchHike では Web プロダクトのデザインとコーディングを担当しています。最近は React Native に手を出し始めました。Web の知識が活かせるのでなかなか楽しいです。
さて、デザインの際は Sketch を使っているのですが、恐らく知らない方はもういないんじゃないでしょうか。Sketch の便利さを語ろうとしたらそれだけでひとつ記事が書けてしまいますが、便利さのひとつにプラグインを活用した拡張性の高さが挙げられます。
というわけで、今回は Sketch を使うにあたってぜひとも入れておきたいプラグインを厳選して紹介したいと思います。必須系プラグインに的を絞ってあるので、Sketch 初心者の方はぜひ入れてみてくださいね。
Runner
Sketch はデフォルトでも便利ですが、使っていくうちにドロップダウンメニューで操作するのがだんだん億劫になってきますよね。プラグインが増えたり、階層が深くなればなるほどめんどくさいです。
そんな課題を一気に解決してくれるのが Runner というプラグインです。一言で説明すると Sketch 版 Alfred といったところでしょうか。Run + <プラグイン名> または <アクション> で プラグインを検索できたり、Sketch のメニューアクションを実行できます。もちろんプラグインのアクションもすべて Runner 上で一発です。私はもう Runner がないと仕事ができない体になってしまいました。
プラグインの管理ツールとしても使える
アップデート
Cmd + ‘ ( 日本語キーボードの場合は Cmd + Shift + ’ ) で Runner を立ち上げると、アップデートできるプラグインがある場合は図のように <数字>UPDATES と表示されます。これをクリックするとアップデート可能なプラグインが表示されるので、 Update All をクリックすればあとはよしなにやってくれます。
インストール
プラグインの検索やインストールには install + → を実行します。キーワードを入力すれば勝手にサジェストしてくれるので非常に便利です。
シンボルの検索や挿入が快適
insert + → でシンボルの検索と挿入ができます。シンボルのプレビューが表示されるのがありがたいですね。さらにレイヤー ( シンボル ) を選択した状態で alt + Enter すると、シンボルの置き換えができるので、いちいちドロップダウンをたどる必要もありません。
Craft
https://www.invisionapp.com/craft
Craft Official from InVision on Vimeo.
言わずと知れた Craft は有名すぎて説明する必要もないかもしれません。もともとは Silver Flows という名前だったのですが、inVision に買収されて Craft として生まれ変わった経緯があります。
Craft は inVision と連携することでその真価を発揮するのですが、できることは以下です。
- Sync: Sketch のアートボードと inVision を同期する
- Library: アセットの共有機能
- Data: JSON や Web 上の画像データなどを挿入できる
- Duplicate: 要素の複製 ( Sketch デフォルトの
Make Gridと同じような機能 ) - Prototype: Sketch 上でプロトタイピングができる
- Freehand: 文字通り、フリーハンドでメモを残せる
Rename It
https://github.com/rodi01/RenameIt
Sketch で作業しているとアートボード名やレイヤー名がだんだんとカオスになってきますが、 Rename it を使えばレイヤー名の整理も一発です。GitHub の README に使い方の gif 動画がはってあるので、ぜひそちらを見て欲しいのですが、できることを簡単にまとめておくと、以下のことができます。
- 昇順と降順の連番 ( 例:
item_%n) - 元の名前を保持したまま新たに名前をつける ( 例: item という名前に新たに連番をつける
*_%n) - レイヤーやアートボードの Width と Height を付与
User Flows
https://abynim.github.io/UserFlows/
User Flows は Sketch 上で画面遷移図を作成できるプラグインです。if / else のような条件分岐つきのフローも作成できます。
inVision や Prott のようなプロトタイピングツールを使用していれば普段は必要ないかもしれませんが、資料として画面遷移図を提出することがある場合は重宝するでしょう。
Sketch Measure
Sketch Measure は Sketch 上にオブジェクトのサイズやマージンなどの情報を記載できるプラグインです。ワンクリックで簡単にデザインの指示書を作成できます。Ctrl + Shift + Bでツールバーを呼び出して使います。
Symbol Organizer
http://sketchapp.rocks/plugins/symbol-organizer/
Sketch のシンボルページに生成されたシンボルを整理できるプラグインです。Sketch のシンボル機能はとても強力ですが、プラグインを入れない状態でシンボルを作ると、ひたすら横一列に作成順に集約されてしまいます。
Before
こちらがプラグインを使わない状態です。整理しようにもちょっと収拾がつかない感じですね。
After
Symbol Organizer を使ってシンボルを整理しました。Lv1/Icons/Icon といった半角スラッシュ / を活用した階層が反映された状態できれいに並び替えられました。
いかがでしたでしょうか。Sketch を使いこなしている人には知っているものばかりかもしれませんが、もし「知らなかった！」というものがひとつでもあれば、ぜひインストールして試してみてくださいね。プラグインを活用して素敵な Sketch ライフを送りましょう！