東京都

かゆい所に手が届く！Sketchのふつうに便利なプラグイン8選

Tomoko Kase, Hisashi Yoshitake and 1 others

Other, UIデザイナー

Tomoko Kase

株式会社A.C.O. / Other

Hisashi Yoshitake

株式会社モンスターラボ / UIデザイナー

Hisashi Yoshitake

株式会社モンスターラボ / UIデザイナー

on 2020-01-17

こんにちは、デザイナーの芳武です。A.C.O.でUIデザインを作成するときは「Sketch」を使うことが多いです。今回はそのSketchのプラグインについて紹介します。

Adobe XDやFigmaなどの登場以前から多くのデザイナーに親しまれ、アップデートが繰り返されてきたSketchも先日、ついにVer.61になりました。（2019年12月時点）

そうしたSketchの進化に伴い、世の気が利くツワモノたちは「いやいやもっと便利にしてやろう」と、かゆいところに手が届く便利なプラグインをたくさん用意してくれています。ありがたいことですね。今回はそうして生まれた多くのプラグインの中から、これがないとお話にならないよ！というものや、思わず試したくなってしまうようなものなど、8つのプラグインをご紹介したいと思います。

プラグインの導入

ご存知の方も多いと思いますが、簡単にプラグインの導入方法もご紹介しておきます。基本的にはGithubからプラグインをダウンロードしてSketchで開けば良いのですが、長い目で見れば「Runner」というプラグインのinstall機能を使う方法が簡単です。以下に導入方法をまとめましたので、ご参考になれば幸いです。

1 Runnerのサイトからプラグインをダウンロードする
2ダウンロードしたファイルを解凍する
3ダブルクリックしてスケッチで開く
4メニューバーを Plugins > Runner > install の順に辿り、欲しいプラグインの名前を入れる
5出てきたプラグインの欄をダブルクリックし、インストールする

ふつうに便利なプラグインたち

お待たせいたしました。それではここからオススメしたいプラグインの紹介です！

Sketch Browser Preview

⌘ + shift + P で選択したアートボードのブラウザプレビューが見れるプラグインです。起動するブラウザの種類も選べ、ササッと見え方を確認したいときに便利！

Symbol Name Auto Complete

シンボルを作成する際、既存の命名ルールからシンボル名を自動で補完してくれるプラグインです。雑然としがちな命名ルールを揃えるのが楽になります！オススメです！

Sketch Guide

オブジェクトの上下左右、中心、両端に合わせたガイドを一瞬でひけるプラグインです。

Quick Text Override

オーバーライドしているテキストインスタンスを別ウィンドウで編集できるプラグインです。入力エリアが大きく、改行があるテキストでも見やすい。視点・カーソル移動の手間も省けて作業スピードUPも期待できます！

Sketch Measure

デザインデータの詳細をワンクリックで作成してくれるプラグインです。スタイルガイドや修正指示書の作成などの作業時間を圧倒的に短縮できます。

Symbol Organizer

作業中に作成して散らばったシンボルの整理を自動で行ってくれるプラグインです。ある程度命名ルールを揃えるだけで、データがぐっと扱いやすくなります。Sketchを使うなら、とりあえず入れときましょう。

Separate Shapes

Illustratorで言うところの、「パスの分割」がスケッチでできるプラグインです。 Sketch上でアイコンを作成する際に便利です。（分割してしまうと元の図形に戻すことはできないので、コピーを取っておくと良いと思います）

最大９つまでのビューポイントの保存、読み込みができるプラグインです。画面を移動・拡大縮小する手間が省かれ、作業スピードが一気に上がります。「あの画面どこだったっけ？」を解消してくれる優れものです。ちなみに、公式上では「fn+shift+数字キーで保存、fn+数字キーで読み込み」となっていますが、自分のMacでは「Shift+Ctrl+数字キーで保存、Opt+Ctrl+数字キーで読み込み」となっていました。動かない！という方は一度お試しください。