Adobe XDの操作性を最大限引き出すうえで欠かせないもの。それは、作業を拡張することができるプラグインです！プラグインを使えば、これまで時間がかかっていた作業を効率化することができます。
とはいえ、数え切れないほどあるAdobe XDのプラグインの中で、自分に合うプラグインを一つずつ探していくのは、時間も労力もかかってしまいます。
おすすめのAdobe XDプラグイン
作業効率化できるおすすめプラグイン
【 Resize Artboard to Fit Content 】
Adobe XDで作業をしている際にアートボードをコンテンツの幅に調整したいというシーンは、誰でも一度は体験したことがあるのではないでしょうか。
目分量だとピッタリと合っているのかわかりづらく、中の要素の大きさが変わるたびにアートボードの大きさも変えなくてはいけないので、面倒です。
Resize Artboard to Fit Contentは、そんな地味に面倒な作業を一瞬で行ってくれるプラグインです！
アートボードを選択した状態で「control+F」を押せば、一発で中の要素に合わせてアートボードの幅を調整してくれます。
【 Split Rows 】
Split Rowsは、テキストボックスの中にある文字列を改行ごとに分解してくれるプラグインです。
Adobe XDでワイヤーフレームやデザインを作成している際にテキストを細かく分けていく作業は、地味に時間がかかってしまいます。
しかし、このプラグインがあればテキストを瞬時に分解してくれるので、作業効率を高めたい人にはおすすめです！
Split Rowsには、2種類の分割方法がありますが位置やスタイルを維持したまま分割したい場合は「Split Preserve Appearance」を選択します。
特に、位置やスタイルを気にせずにシンプルに分割だけしたい場合は、「Split Simple」でも大丈夫です。
実行すると改行ごとにテキストボックスが分解されます！
コンポーネント化されたテキストやアウトライン化されているテキストの場合はエラーがでるので、通常のテキストボックスで実行しましょう。
デザイン作成時に役立つおすすめプラグイン
【 Icons 4 Design 】
Icons 4 Designは、Adobe XD上で5,000以上のアイコンが使えるプラグインです。
このプラグインを使えば、アイコンを探すために、ブラウザとAdobe XDを行き来する手間がなくなります！
アイコン検索時は英語での入力となるため、よく使うアイコンの単語は覚えておくことをおすすめします。
【 Unsplash Random Image 】
Unsplash Random Imageは、ダミー画像を自動挿入してくれるプラグインです。デザインを作成する人なら利用している人も多いUnsplashからランダムに画像を選んで挿入してくれます。
画像をいれたい要素を選択した状態で、プラグインを起動すると検索ボックスがでてきます。
今回は、試しにNatureと入れて実行してみます。
すると関連した画像が自動で挿入されました。
ダミー画像でワイヤーフレームやデザインのイメージを分かりやすくしたいときにおすすめです！
Unsplashは海外の画像が多く、あまり多用しすぎると本番画像を入れたときにデザインが全く異なって見えることもあるので、注意しましょう！
【 Mimic 】
Mimicは、参考にしたいWEBサイトのフォントやカラーなどの情報を自動抽出してくれるプラグインです。
ブラウザからデベロッパーツールやカラーピッカーなどで、調べることもできますが、ソフトを行き来するのは、結構な手間がかかってしまします。
Mimicなら、対象サイトのURLを入力して抽出ボタンをクリックするだけなので、とても便利です！
このようにフォントやカラーなどを自動出力してくれるので、ソフトを行き来する必要もありません！
コーディングに役立つおすすめプラグイン
【 web Export 】
web Exportは、Adobe XDのデザインデータをHTMLファイルとして書き出してくれるコーダー必見のおすすめプラグインです！
プラグインを起動して「最後のアートボードをエクスポート」のボタンをクリックすれば、一瞬でHTMLファイルが出力されます。
実際に開いて見てみるとXDのデザインデータのまま出力してくれています。
レスポンシブ対応はしていない点や100%デザインデータのまま出力されるわけではないので、あくまでも確認用として使うことをおすすめします。
【 Docs 2 Design 】
Docs 2 Designは、ExcelとXD上のテキストを連携できるプラグインです。Excel上で記入したテキストを一括でXDへ流し込んでくれるので、一つずつテキストボックスをクリックして編集するという手間を省くことができます！
使う際は、アートボードを選択した状態で「Export」をクリックします。
保存先を指定してExcelファイルを開くとテキストがスプレットシートに出力されていることが確認できます。
テキストブロックごとにナンバリングしてくれるので、どのテキストを編集しているのかわかりやすいところも嬉しいポイントです！
Excel側で編集が完了したら、「Update」をクリックし対象ファイルを選択します。
これだけで、テキストを流し込むことができます！
さらに、このプラグインはスプレッドシートと連携することも可能です。デザイナーやコーダーに依頼するときもExcelかスプレッドシートで共有できるので、一元管理したい人にもおすすめです。
無料版だとプラグインから直接連携することはできないので、スプレッドシートで管理したい場合は、Excelファイルをインポートして行いましょう。
Adobe XDにプラグインをインストールする方法
プラグインのインストール手順
まずは、XD操作画面の1番左下にあるブロックのアイコンをクリックします。
次にプラグインのサイドメニューが表示されるので、上の方にある「+」マークをクリックしましょう。
プラグインインストール画面が表示されるので、検索ボックスにインストールしたいプラグイン名を入力しましょう。
対象のプラグインがでてくるので、「インストール」をクリックすれば使えるようになります！
アンインストールの方法
アンインストールしたい場合は、インストールと同様の手順でプラグインを検索し、メニュー（・・・）の中にあるアンインストールをクリックしましょう。
一時的に無効にしたい場合は、アンインストールの上の「無効」をクリックするとプラグインがオフの状態になります。
Adobe XDプラグインの使い方
サイドメニューからプラグインを使う方法
XD操作画面の左下にあるブロックアイコンをクリックするとプラグインのサイドメニューが表示されます。
インストールしたプラグインはそこに一覧表示されるので、使いたいプラグインをクリックして起動しましょう！
ショートカットキーでプラグインを使う方法
プラグインの種類にもよりますが、ショートカットキーで呼び出すことも可能です。
次の画像のようにメニューバーのプラグイン一覧からショートカットを確認できるので、ショートカットが使えるプラグインであれば、作業効率アップのためにも積極的に使っていきましょう！
Adobe XDでプラグインを使ってみよう！
今回ご紹介したAdobe XDのおすすめプラグインは、どれも無料で利用できます。
プラグインを使えば、これまで行っていた作業を大幅に時短にできるだけでなく、面倒だと思っていた作業も楽に行なえます。
まずは、自分の作業内容に合うプラグインをインストールして試してみましょう！