Adobe XDの便利すぎる!おすすめプラグインまとめ

Adobe XDでプラグインが使用可能に

2018年10月15日にリリースされたAdobe XD 13からプラグインをインストールできるようになった。

Adobe XDを起動するとメニューにプラグインが追加されている。

Adobe XDを起動するとメニューにプラグインが追加されている

Adobe XDでプラグインをインストール

Adobe XDでプラグインはメニューの「プラグイン => プラグインを見つける」からインストール可能だ。
Adobe XDの便利すぎる!おすすめプラグインまとめ

以下にAdobe XDの便利すぎる!おすすめプラグインをまとめた。

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

Adobe XDプラグインは「インストールされたプラグイン」のインストール済みの左にある「…」からアンインストールできる。
「インストールされたプラグイン」のインストール済みの左にある「…」からアンインストールできる

QR Code Maker for XD

QRコードを作成するプラグイン。URLを入力するだけでQRコードを生成。QR Code Maker for XD

Mimic

プラグイン => Mimic を選択してURLを入力するだけで該当サイトのフォント名、カラー、画像を抽出して一覧化してくれる。
Adobe XD plugin Mimic
Adobe XD plugin Mimic

Rename It

選択したレイヤー名を置換できる。

例えばレイヤーを左から3つ選択して「list %n」で置換すると左からlist 1, list 2, list 3というレイヤー名に置換される。Rename Itプラグインは選択したレイヤー名を置換

Design Hunt Inpirations

長方形オブジェクトを用意してDesign Hunt Inpirationsを実行するとダミー画像をランダムで挿入できる。

リピートグリッドを使用した場合は画像も同じリピートが表示される。Design Hunt Inpirations

PhotoSplash

選択した複数のオブジェクトに画像を入れる。

Design Hunt Inpirationsはダミー画像がランダムで挿入されるが、こちらは自分で選択して挿入する。

Angle

アートボードの画像を角度を自動調整してオブジェクトに貼り付けることができる。
Adobe XD plugin Angle

Icondrop

200万以上のアイコンを検索して挿入できるようになる。
Icondrop

Ikono

こちらもアイコンのプラグインだがアイコンがフォントなので色変更ができる。
Adobe XD plugin Ikono

Color Blender

選択した2つのオブジェクトをブレンドした色のオブジェクトを作成。
Adobe XD plugin Color Blender

Swap Fill and Border

Illustratorのように線と塗りの色を置き換える。

Remove Decimal Numbers

オブジェクトの幅と高さの小数点を切り捨てる。
例えばW82.54, H87.73ならW82, H87にできる。
Adobe XD plugin Remove Decimal Numbers

ただし、XとYの位置は小数点が付いたままなので手動で削除が必要。

regular polygon

多角形のオブジェクトを作成できる。これがないとAdobe XDは正五角形などを作成できない。
Adobe XD plugin regular polygon

TrimIt

テキストエリアからはみ出しているテキストを折り返して表示する。
Adobe XD plugin TrimIt

Adjust size by Shortcut

Sketchのようにショートカットキーでオブジェクトのサイズを調整できる。

World Ready

アートボード内のテキストを指定した言語に翻訳することができる。

翻訳はAdobe I/O, Google, Microsoftから選択可能。

多言語対応Webサイトを作成する際に重宝する。World Ready アートボード内のテキストを指定した言語に翻訳

World Ready 翻訳結果

Odin Chart

チャート図や地図を挿入できる。ランダムのチャートだけではなくCSVファイルを用意すれば、独自のチャートを作成可能。
Odin Chart

Export to web

アートボードの内容をHTMLファイルで書き出せる。

HTMLを書く人には必須プラグイン。
Export to web アートボードの内容をHTMLで書き出せる

Copy CSS

Adobe XDの選択したオブジェクトのCSSプロパティをコピーする。

CSSを書く人には必須プラグイン。Copy CSS Adobe XDの選択したオブジェクトのCSSプロパティをコピー

テキスト校正くん

アートボードから文章校正を行いたいテキストを選択して(複数可)プラグインからテキスト校正くんを実行。
アートボードから文章校正を行いたいテキストを選択して(複数可)プラグインからテキスト校正くんを実行