デフォルトでも便利な機能が多数用意されており且つ定期的にアップデートも行われているAdobe XDですが、プラグインを利用することでより効率よくデザイン制作を進めることができます。
そこで、今回は便利なプラグインが数多く公開されている中でも個人的に特におすすめなプラグインを紹介します。

  • エントリー内では基本的にMacで使用した場合の見栄え・メニュー・ショートカットで紹介していますが、Winでもそこまで大きな違いはないので適宜置き換えてください。
  • プラグイン紹介時のキャプチャや挙動については、このエントリー公開時点のものになります。

プラグインのインストール・アンインストール・実行について

インストール

プラグインのインストール手順のイメージ

プラグインのインストールは、公式のものであればアプリから簡単にインストールができます。
イメージ内①のようにサイドにあるプラグインアイコンをクリック後に表示されるメニューの右上にあるプラスアイコンをクリック、もしくはイメージ内②のようにメニューバーの「プラグイン > プラグインを見つける」をクリックするとウィンドウが表示されるので、そこから気になるプラグイン選んでそれぞれ右側に表示されている「インストール」ボタンを押下します。
プラグインウィンドウでは、プラグイン名がわかるようなら右上に設置されている検索機能を利用して容易に目的のプラグインを見つけることができ、話題になっていたり他に便利そうなプラグインはないか探したいときには、検索横にある表示切り替えで注目順や人気順に並べ替えて表示させることができる機能が便利です。

アンインストール

プラグインのアンインストール手順のイメージ

プラグインのアンインストールについてもプラグインウィンドウ内で行います。
プラグインにマウスオンすると「…」が表示されるので、そこをクリックすると表示される「アンインストール」から行うことができます。
また、アンインストールまではせず一時的に無効化しておきたいだけであれば、その上に表示されている「無効」を選択することでプラグインを無効化できます。

プラグインの実行

プラグインは下記いずれかの方法で実行することができます。

  • サイドにあるプラグインアイコンをクリック後に表示されるプラグイン一覧から選択して実行
  • メニューバーの「プラグイン」をクリック後に表示されるプラグイン一覧から選択して実行
  • ショートカットキーを利用して実行

選択後やショートカット入力後に即実行するものもあれば、プラグインによってはさらに挙動を指定するサブメニューが表示されたり、設定項目メニューが表示されるものもあります。
また、プラグインによってはショートカットキーが用意されている(メニューバーの「プラグイン」表示で容易に確認できます)ものもあり、普段から多用するものについては覚えておくことでより制作が捗ります。

アートボードをリサイズしてくれる「Resize Artboard to Fit Content」

ショートカット:control + F
アートボード内にあるオブジェクトに合わせてアートボードをリサイズしてくれるプラグインで、使用時は対象のアートボードが選択された状態でプラグインを実行します。
設定で幅や高さを固定させることもできますし、複数のアートボードをまとめてリサイズすることもできます。
実際の動きについては、プラグイン作者さんのツイート動画で確認できます。

アートボードを整列・並び替えできる「Artboard Plus」

「Artboard Plus」の挙動イメージ

アートボード整理に役立つプラグインで、バラバラに配置されているアートボードを整列させたり、アートボード名で昇順(A→Z)または降順(Z→A)の並び替えができます。
整列時のアートボード間のスペースについては、プラグイン実行メニュー内にある「Settings」で調整できます。

アートボードを検索できる「Artboard Quick Navigate」

「Artboard Quick Navigate」の使用イメージ

ショートカット:option + command + O
大量のアートボードがあり且つ素早く目的のアートボードを見つけたいときに便利なプラグインです。
プラグインを実行するとイメージのような検索ウィンドウが表示されるので、そこで目的のアートボード名を入力して該当のアートボードが見つかればフォーカスされます。

アートボード名やレイヤー名をまとめて変更できる「Rename it」

「Rename it」の使用イメージ

ショートカット:control + option + R / control + option + command + R
アートボードやレイヤー整理に役立つプラグインで、対象のアートボードやレイヤーを選択した状態でプラグインを実行することでまとめて任意の名前に変更することができます。
名前を指定する際もただ任意のものを入力できるだけでなく、連番をつけたり幅や高さの数値を含めるといったことも指定でき、どのように変更されるかのプレビューも用意されています。
また、特定の文言を任意の文言に差し替えるといった形の変更も可能です。

ちなみに、連番表示したい場合に使用する%Nは、%NNにすれば01, 02, 03 ...に、%NNNにすれば001, 002, 003 ...にといったように、Nの数を増やすことでゼロパディング指定にすることができます。

グリッドオブジェクトを生成する「Auto Grid」

「Auto Grid」の使用イメージ

ショートカット:control + G
ガイドなどに利用できるグリッドオブジェクトを生成してくれるプラグインです。
対象のアートボーやレイヤーを選択した状態でプラグインを実行するとイメージのようなメニューが表示されるので、そこでカラム数・サイドのマージン・ガター数を任意の数値で設定して「Genetate Grid」ボタン押下でグリッドオブジェクトが生成されます。

オブジェクトサイズ調整を楽にする「Adjust Size by Shortcut」

Sketchのcommand + 矢印キーでオブジェクトサイズを調整できる動きをXDで可能にするプラグインです。
ただし、10キーベースになっているのでMacの場合はcontrol + 数字キーで使用する必要があり、それぞれ下記のような組み合わせでサイズ調整できます。

  • control + 4 ... 幅を縮小
  • control + 6 ... 幅を伸長
  • control + 8 ... 高さを縮小
  • control + 5 ... 高さを伸長

サイズや位置情報に含まれる小数を削除する「Remove Decimal Numbers」

デザインを制作していくうちにオブジェクトのサイズや位置情報に含まれてしまうことがある小数を削除(四捨五入ではなく切り捨て)することができるプラグインです。
使用時は該当のオブジェクトを選択してプラグインを実行します。

ファイル内のカラーコードやフォントサイズを抽出する「convert scss variables」

ファイル内で使用されているカラーコード・フォントサイズ・フォントファミリーを確認することができるプラグインで、アセットを利用するなどして綺麗に管理されているファイルでは不要かもしれませんが、そうでない場合で且つアートボードやレイヤーが多数あるようなファイルで使われてるものを把握したいときに便利です。
プラグインを実行するとクリップボードにコピーした旨が表示されるので、その後エディタなどにペーストすると下記のような形で出力してくれます。
プラグイン名にもあるようにSCSS変数のようになっているので、この記述に抵抗がなければそのままコーディングにも利用することもできます。

$o-bgColor--333333 : #333333;
$o-bgColor--dfdfdf : #dfdfdf;
$o-bgColor--0984e3 : #0984e3;
$o-bgColor--00cec9 : #00cec9;
$o-bgColor--ff7675 : #ff7675;
$o-bgColor--ffffff : #ffffff;
$o-fColor--333333 : #333333;
$o-fColor--999999 : #999999;
$o-fColor--0984e3 : #0984e3;
$o-fColor--00cec9 : #00cec9;
$o-fColor--ff7675 : #ff7675;
$o-fColor--dfdfdf : #dfdfdf;
$o-fColor--ffffff : #ffffff;
$o-fSize--12 : 12px;
$o-fSize--14 : 14px;
$o-fSize--16 : 16px;
$o-fSize--20 : 20px;
$o-fSize--24 : 24px;
$o-fSize--36 : 36px;
$o-fSize--46 : 46px;
$o-fSize--60 : 60px;
$o-fFamily : "Noto Sans JP","Roboto","FontAwesome"

スプレッドシートのデータをまとめて反映できる「Google Sheets」

スプレッドシートのデータをまとめてXDファイルに反映することができるプラグインです。
対象のオブジェクトを選択した状態でプラグインを実行し、それぞれどのデータを適用させるか選択するだけでイメージやテキストがどんどん反映されていきます。
スプレッドシートは公開URLを利用して指定する方法とローカルのCSVを利用する方法とが用意されています。
文章だけではピンとこないという方は、下記サイトで実際の動きを動画で確認したり、サンプルのXDファイルとスプレッドシートが用意されているので、それらを利用して試してみると便利さを実感できると思います。

特定サイトのカラーコードやイメージを抽出する「Mimic」

「Mimic」で抽出した内容のイメージ

特定のサイトから使用されているフォントファミリー・カラー・イメージを抽出してくれるプラグインで、プラグイン実行後に表示されるフィールドにURLを入力するとイメージのような形で情報がまとめられたアートボードが生成されます。

Unsplashのイメージを挿入できる「Unsplash Random Image」

「Unsplash Random Image」の使用イメージ

ショートカット:shift + option + command + X
手軽にダミーイメージを用意したいときに便利なプラグインで、プラグイン名にあるように「Unsplash」のイメージを挿入できます。
挿入したいオブジェクトが選択された状態でプラグインを実行するとメニューが表示されるので、そこでキーワードを入力して「Get Image」ボタンを押下すれば内容にマッチしたイメージが挿入されます。

サイズ表記付きダミーイメージを挿入できる「Placeholder Image」

「Placeholder Image」の使用イメージ

同じくダミーイメージを挿入できるプラグインです。
こちらの場合はパッと見でダミーとわかるイメージを挿入したいとき向けで、対象のオブジェクトが選択された状態でプラグインを実行するとイメージのようなダミーイメージが挿入されます。
サイズ表記付き(プラグイン実行時のオブジェクトサイズ)で挿入されるので、プレビューなどで見ているときにもサイズを把握しやすいです。

ダミーの顔イメージを挿入できる「UI Faces」

「UI Faces」の使用イメージ

ショートカット:shift + command + F
こちらはダミーの顔イメージを挿入できるプラグインです。
挿入したいオブジェクトが選択された状態でプラグインを実行すると上のイメージ左にあるようなメニューが表示されるので、そこでサイズ・イメージの参照サイト・年齢・性別などを任意で選択後に「Apply」ボタンを押下すれば選択内容にマッチしたイメージが挿入されます。

ダミーのロゴデザインを挿入できる「uilogos」

「uilogos」の使用イメージ

ダミーのロゴデザインを挿入できるプラグインです。
使用時は挿入したいオブジェクトが選択された状態でプラグインを実行し、ロゴタイプかロゴマークと白黒かカラーを選ぶことでロゴデザインが挿入されます。
また、複数のオブジェクトが選択された状態であれば、それらにまとめて挿入させることもできます。

Googleマップイメージを挿入できる「Maps generator」

「Maps generator」の使用イメージ

Googleマップイメージを挿入できるプラグインです。
挿入したいオブジェクトが選択された状態でプラグインを実行するとメニューが表示されるので、そこで場所・ズームレベル・タイプなどを選択して「Generate Map」ボタンを押下すればイメージが挿入されます。
そんなに頻繁にあることではないですが、デザイン制作時にわざわざGoogleマップをキャプチャしたものを貼り付けるみたいな手間がなくなります。

カレンダーを生成する「Calendar」

「Calendar」の使用イメージ

ショートカット:shift + option + command + D
カレンダーを生成するプラグインです。
プラグインを実行するとイメージのようなメニューが表示されるので、そこでセルサイズ・出力月・週の始まり・曜日の表記をそれぞれ選択して「Make Calendar」ボタン押下でカレンダーが生成されます。
現時点で言語に日本語が用意されていないので場面によっては曜日の表記などを直す必要はあるものの、自身でゼロから作成するのに比べれば遥かに楽だと思います。

QRコードを生成する「QR Code Maker for XD」

こちらはQRコードを生成するプラグインで、プラグイン実行後に表示されるフィールドにURLを入力することで簡単にQRコードが生成されます。

様々なフリーアイコンを検索・配置できる「Icons and Symbols」

様々なフリーアイコンを検索・配置できるプラグインで、Font Awesome・Feather・Ionicons・Material Iconsなどのアイコンを検索できます。
プラグインを実行すると表示されるメニュー内でキーワードを入力すれば候補のアイコンが表示されるので、使用したいものを選択すればアートボード内に配置されます。

テキストエリア領域を調整してくれる「TrimIt」

ショートカット:option + command + T
テキストエリア領域を調整してくれるプラグインです。
対象のテキストエリアを選択した状態でプラグインを実行すると、その中のテキスト量に応じてテキストエリアの領域を拡大・縮小してくれます。

テキストを1行ずつ分解してくれる「Split Row」

「Split Row」の使用イメージ

改行区切りでテキストを1行ずつ分解してくれるプラグインです。
イメージ左のようにまとまった状態のテキストを選択した状態でプラグインを実行するとイメージ右のように1行ずつ分解された状態になり、1行ずつデザインしていきたいときなどにいちいち切り取って別レイヤーとしてペーストのような作業が不要になります。

ちなみに、同じようなプラグインとして「SplitText」があり、こちらの場合はカンマやタブで分割する機能も付いているのですが分割後にテキストが重なった状態になります。
その挙動が気にならず且つカンマやタブでの分割を多用したい場合はこちらの方が便利だと思います。


普段からXDを多用している人であれば既に使用しているものも多かったかもしれませんが、まだXDを使ったことがないとか使ってはいるけどプラグインは使っていないという人は便利さを実感できると思うので是非試してみてください。