【知らなきゃ損!】Web制作者必見！Adobe XDおすすめプラグイン8選！作業効率が劇的に上がる！

【知らなきゃ損!】Web制作者必見！Adobe XDおすすめプラグイン8選！作業効率が劇的に上がる！

こんにちは！デザイナーの田中です。
みなさんはWebデザインをする時にどんなソフトを使っていますか？
僕は最近Adobe XDを使っているのですが、IllustratorやPhotoshopのような操作感でできないことが多々あって、ちょっとめんどくさいな〜と思うことがあります。
塗りと線を入れ替えたり、整列の時にキーオブジェクトを設定できなかったりなど。。。
しか〜し！見つけました！これらを解決してくれるプラグインという便利アイテムに！！
ということで、今回は僕が使っているプラグインを紹介していきます！

プラグインのインストール方法

①「プラグイン」アイコンをクリック
②「プラス」アイコンをクリック
③「検索」アイコンをクリック

④プラグイン名を入力 ＞ Enter
⑤「インストール」をクリック

Swap Fill and Border

IllustratorやPhotoshopでは簡単にできるのにXDではなぜかできないオブジェクトの塗りと線の色を入れ替えるプラグインです。

＜ショートカット＞　command ＋ shift ＋ X

Singari

僕はIllustratorで整列をする時にかなりの頻度でキーオブジェクトを設定するのですが、XDだとできなくてとても不便でした。この悩みを解決してくれるプラグインです。整列の時に最後に選択したオブジェクトがキーオブジェクトに設定できます。

例えば「赤 → 緑 → 青」の順で選択をし、左揃えで整列をすると、
　・プラグインなしの場合、キーオブジェクトは赤
　・プラグインありの場合、キーオブジェクトは青
となります。

Remove Decimal Numbers

オブジェクトを調整していると、気づいたら“幅に小数点が付いてる〜”って時ありませんか？
この小数点を切り捨てて整数にしてくれるプラグインです。
オブジェクトの幅（W）と高さ（H）だけでなく位置（X,Y）も整数にしてくれます。

Resize Artboard to Fit Content

アートボードが大きすぎるや小さすぎるといった時に内包するオブジェクトに合わせてアートボードをリサイズしてくれるプラグインです。

プラグインの設定によってリサイズ方法を変更できます。
 ・内包するオブジェクトに合わせて幅と高さをリサイズ
 ・内包するオブジェクトに合わせて高さをリサイズ（アートボードの幅は維持）
 ・アートボードの幅と高さを任意の数値で指定

＜ショートカット＞　control ＋ F

Split Rows

原稿からテキストをコピペする時に、1行ずつ別々のテキストエリアにしたいって時に大活躍！改行ごとにテキストエリアを分割してくれるプラグインです。
分割後、グループ化されていないのでそれぞれをすぐに移動できるのが嬉しい。

Trimlt

テキストエリアにテキストを流し込んだ時、テキストエリアが足りなかったり、余ってしまう時がよくあります。そこでこのプラグインを使うとテキストの量に合わせてテキストエリアを調整してくれます。
複数のテキストエリアを選択すれば同時に調整してくれます。

Icons 4 Design

XDからブラウザに移動せずに、XD内でアイコンの検索・挿入ができるプラグインです。
検索は英語ですが、種類が豊富で色もすぐに変えられるので是非おすすめです！

Webでお困りの方！ECBBにお任せください！

ECBBではWebデザインだけでなく、Webサイト制作・ECサイト構築・印刷通販システム・システム開発など幅広く承っております。お困りごとがありましたら、お気軽にお問い合わせください。
https://ecbb.co.jp/#inquiry

グッドデザイン賞受賞、レッドドット受賞、すべてのiPhone・iPad・Kindleカバー「Palmo」や世界最軽量モバイルスタンド「フォルダブル」、クラファン日本一のポーチ「#2GO（トゥーゴー）」なども、ECBBのプロダクトです。サイトのデザイン制作もシステムも自社で！見てみてください！^_^

Palmo for iPhone 12シリーズ予約注文も受付開始しています！^_^