基本機能からプロトタイプ制作まで!用途別・Sketchのおすすめプラグイン50選

こんにちは、UIデザイナーのサイです。私が普段のデザイン作業で使っているツールはいくつもありますが、使う頻度がもっとも高いのはSketchです。UIデザインに特化した機能のほか、便利なプラグインがあることもSketchの魅力のひとつです。この記事では、Sketchのおすすめプラグインを用途別でご紹介します。

1. 基本機能の強化

Find and Replace 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

https://midnightsketch.com

Sketchのインタフェースをダークモードにすることができるプラグインです。他にもレイヤーに色のタグをつけたり、ツールバーのアイコンを変更できる細かいカスタマイズ機能があります。

Rename It

https://rodi01.github.io/RenameIt/

複数のアートボードやレイヤーの名前を素早く変更できるプラグインです。デザイン作業をする際は、そのファイルを見るであろうチームメンバーや、翌日の自分に分かりやすい形で、アートボードやレイヤーの命名をすることが非常に大事です。このプラグインはパラメーターや順序で、複数のアートボード、レイヤーの名前を動的に変更することができます。

Sketch Runner

http://sketchrunner.com

これがないと仕事ができないくらい万能な、おすすめのプラグインです。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/craft

Libraryは、Craftの中でInVisionのプラットフォームにデザインライブラリを作成、共有できるプラグインです。シンボル、色スタイル、テキストスタイルをライブラリファイルに保存して、DropboxやGoogle Driveのようなクラウドスペースにチームメンバーと共有ができます。

Lingo

https://www.lingoapp.com/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デザイン作業の中にかなりの時間を占めたので、このプラグインはこういうった頻繁に行う作業時間を短縮化できます。

Combo

https://github.com/romashamin/compo-sketch

レイヤーの名前でレイヤー間のマージンをコントロールできるプラグイン。ラベルの長さによって自動にサイズが調整できる「ダイナミックボタン」の作成にはおすすめのプラグインです。

Craft: Duplicate

https://www.invisionapp.com/craft

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で使う際におすすめのプラグインです。

Shared Text Styles

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

http://www.sketchconfetti.com

選んだレイヤーで紙ふぶきのような模様を生成してくれるプラグインです。実はこの記事のアイキャッチ画像も、このプラグインで一瞬で作ったものです!

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://www.invisionapp.com/craft

PrototypeはCraftの中でSketchから直接プロトタイプを作ることができるプロトタイプです。作成したプロトタイプは、そのままInVisionのプロジェクトと同期することもできます。

Diya

http://diyahq.com

Sketchでタイムラインアニメーションができるプラグインです。アニメーションをシンボルにすることで再利用もできるので、既存のSketch作業プロセスにスムーズに融合できる便利なアニメーションプラグインです。

MagicMirror

https://magicsketch.io/mirror/

アートボードからモックアップを作成してくれるプラグインです。プレゼンテーションやポートフォリオ用の画像制作におすすめのプラグインです。

Marvel

https://marvelapp.com/sketch/

Marvelのプロジェクトと同期できるプラグインです。

Prott

https://github.com/goodpatch/Prott-Sketch-Plugin

Prottのプロジェクトと同期できるプラグインです。毎日Prottを使っているGoodpatchのデザイナーは、最初にインストールすべきプラグインです。

参照:ProttのSketch Pluginがついにリリース!

Timeline Animations for Sketch

https://timeline.animaapp.com/

Sketchでタイムラインアニメーションができるプラグインです。開発者によると、今はGIFと動画で書き出すことができますが、将来的にはHTMLコードでの書き出しも可能になるそうです。

User Flows

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

UIフロー図を生成してくれるプラグインです。Sketchのアートボード間にリンクをつけることですぐ作れますが、画面数が多くなると見づらくなるので、フローが単純なケースにおすすめです。

7. アセット・ガイド・ドキュメントの書き出し

Jira Cloud for Sketch

https://sketch.atlassian.com

Sketchから直接Jiraにアートボードやレイヤーをアップロードすることができるプラグインです。Jiraを使ってタスク管理しているデザイナーに便利なプラグインです。

Sketch Guides

https://celynxie.com/sources/sketchguides.html

アートボードやレイヤーの端や中央にガイドラインを作成することができるプラグイン。ガイドを頻繁に描く必要がある人にとっては、かなりの時短になります。

Sketch Measure

http://utom.design/measure/

デザイン指示を簡単に作ることができるプラグインです。開発者にファイルを渡す場合や、ガイドラインを作成する場合、特に便利なプラグインです。

Zeplin

https://zeplin.io

開発者とデザインを共有するために、Zeplinは今まででもっとも便利なサービスだったかもしれません。ZeplinのSketchプラグインを使うことで、デザインファイルを素早くアップロードすることができます。

8. デザインファイルのバージョン管理

Abstract

https://app.goabstract.com/download

AbstractのプラットフォームでSketchファイルのバージョン管理ができるプラグインです。Abstractの使い方をもっと詳しく知りたい方は、この前の記事を読むのはおすすめです。

UIデザイナーにおすすめ!Sketch Librariesの基本的な使い方とAbstract上での連携方法

デザイナー版のGitHub!デザインのバージョン管理システムAbstract社内勉強会を開催しました!

kactus

https://github.com/kactus-io/kactus

プラグインではないですが、GithubでSketchファイルのバージョン管理に特化したmacOSアプリです。Githubをそのまま使いますが、kactusのインタフェースを見ることでバージョン間の違いが分かります。Githubでデザインファイルのバージョン管理をしたい方におすすめです。

Plant

https://plantapp.io

PlantのプラットフォームでSketchファイルのバージョン管理ができるプラグインです。Abstractと同じく、Macの管理Appも提供しています。Abstractと比べると、Sketchのインタフェースにもっと馴染んだことは特徴的。

9. ダミーデータの挿入

Content Generator

https://github.com/timuric/Content-generator-sketch-plugin

ダミーの名前、写真、テキストなどを素早く生成してくれるプラグインです。デザインの初期段階ではダミーデータを探す手間を省きます。

Craft: Data/Stock

https://www.invisionapp.com/craft

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選、いかがでしたか?
たくさんのプラグインをご紹介しましたが、すべてのプラグインを無理に入れるのではなく、自分の作業プロセスや用途を考慮して、必要なプラグインだけを使うことがスマートだと思います。

デザイン作業を効率化したいなら、以下の記事も読んでみてください!

新人デザイナー必見!ときめきとひらめきの源、デザインリソースで作業を効率化しよう

ABOUTこの記事をかいた人

Hanhsiang Tsai

台湾出身のUIデザイナー。台湾の大学ではプロダクトデザインを専攻、来日後慶應義塾大学大学院メディアデザイン研究科を経てGoodpatchに入社。アップル、グーグル、任天堂、無印良品に給料を捧げる。
  • Goodpatch Blog