デザイン制作が捗る、個人的におすすめなAdobe XDの便利プラグイン 20

デザイン制作が捗る、個人的におすすめなAdobe XDの便利プラグイン 20

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

※エントリー内では基本的にMacで使用した場合の見栄え・メニュー・ショートカットで紹介していますが、Winでもそこまで大きな違いはないので適宜置き換えてください。

※プラグイン紹介時のキャプチャや挙動については、このエントリー公開時点のものになります。

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

インストール

XDプラグインのインストール

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

アンインストール

XDプラグインのアンインストール

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

プラグインの実行

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

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

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

デザイン制作が捗る、個人的におすすめなAdobe XDの便利プラグイン 20 目次

  1. アートボードをリサイズしてくれる「Resize Artboard to Fit Content」
  2. アートボードを整列・並び替えできる「Artboard Plus」
  3. アートボードを検索できる「Artboard Quick Navigate」
  4. アートボード名やレイヤー名をまとめて変更できる「Rename it」
  5. グリッドオブジェクトを生成する「Auto Grid」
  6. オブジェクトサイズ調整を楽にする「Adjust Size by Shortcut」
  7. サイズや位置情報に含まれる小数を削除する「Remove Decimal Numbers」
  8. ファイル内のカラーコードやフォントサイズを抽出する「convert scss variables」
  9. スプレッドシートのデータをまとめて反映できる「Google Sheets」
  10. 特定サイトのカラーコードやイメージを抽出する「Mimic」
  11. Unsplashのイメージを挿入できる「Unsplash Random Image」
  12. サイズ表記付きダミーイメージを挿入できる「Placeholder Image」
  13. ダミーの顔イメージを挿入できる「UI Faces」
  14. ダミーのロゴデザインを挿入できる「uilogos」
  15. Googleマップイメージを挿入できる「Maps generator」
  16. カレンダーを生成する「Calendar」
  17. QRコードを生成する「QR Code Maker for XD」
  18. 様々なフリーアイコンを検索・配置できる「Icons and Symbols」
  19. テキストエリア領域を調整してくれる「TrimIt」
  20. テキストを1行ずつ分解してくれる「Split Row」

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

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

目次へ

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

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

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

目次へ

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

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

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

目次へ

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

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

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

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

目次へ

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

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

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

目次へ

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

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

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

目次へ

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

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

目次へ

8. ファイル内のカラーコードやフォントサイズを抽出する「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"

目次へ

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

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

目次へ

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

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

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

目次へ

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

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

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

目次へ

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

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

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

目次へ

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

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

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

目次へ

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

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

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

目次へ

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

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

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

目次へ

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

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

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

目次へ

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

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

目次へ

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

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

ちなみに、IKONOで配布されているアイコンを多用している人であれば「Ikono」というプラグインでアイコンの検索・配置ができます。

目次へ

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

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

目次へ

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

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

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

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

目次へ


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

Close the search window,
please press close button or esc key.