KitchHike Tech Blog

KitchHike Product, Design and Engineering Teams

Sketch 初心者は入れておきたいオススメのプラグイン6選

f:id:featherplain:20170607100302p:plain

こんにちは。デザイナーの羽野です。KitchHike では Web プロダクトのデザインとコーディングを担当しています。最近は React Native に手を出し始めました。Web の知識が活かせるのでなかなか楽しいです。

さて、デザインの際は Sketch を使っているのですが、恐らく知らない方はもういないんじゃないでしょうか。Sketch の便利さを語ろうとしたらそれだけでひとつ記事が書けてしまいますが、便利さのひとつにプラグインを活用した拡張性の高さが挙げられます。

というわけで、今回は Sketch を使うにあたってぜひとも入れておきたいプラグインを厳選して紹介したいと思います。必須系プラグインに的を絞ってあるので、Sketch 初心者の方はぜひ入れてみてくださいね。

Runner

http://sketchrunner.com/

Sketch はデフォルトでも便利ですが、使っていくうちにドロップダウンメニューで操作するのがだんだん億劫になってきますよね。プラグインが増えたり、階層が深くなればなるほどめんどくさいです。

そんな課題を一気に解決してくれるのが Runner というプラグインです。一言で説明すると Sketch 版 Alfred といったところでしょうか。Run + <プラグイン名> または <アクション> で プラグインを検索できたり、Sketch のメニューアクションを実行できます。もちろんプラグインのアクションもすべて Runner 上で一発です。私はもう Runner がないと仕事ができない体になってしまいました。

f:id:featherplain:20170606215028p:plain

プラグインの管理ツールとしても使える

アップデート

f:id:featherplain:20170606220149p:plain Cmd + ( 日本語キーボードの場合は Cmd + Shift + ) で Runner を立ち上げると、アップデートできるプラグインがある場合は図のように <数字>UPDATES と表示されます。これをクリックするとアップデート可能なプラグインが表示されるので、 Update All をクリックすればあとはよしなにやってくれます。

f:id:featherplain:20170606220152p:plain

インストール

プラグインの検索やインストールには install + を実行します。キーワードを入力すれば勝手にサジェストしてくれるので非常に便利です。

f:id:featherplain:20170606215118p:plain

シンボルの検索や挿入が快適

insert + でシンボルの検索と挿入ができます。シンボルのプレビューが表示されるのがありがたいですね。さらにレイヤー ( シンボル ) を選択した状態で alt + Enter すると、シンボルの置き換えができるので、いちいちドロップダウンをたどる必要もありません。

f:id:featherplain:20170606220416p:plain

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

f:id:featherplain:20170606220535p:plain

Sketch で作業しているとアートボード名やレイヤー名がだんだんとカオスになってきますが、 Rename it を使えばレイヤー名の整理も一発です。GitHub の README に使い方の gif 動画がはってあるので、ぜひそちらを見て欲しいのですが、できることを簡単にまとめておくと、以下のことができます。

  • 昇順と降順の連番 ( 例: item_%n )
  • 元の名前を保持したまま新たに名前をつける ( 例: item という名前に新たに連番をつける *_%n )
  • レイヤーやアートボードの Width と Height を付与

User Flows

https://abynim.github.io/UserFlows/

f:id:featherplain:20170606220746p:plain

User Flows は Sketch 上で画面遷移図を作成できるプラグインです。if / else のような条件分岐つきのフローも作成できます。

inVision や Prott のようなプロトタイピングツールを使用していれば普段は必要ないかもしれませんが、資料として画面遷移図を提出することがある場合は重宝するでしょう。

Sketch Measure

http://utom.design/measure/

f:id:featherplain:20170606220912p:plain

Sketch Measure は Sketch 上にオブジェクトのサイズやマージンなどの情報を記載できるプラグインです。ワンクリックで簡単にデザインの指示書を作成できます。Ctrl + Shift + Bでツールバーを呼び出して使います。

Symbol Organizer

http://sketchapp.rocks/plugins/symbol-organizer/

Sketch のシンボルページに生成されたシンボルを整理できるプラグインです。Sketch のシンボル機能はとても強力ですが、プラグインを入れない状態でシンボルを作ると、ひたすら横一列に作成順に集約されてしまいます。

Before

こちらがプラグインを使わない状態です。整理しようにもちょっと収拾がつかない感じですね。

f:id:featherplain:20170606221325p:plain

After

Symbol Organizer を使ってシンボルを整理しました。Lv1/Icons/Icon といった半角スラッシュ / を活用した階層が反映された状態できれいに並び替えられました。

f:id:featherplain:20170606221309p:plain

f:id:featherplain:20170606221317p:plain

いかがでしたでしょうか。Sketch を使いこなしている人には知っているものばかりかもしれませんが、もし「知らなかった!」というものがひとつでもあれば、ぜひインストールして試してみてくださいね。プラグインを活用して素敵な Sketch ライフを送りましょう!