お題
今回はWeb制作やデザイン作業で便利になるツールを紹介いたします！
私の中で話題のXDの可能性について触れていただければと思います。
XDプラグインとは何か？
Adobe XDはアドビが開発しているデザインツールです。毎月更新が行われ、次々に新しい機能が追加されています。
XDプラグインを使用することで繰り返し作業を自動化、アセットやデータを読み込みデザインに反映 などを使用することができます。
おすすめプラグイン
Google Sheets for XD
Google Sheetsは、スプレッドシートからデータを取り込み、テキストや画像を展開できるプラグインです。
使い方はとても簡単で、アートボード上のデータを適用するグループを選択してから、プラグインのパネルを開き、スプレッドシートのURLを指定するだけです。
下の図の左側がプラグイン実行前の状態。右側が実行後の状態です。画像やテキストが一気に読み込まれています。もちろん、リピートグリッドにも対応しています。グループ内の要素とシートの列名を対応付ける画面も用意されています。
インストールする方法
プラグインマネージャを使ってGoogle Sheetsを検索します。
インストールをクリックするだけで簡単に確認できます。
ダウンロード完了後、プラグインファイルをダブルクリックすると自動的にXDが起動してプラグインがインストールされます。
プラグインマネージャを使用して、いつでもプラグインをアンインストールできます。
Googleシートのフォーマット
コンテンツが正しくXDに取り込まれるようにするためには従うべき規則がいくつかあります。各列には1種類のコンテンツを含める必要があります。
画像を含める場合は、これらの列に貼り付けた画像のURLリンクを使用してください。
サンプルGoogle Sheetファイル
Google Sheetsの使用感はこちらの動画が分かりやすいのでぜひご覧ください！
最後に
Google Sheetプラグインを使用することで流し込み等の作業がスムーズになるかと思います。
他にもたくさんプラグインがあるので、気になった方は調べてみてください。
私が思う、理想のディレクター業務の流れとしては
デザイナーチームが作成したPSDファイルをXDに落とし込む
↓↓↓
XDでサイトマップ、ボタン遷移、アニメーション指示などを作成
↓↓↓
開発用リンクとPSDファイルと案件シートをコーダーに共有する
上記、３点のフローを徹底して行われば業務の効率が上がるのではないかなと思います。
ただし、これにはディレクターの勉強と知識の向上が必要となりますので
今すぐには難しいかと思います…(教えれる自信がない)
ではでは
