基本機能からプロトタイプ制作まで！用途別・Sketchのおすすめプラグイン50選
こんにちは、UIデザイナーのサイです。私が普段のデザイン作業で使っているツールはいくつもありますが、使う頻度がもっとも高いのはSketchです。UIデザインに特化した機能のほか、便利なプラグインがあることもSketchの魅力のひとつです。この記事では、Sketchのおすすめプラグインを用途別でご紹介します。
目次
1. 基本機能の強化
Find and Replace Text plugin for Sketch
https://github.com/thierryc/Sketch-Find-And-Replace
選んだレイヤーの中のテキスト、あるいはファイルの中にあるすべてのテキストを検索と置換できるプラグインです。検索の範囲は自分で設定できるので、間違えてテキストを置換することを防げます。シンボルのOverridesのテキストもサポートするので、たくさんシンボルを使っても心配なく使えます。
Keys for Sketch
https://github.com/exevil/Keys-For-Sketch
Sketchのショートカットを管理できるプラグインです。従来、ショートカットをカスタマイズしたい場合は、macOSのシステム環境設定から自分でメニュー項目を入力しなければなりませんでした。このプラグインでは、Sketchの環境設定からすべてのメニュー項目がリスト化され、簡単にショートカットをカスタマイズすることができます。
Midnight Sketch
Sketchのインタフェースをダークモードにすることができるプラグインです。他にもレイヤーに色のタグをつけたり、ツールバーのアイコンを変更できる細かいカスタマイズ機能があります。
Rename It
https://renameit.design/sketch/
複数のアートボードやレイヤーの名前を素早く変更できるプラグインです。デザイン作業をする際は、そのファイルを見るであろうチームメンバーや、翌日の自分に分かりやすい形で、アートボードやレイヤーの命名をすることが非常に大事です。このプラグインはパラメーターや順序で、複数のアートボード、レイヤーの名前を動的に変更することができます。
Sketch Runner
これがないと仕事ができないくらい万能な、おすすめのプラグインです。Sketch Runnerはシンボルの作成と挿入、ページ間の移動、レイヤースタイルの適用など頻繁に行うアクションをすべてキーボードだけで完結できます。一度慣れると離れられなくなりますよ。
2. シンボル・ライブラリ・デザインシステムの管理
Craft: Design System Manager
https://www.invisionapp.com/blog/announcing-invision-design-system-manager/
InVisionが出した「Craft」は複数のプラグインを集めたプラグイン集です。その中の「Design System Manager」はSketchの中でInVisionのデザインシステムプラットフォームをアクセル、編集できるプラグインです。正式リリースはまだされていませんが、早期アクセスは開始しています。
Craft: Library
https://www.invisionapp.com/inside-design/craft-library-update/
Libraryは、Craftの中でInVisionのプラットフォームにデザインライブラリを作成、共有できるプラグインです。シンボル、色スタイル、テキストスタイルをライブラリファイルに保存して、DropboxやGoogle Driveのようなクラウドスペースにチームメンバーと共有ができます。
Lingo
https://www.lingoapp.com/integrations/sketch
Sketchで作成されたデザインシステムをチームメンバーと共有できるプラグインです。macOSアプリもあるので、Sketchを使わない他の職種のメンバーでもデザインシステムにアクセスすることができます。
Move To Library
https://github.com/ahmedmigo/Move-to-library-sketchplugin
シンボルをライブラリファイルに移動できるプラグインです。特定のファイルで作ったシンボルを別のファイルにも使えるように、ライブラリファイルに移動する時におすすめのプラグインです。
Rename Instances
https://github.com/exevil/sketch-rename-instances
インスタンスの名前をシンボルの名前と一致させるプラグインです。デザイン作業の途中でシンボルの名前をよく変更する人は、このプラグインを使えば、レイヤーの名前をいつもキレイに整理しておくことができます。
Symbol Instance Sheet
https://github.com/sonburn/symbol-instance-sheet
ファイルにあるすべてのシンボルを、一個ずつインスタンスで作成してくれるプラグインです。ライブラリファイル、デザインシステム、デザインガイドラインを作成する時に便利です。
Symbol Organizer
https://github.com/sonburn/symbol-organizer
シンボルページにあるシンボルレイヤーを自動に整理してくれるプラグインです。シンボルの数が増えたら、人力で管理するのはかなり大変なので、大量なシンボルを整理するためには欠かせないプラグインですね。
3. アートボード・レイヤーのマージンやレイアウトの調整
Artboard Manager
https://github.com/bomberstudios/artboard-manager
アートボードを自動に整列してくれるプラグインです。デザインパターンを発散するため、たくさんのアートボードを作った場合や、UIの画面数が多い場合は、このプラグインを使うことで、アートボードを設定したマージンで並べられます。資料作成にも使えますね。
Auto Layout for Sketch
https://github.com/AnimaApp/Auto-Layout
レスポンシブデザインの制作に役に立つプラグインです。スマホだけではなく、タブレット、PCなど複数の端末に対応したデザインを作成しなければならない場合特におすすめです。
Butter
https://github.com/pberrecloth/butter-sketch-plugin
指定した数値のマージンを複数のアートボードやレイヤーに一瞬に適用できるプラグインです。レイヤーの間の距離を調整することは、UIデザイン作業の中にかなりの時間を占めたので、このプラグインはこういうった頻繁に行う作業時間を短縮化できます。
Compo
https://github.com/romashamin/compo-sketch
レイヤーの名前でレイヤー間のマージンをコントロールできるプラグイン。ラベルの長さによって自動にサイズが調整できる「ダイナミックボタン」の作成にはおすすめのプラグインです。
Craft: Duplicate
https://support.invisionapp.com/hc/en-us/articles/115000651283-Duplicate
DuplicateはCraftの中で指定した行、列の数量でレイヤーを複製することができるプラグインです。テーブルやリストなど重複するものを作るときにかなり便利なプラグインです。
Paddy
https://github.com/DWilliames/paddy-sketch-plugin
自動にレイヤー間を指定した数値を保つことができるプラグインです。Butterよりも自由度が高く、レイヤーの間の距離を調整する時間をかなり短縮できます。使いこなせたら離れられなくなる便利なプラグインです。
Sort Me
https://github.com/romashamin/sort-me-sketch
アートボードやレイヤーを名前で整列してくれるプラグインです。機能はシンプルですが、こっそり効果を発揮してくれるプラグインです。
4. テキスト・色・レイヤースタイルの管理
I Want Apple System Font
https://github.com/usagimaru/Sketch-AppleSystemFont-Plugin
Goodpatchのインタフェースデベロッパーが開発した、テキストをmacOSやiOSのネイティブテキストの見た目に近づけることができるプラグインです。Sketchで組んだ文字はどうしても実装されたものと違うと感じたことはありませんか？このプラグインなら、macOSやiOSで実際に使われているシステムフォントの微調整を再現できますよ。
Icon Font
https://github.com/keremciu/sketch-iconfont
アイコンフォントの挿入と管理ができるプラグインです。GoogleのMaterial Design Icon Fontや、自分が制作したアイコンフォントをSketchで使う際におすすめのプラグインです。
https://github.com/nilshoenson/shared-text-styles
テキストスタイルを書き出す/読み込むことができるプラグインです。メンバー間のテキストスタイル共有におすすめのプラグインです。
Sketch Palettes
https://github.com/andrewfiorillo/sketch-palettes
カラーパレットを書き出す/読み込むことができるプラグインです。こちらもShared Text Stylestと同じく、メンバー間のカラースタイル共有におすすめのプラグインです。
Sketch Styles Generator
https://github.com/lucaorio/sketch-styles-generator
一気に複数のスタイルを作成することができるプラグインです。レイヤーの名前を事前に設定しておけば、スタイルの作成時間をかなり短縮することができるので、デザインガイドラインを制作する時に特に役に立ちます。
5. グラフィック・チャートの制作
Blender
https://github.com/bunnieabc/Blender
Illustratorのブレンドツールのような機能を持つプラグインです。IllustratorからSkethへ移行するデザイナーにとっては嬉しい機能ですね。
Chart
https://github.com/pavelkuligin/chart
入力したデータでいろんな種類のグラフやチャートを自動に作成できるプラグイン。ファイナンスやヘルスケア系のUIデザイナーに特におすすめです。
Confetti
選んだレイヤーで紙ふぶきのような模様を生成してくれるプラグインです。実はこの記事のアイキャッチ画像も、このプラグインで一瞬で作ったものです！
IconFlower
https://github.com/avadhbsd/IconFlower
選んだレイヤーでひまわりのような葉序の模様を生成してくれるプラグインです。
Looper
https://github.com/sureskumar/Looper
選んだレイヤーを複製・変化することで、幾何学模様を生成してくれるプラグインです。実験的にグラフィックを作りたい場合に使えそうですね。
Ramdom Colors
https://github.com/avadhbsd/RandomColors
選んだレイヤーにランダムで色をつけるプラグインです。Confettiとセットで一緒に使うと、カスタマイズの紙ふぶきを簡単に作れます。
Skatter
https://github.com/joshdjuric/Skatter
選んだレイヤーでランダムに模様を生成してくれるプラグインです。背景画像を作る時におすすめです。
Sketch Isometric
https://github.com/sureskumar/sketch-isometric
アートボードや長方形のレイヤーから等角図を作成することができるプラグインです。プレゼンテーション用のモックアップや、重複するパターンを作るにはおすすめのプラグインです。
Sketchy Pies
https://github.com/abynim/sketchy-pies
指定したパーセントと色で円グラフを自動に作成してくれるプラグインです。上のChartと同じく、ファイナンスやヘルスケア系のUIを作る時にかなり便利です。
6. プロトタイプ・アニメーションの制作
Craft: Prototype
https://support.invisionapp.com/hc/en-us/articles/115002498766-Prototype
PrototypeはCraftの中でSketchから直接プロトタイプを作ることができるプロトタイプです。作成したプロトタイプは、そのままInVisionのプロジェクトと同期することもできます。
Diya
Sketchでタイムラインアニメーションができるプラグインです。アニメーションをシンボルにすることで再利用もできるので、既存のSketch作業プロセスにスムーズに融合できる便利なアニメーションプラグインです。
MagicMirror
https://magicsketch.io/mirror/
アートボードからモックアップを作成してくれるプラグインです。プレゼンテーションやポートフォリオ用の画像制作におすすめのプラグインです。
Marvel
Marvelのプロジェクトと同期できるプラグインです。
Prott
https://github.com/goodpatch/Prott-Sketch-Plugin
Prottのプロジェクトと同期できるプラグインです。毎日Prottを使っているGoodpatchのデザイナーは、最初にインストールすべきプラグインです。
参照：ProttのSketch Pluginがついにリリース！
Anima for Sketch
https://www.animaapp.com/sketch
Sketchでタイムラインアニメーションができるプラグインです。開発者によると、今はGIFと動画で書き出すことができますが、将来的にはHTMLコードでの書き出しも可能になるそうです。
User Flows
https://abynim.github.io/UserFlows/
UIフロー図を生成してくれるプラグインです。Sketchのアートボード間にリンクをつけることですぐ作れますが、画面数が多くなると見づらくなるので、フローが単純なケースにおすすめです。
7. アセット・ガイド・ドキュメントの書き出し
Jira Cloud for Sketch
https://github.com/atlassian/jira-cloud-for-sketch
Sketchから直接Jiraにアートボードやレイヤーをアップロードすることができるプラグインです。Jiraを使ってタスク管理しているデザイナーに便利なプラグインです。
Sketch Guides
https://celynxie.com/sources/sketchguides.html
アートボードやレイヤーの端や中央にガイドラインを作成することができるプラグイン。ガイドを頻繁に描く必要がある人にとっては、かなりの時短になります。
Sketch Measure
デザイン指示を簡単に作ることができるプラグインです。開発者にファイルを渡す場合や、ガイドラインを作成する場合、特に便利なプラグインです。
Zeplin
開発者とデザインを共有するために、Zeplinは今まででもっとも便利なサービスだったかもしれません。ZeplinのSketchプラグインを使うことで、デザインファイルを素早くアップロードすることができます。
8. デザインファイルのバージョン管理
Abstract
AbstractのプラットフォームでSketchファイルのバージョン管理ができるプラグインです。Abstractの使い方をもっと詳しく知りたい方は、この前の記事を読むのはおすすめです。
kactus
https://github.com/kactus-io/kactus
プラグインではないですが、GithubでSketchファイルのバージョン管理に特化したmacOSアプリです。Githubをそのまま使いますが、kactusのインタフェースを見ることでバージョン間の違いが分かります。Githubでデザインファイルのバージョン管理をしたい方におすすめです。
Plant
PlantのプラットフォームでSketchファイルのバージョン管理ができるプラグインです。Abstractと同じく、Macの管理Appも提供しています。Abstractと比べると、Sketchのインタフェースにもっと馴染んだことは特徴的。
9. ダミーデータの挿入
Content Generator
https://github.com/timuric/Content-generator-sketch-plugin
ダミーの名前、写真、テキストなどを素早く生成してくれるプラグインです。デザインの初期段階ではダミーデータを探す手間を省きます。
Craft: Data/Stock
Craftの中で、指定した写真やデータからダミーデータを生成してくれるプラグインです。Content Generatorよりリアリティを重視したい場合、このプラグインを使って、自分のデータやイメージソースからダミーデータを作るのはおすすめです。
Map Generator
https://github.com/eddiesigner/sketch-map-generator
シェープに指定した範囲の地図を挿入することができるプラグイン。UIに地図が必要な場合は、このプラグインで素早く本当の地図画像を取得できます。
10. おまけ
Color Contrast Analyser for Sketch
https://github.com/getflourish/Sketch-Color-Contrast-Analyser
レイヤーの色コントラストやテキストサイズを検査することができるプラグインです。WCAG（Web Content Accessibility Guidelines）2.0で示した達成レベル（AA、AAA）をパスできるかどうかを確認できます。
おすすめのプラグイン50選、いかがでしたか？
たくさんのプラグインをご紹介しましたが、すべてのプラグインを無理に入れるのではなく、自分の作業プロセスや用途を考慮して、必要なプラグインだけを使うことがスマートだと思います。
デザイン作業を効率化したいなら、以下の記事も読んでみてください！
