フリーランスの6割が「正社員もアリ」と回答。安定志向のリアルとは? 他
- 隔週月曜更新!フリーランス・副業ニュース
『Sketch』は、WebサイトやアプリのUI設計に便利なデザインソフトです。日本にも本格的に浸透してきましたが、その理由はWebデザインに最適なツールが揃っている方。今回は、『Sketch』をより便利にするためのプラグインを40個ご紹介します。
複製、回転、エフェクトを簡単にかけることができます。非線形なデザインを生み出すのにぴったりです。

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

ワンクリックで華やかな紙吹雪のパターンを生成します。
『Sketch』で、『Photoshop』のスマートオブジェクトのようなイメージを作成します。


『Google Maps』を使用し、レイヤー内にマップを埋めるためのプラグインです。
モバイルアプリケーションやWebサイトのマップビューを簡単にデザインできます。
少しの工数でマップを表示します。
Map Generator
『Compo』は、インターフェースコンポーネントを扱いやすくします。
『Compo』では、⌘Jを押すだけで、テキストレイヤーをボタンに変えたり、既存のコンポーネントを整列させることができます。
『Compo』は、『State Machine』で使用できます。

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

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

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

『Launchpad』を使用すると、『Sketch』ひとつでWeb上にレスポンシブサイトを公開することができます。
コードを書かずに、サイトを作れます。
『CSSketch』は『Sketch 3』のプラグインです。デザイン作業でレイアウト、または色や影を簡単に変更するため、スタイルシートを用いて変更することができます。
SASSや{less}にもサポートしており、関数や変数が使用可能です。
関数や変数を使用することで、ワークフローをより効率的にすることができます。

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

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

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

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

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

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

現在選択されているレイヤーから、無効なスタイルをすべて削除するシンプルなプラグインです。
使用していないスタイルを取り除くのに便利です。有効なスタイルは削除しません。([]付きのスタイルのみ消去します)
一度に複数のレイヤーの名前を変更します。
ちなみに、「プラグイン – >名前の変更 – >選択したレイヤーの名前を変更する」または、「^ +⌘+ R」のショートカットを使用してアクセスできます。
(Plugins -> Rename It -> Rename Selected Layers or use the shortcut ⌃+⌘+R)

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

これは、Sketchでダミーテキストを簡単に作成します。
フルサイズのデータから、自動的に複数アイコンのサイズを作成します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使えそうなプラグインはありましたか?
チームのメンバーにも、ぜひ共有してください。
(翻訳:Yuri Tanaka)