Sketchを使い倒すための便利プラグイン16選

ここ最近注目を集めているデザインツールといえば、Mac用ベクターグラフィックソフト「Sketch」です。
数年前までは日本ではほとんど知名度はありませんでしたが、Fireworksの開発終了後から徐々に注目が高まり、日本国内でも使用する人が増えています。

Adobe製品と比較すればまだまだ情報量不足のSketchですが、豊富なプラグイン、軽い使い心地などSketchならではの魅力もありデザイナーの間で話題となっているツールです。

今回は、デザイナーなら入れておきたいSketchのプラグインをまとめてご紹介します。
すでにSketchを使い始めている方はもちろん、興味を持っているという方もぜひ参考にしてみてください。

デザイン作業が捗るSketchプラグインまとめ

1.Sketch Palettes

https://github.com/andrewfiorillo/sketch-palettes
Sketch Palettesは、カラーデータの保存・読み込みができるようになるプラグインです。指定した配色をSketch Palettesファイルで保存することで、他のドキュメントでそのまま使ったり、Sketchを利用しているユーザーにシェアすることができます。いつも決まった配色を使用するという方、複数人で配色を共有したいという方は必見です。

2.Sketch Measure

https://github.com/utom/sketch-measure
Sketchで作成したデザインのオブジェクトの大きさ、マージン、カラーといった情報を調べることができるプラグインです。自動的に測り、レイヤーで書き出してくれます。ショートカット対応ですので、一度慣れてしまえば手軽に操作ができます。エンジニアとのやりとりをおこなう際に便利です。

3.Sketch Page Switch

https://github.com/mauehara/sketch-page-switch
画像出典元：http://d-programs.com/sketch_plugin1/

Sketch作業でのページ移動を楽にしたいときに便利なのが、Sketch Page Switchです。通常、ページとページを交互に使う場合移動が面倒に感じてしまいがちですが、このプラグインを導入すればショートカットキーで瞬時に移動が可能となります。

移動を助けてくれるというシンプルな機能ですが、あると結構便利です。複数ページに渡ってデザインをおこなうことが多い方、普段から移動が面倒だという方にはオススメです。

4.Sketch Commands

http://bomberstudios.github.io/sketch-commands/
Sketch Commandsは、色々な機能を備えた総合的なプラグインです。例えば要素を揃えたり、数値を指定してサイズを変更したり、大きさを揃えたり、回転、角丸にしたりという使い方もできます。

これ一つ導入すれば様々な使い方ができて便利ですので、Sketchを利用する幅広い方にぴったりなプラグインです。

5.Sketch Style Inventory

https://github.com/getflourish/Sketch-Style-Inventory
Sketch Style Inventoryを導入すると、スタイルの管理が容易になります。スタイルガイドを他のアートボードに作ったり、スタイルごとにレイヤー選択が可能。また、ドキュメント内の配色、シンボル、テキストスタイルを集めてアートボードに書き出してくれます。

6.Sketch Distributor

https://github.com/pez/sketchdistributor
いくつかのオブジェクトを水平または垂直方向に自動整列してくれるプラグインです。Sketch Distributorを導入すれば、任意の間隔を指定するだけでその値に沿って整列します。制作作業においては、オブジェクトのマージン、幅が変更になる場合もあります。

急に間隔を変更しないといけないというときにこのプラグインを入れておけば、すぐ修正することが可能です。

7.Duplicator

https://github.com/turbobabr/duplicator
Duplicatorは、選択したオブジェクトを水平または垂直方向にリピートするプラグインです。例えばリストアイテム、グリッド、何回も使うデザインのリピートをおこないたい時に便利です。面倒なリピートも一度おこなってくれますので、繰り返し作業を瞬時に完了することができ大幅に時間短縮ができます。

8.AEIconizer

https://github.com/tadija/aeiconizer
アプリアイコンを作成する際に面倒なのが、複数サイズ用意しなければならないことです。
AEIconizerは、作成したデザインから簡単にサイズ別のアイコンが作成できる便利プラグインです。

また、作成したアイコンの確認をする時、他のエクスポート関連プラグインが不要なのも便利な点です。

9.Content Generator for Sketch

https://github.com/timuric/Content-generator-sketch-plugin
Content Generator for Sketchは、デザインでダミーを使用したいときに重宝するプラグインです。
デザイン作業では度々ダミーデータが必要になることがありますが、その都度探していては手間がかかります。

このプラグインを使えば、事前に用意してある仮データ、画像、写真を取得して任意の場所に差し込んでくれます。自然な形でランダムに選択してくれるので作業時間の短縮にも繋がります。

画像はもちろんテキストの当て込みできますので、ダミーの文字を入力するのが面倒な時にも使えます。

10.Rename It

https://github.com/rodi01/RenameIt
意外に手間がかかる作業といえば、レイヤー名の変更です。Rename Itを使えば、面倒なレイヤー名の変換を一括でおこなってくれます。
この他に、連番をつけてくれたり、オブジェクトのサイズに沿って名前をつける、といったことも可能です。

レイヤー名の変更で悩んだときにぜひ使いたいプラグインとなっています。

11.CSSketch

https://github.com/JohnCoates/CSSketch
CSSketchは、その名のとおりSketchで作成したレイアウトをCSS編集することができるプラグインです。
デザインしたレイアウトをCSS形式で編集したい、という方にはぴったりですのでオススメです。

12.Divine Proportions

https://github.com/ichord/sketch-divine-proportions
デザインをおこなう際に考慮したいポイントの一つが、黄金比、1/3ルールといったものです。根拠のあるルールを取り入れることで、美しく仕上げることができます。Divine Proportionsを使えば、これら重要な比率を瞬時に描いてくれます。

重要と分かっていても自分で描くのは面倒ですが、プラグインを導入すればすぐに使えて便利です。

13.Material Design Color Palette

https://github.com/t32k/material-design-color-palette
今やデザインをおこなう上で欠かせないコンセプトといえば、Googleが発表した新しいガイドライン「マテリアルデザイン」です。
Material Design Color Paletteはマテリアルデザインのカラーパレットを作成してくれます。

マテリアルデザインを取り入れたいと思ったときに使えるプラグインです。

14.Sort Lauyers

https://github.com/getflourish/sketch-sort-layers
Sort Lauyersは、選択したレイヤーをソートするプラグインです。レイヤーを多様な方法でソートすることができます。

15.Dynamic Buttons

https://github.com/ddwht/sketch-dynamic-button
様々なアプリ、サービスのUIに必要となるのがボタンです。
一つ一つ作成すると手間がかかりますが、Dynamic Buttonsを使えばボタン作成を手軽におこなうことができます。

具体的には任意のテキストを入力すると、文字に合わせて自動的にボタンの枠を生成し、ボタンパーツが作成できます。ボタンを作ろうと思ったときにぜひ活用したいプラグインです。

16.Prott Sketch Plugin

https://blog.prottapp.com/post/ja/sketch-integration
グッドパッチが開発しているプロトライピングサービス「Prott」に作成デザインを上げるためのプラグインです。
プロトタイプの作成から共有までを簡単にしてくれますので、プロトタイプを作成する機会がある方は必須です。