エンジニアの副業は週1からでも可能?副業の例や探し方も解説
- ITエンジニア
- 副業
『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)