UIデザインソフト『Sketch』をもっと便利にするプラグイン40選

『Sketch』は、WebサイトやアプリのUI設計に便利なデザインソフトです。日本にも本格的に浸透してきましたが、その理由はWebデザインに最適なツールが揃っている方。今回は、『Sketch』をより便利にするためのプラグインを40個ご紹介します。

1.Looper

複製、回転、エフェクトを簡単にかけることができます。非線形なデザインを生み出すのにぴったりです。

sketch

Looper

2.Craft by InVision

UI / UXデザイナーに必要不可欠なツール、『Craft』。
『Photoshop』用と『Sketch』用があります。面倒な作業を自動化し、よりリアリティのあるサンプルを作り出すことで、デザインのワークフローを合理化します。

sketch

Craft by InVision

3.Confetti

ワンクリックで華やかな紙吹雪のパターンを生成します。

Confetti

4.Magic Mirror2

『Sketch』で、『Photoshop』のスマートオブジェクトのようなイメージを作成します。

sketch

sketch

Magic Mirror2

5.Map Generator

『Google Maps』を使用し、レイヤー内にマップを埋めるためのプラグインです。
モバイルアプリケーションやWebサイトのマップビューを簡単にデザインできます。
少しの工数でマップを表示します。
Map Generator

6.Compo

『Compo』は、インターフェースコンポーネントを扱いやすくします。
『Compo』では、⌘Jを押すだけで、テキストレイヤーをボタンに変えたり、既存のコンポーネントを整列させることができます。
『Compo』は、『State Machine』で使用できます。

sketch

Compe

7.Slinky

作ったデザインをHTML電子メールテンプレートとしてエクスポートします。

sketch

Slinky

8.Fluid

より制約に基づいたレスポンシブなデザインを作成するために、各デバイスの制約に基づいたデザインの提案をします。

sketch

Fluid

9.Auto Layout

レスポンシブなデザインを叶えるツール。
iPhoneサイズかiPadサイズかなど、定義や表示を再現するプラグインです。

sketch

Auto Layout

10.Launchpad

『Launchpad』を使用すると、『Sketch』ひとつでWeb上にレスポンシブサイトを公開することができます。
コードを書かずに、サイトを作れます。

Launchpad

11.CSSketch

『CSSketch』は『Sketch 3』のプラグインです。デザイン作業でレイアウト、または色や影を簡単に変更するため、スタイルシートを用いて変更することができます。
SASSや{less}にもサポートしており、関数や変数が使用可能です。

関数や変数を使用することで、ワークフローをより効率的にすることができます。

sketch

CSSketch

12.Social Artboards

主要なSNSで一般的に使用する画像サイズを、アートボードプリセットに追加する『Sketch App』用のプラグインです。

sketch

Social Artboards

13.Day Player

『Sketch『ドキュメントに、カスタマイズされたダミー画像を挿入ができます。

sketch

DayPlayer

14.Find and replace

選択したレイヤーと、その中に含まれるすべてのレイヤーのテキストを検索します。
検索したテキストを、別のテキストに置き換えます。
検索は部分的、大文字と小文字を区別し、完全な文書マッチングが可能です。

sketch

Find and replace

15.FlipSize

『FlipSize』はアートボード、レイヤー、シェイプの幅と高さを入れ替えるプラグインです。

sketch

FlipSize

16.Pixel Perfector

これは、X・Y・幅・高さなどの数値指定をコンピューターが処理できない数値を指定した場合、そのレイヤーを割り出すシンプルなプラグインです。
ドキュメントをきれいに保ち、設計仕様を正確に保ちます。

sketch

Pixel Perfector

17. Random sizing

選択した要素の幅または高さをランダムにサイズ変更する『Sketch 3』のプラグインです。
『Duplicator』のような他のプラグインと組み合わせることで、ランダムな価格のグラフやチャートをシミュレートするのに便利です。

sketch

Random sizing

18.Remove All Disabled Styles

現在選択されているレイヤーから、無効なスタイルをすべて削除するシンプルなプラグインです。
使用していないスタイルを取り除くのに便利です。有効なスタイルは削除しません。([]付きのスタイルのみ消去します)

Remove All Disabled Styles

19.Rename It

一度に複数のレイヤーの名前を変更します。
ちなみに、「プラグイン – >名前の変更 – >選択したレイヤーの名前を変更する」または、「^ +⌘+ R」のショートカットを使用してアクセスできます。
(Plugins -> Rename It -> Rename Selected Layers or use the shortcut ⌃+⌘+R)

sketch

RenameIt

20.Repeat Objects

オブジェクトを、簡単にすべてのアートボードに複製します。

sketch

Repeat Objects

21.Lorem-Ipsum

これは、Sketchでダミーテキストを簡単に作成します。

Lorem-Ipsum

22.Sketch Icon Stamper

フルサイズのデータから、自動的に複数アイコンのサイズを作成します。

sketch

Sketch Icon Stamper

23.Runner

Runnerは、毎日のワークフローに直感的インターフェイスを提供します。
Sketchで行う無駄な作業を減らし、メニューを開いて操作する必要をなくします。

sketch

Runner

24.Select Child Layers

グループのすべての子レイヤーを選択します。

sketch

Select Child Layers

25.Sketchy Pies

円のレイヤーを、円グラフに変換します!

sketch

Sketchy Pies

26.Sort Me

レイヤーリスト上のアートボードを、アルファベット順に並べ替えます。

sketch

Sort Me

27.Content Generator

『Content Generator』を使用すると、アバター、名前、地理位置データなどのダミーデータを簡単に作成できます。

sketch

Content Generator

28.Measure

レイヤーのエフェクトをRectへエクスポートします。

sketch

Measure

29.Sketch Search Everywhere

レイヤーを検索して選択します。

skech

Sketch Search Everywhere

30.Sync to Slides

スケッチのアートボードをGoogleスライドへ同期させます。

sketch

Sync to Slides

31.Appalette

ほとんどのアプリのカラーパレットを見つけることができます。

sketch

Appalette

32.Sketch Move Half Pixel

レイヤーを半ピクセル移動します。

sketch

Sketch Move Half Pixel

33.Skatter

非常に基本的な機能ですが、シェイプからパターンを作成するためのツールを備えています。

sketch

Skatter

34.IconFlower

葉の配列をパターン化させます。
アイコン、画像、形状を整理し、 たとえばヒマワリの葉の配置パターンなどを作成します。

sketch

IconFlower

35.Sketch Plugin Manager

『Sketch Plugin Manager』はGitの機能を使って、インストールされているすべてのプラグインを最新の状態に保ちます。

sketch

Sketch Plugin Manager

36.Bootstrap grid

レイヤーにブートストラップグリッドを挿入します。

sketch

Bootstrap grid

37.Cleanup Useless Groups

空のグループを削除し、レイヤリストをクリーンアップします。

sketch

Cleanup Useless Groups

38.Nudge Corner Radius

簡単なキーボードショートカットを使用して、レイヤーの角の半径を簡単に変更します。

sketch

Nudge Corner Radius

39.Spell Check Whole Page

すべてページの中にあるレイヤーのスペルをチェックします。
ベーシックなスペルチェッカーです。

sketch

Spell Check Whole Page

40.Sketch Import Symbols

別のSketchファイルから、簡単にシンボルをインポートします。

sketch

Sketch Import Symbols

使えそうなプラグインはありましたか?

チームのメンバーにも、ぜひ共有してください。

(翻訳:Yuri Tanaka)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週1〜3 リモートワーク 土日のみでも案件が見つかる!
Workship