今回は、おすすめのAdobe XDのプラグインについて紹介していきます!
便利なプラグインばかりですので、ぜひ取り入れてはどうでしょうか。

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

Adobe XDのプラグインをご紹介する前に、プラグインのインストール方法からご紹介していきます。
インストール方法は下記の手順のように、とても簡単です。

ワークスペース画面を開く

ワークスペース画面を開く
まずは、Adobe XDを起動させ、ワークスペース画面を開きましょう。
ワークスペース画面とは、アートボードやペーストボードなどの、デザインを作成する部分のことを言います。

ワークスペース画面の開き方としては、赤枠のように「アートボードプリセット」「最近使用したファイル」などから、ワークスペース画面を開くことができます。

プラグイン管理画面を開く

プラグイン管理画面を開く

ワークスペース画面を開いたら、左下にアイコンが3つ並んでいますので、一番下の「➀のアイコン」をクリックします。
するとプラグインパネルが開きますので、「➁プラグインを見つけるボタン」or「➂+ボタン」をクリックしてプラグイン管理画面を開きましょう。

プラグインを追加する

プラグインを追加する

プラグイン管理画面を開いたら、「参照」タブから検索窓にキーワードを入力して任意のプラグインを検索します。検索をして表示されたプラグインを選び、「インストール」をクリックすればプラグインを追加することができます。

プラグインの使い方

プラグインの使い方

プラグインパネルで、追加したプラグイン名をクリックすれば使うことができます。

おすすめの便利プラグイン

Count Text

Count Text

Webサイトのデザインを作成する中で、コンテンツ内の文字数を知りたい時があるかと思いますが、そんな時におすすめなのがCount Textというテキストの文字数を簡単に調べることができるプラグインです。
使い方は簡単で、テキストエリアをクリックした後にプラグインパネルのCount Textをクリックるするだけで、ポップアップに文字数が表示されます。

このプラグインを使うことで、わざわざテキストエリア内のテキストをコピーして違うツールで文字数を確認しなくてもすむため、とても便利です。

Artboard Plus

Artboard Plus
Webサイトのデザインを作成する中で、ついついアートボードが乱雑することがあるかもしれません。
アートボードがごちゃごちゃした状態だと、どうしても作業効率も落ちてしまいます。
そんな時に、便利なのがArtboard Plusというプラグインです。

このプラグインは、アートボードを整列させたり、並べ替えたり、間隔を調整することができます。
整理したいアートボードを選択し、プラグインをクリックするだけで、プラグインを実行できますので操作も簡単です。

Quick Mockup

Quick Mockup

Quick Mockupは、「ワイヤーフレーム」「モックアップ」「プロトタイプ」が簡単に作成できるプラグインです。プラグイン内に、あらかじめ「TOPページ」「サービスページ」「ブログページ」などページの種類ごとにテンプレートが用意されていますので、プラグインから任意のものを選んでクリックするだけでアートボード上にデザインテンプレートを追加することができます。

「ボタン」「タブ」「テキスト」などのUI要素のサンプルもプラグイン内に内臓されていますので、これらを準備する手間を省くことができます。

Resize Artboard to Fit Content

Resize Artboard to Fit Content

Resize Artboard to Fit Contentは、オブジェクトに合わせてアートボードをリサイズできるプラグインです。オブジェクトがアートボードからはみ出ている状態でデザインを制作していても、このプラグインを使えば簡単にアートボードをリサイズできます。

また、アートボードを複数選択することで、アートボードをまとめてリサイズすることもでき、作業効率が高まるかと思います。Adobe XDでの作業をはやくしたい方には、おすすめのプラグインになります。

Trimit

Trimit
TrimItは、テキストエリア内のテキストの余白を自動調整できるプラグインです。
テキストエリア内の余計な余白を消したり、足りない余白を補うことができます。

手動で余白を調整すると、若干ずれてしまうことがあるかもしれませんが、このプラグインを使えば今まで手動でやっていた作業を自動で行ってくれます。

また、ショートカットキー(option+command+T)にも対応していますので、より作業が捗ると思います。
是非このプラグインを導入してはいかがでしょうか。

Icons 4 Design

Icons 4 Design

Icons 4 Designは、5,000以上のアイコンが使える便利なプラグインです。
アイコンを探してAdobe xd上にインポートしなくても、このプラグインからアイコンを検索して使用することができます。

注意点としては、このプラグインは日本語対応されていないため、検索をする時に英語で検索しなければアイコンを探すことができないことです。

ただし、英語の苦手な方でも探したいアイコンの英語を一部入力するだけで、アイコンの候補がプラグイン上に表示されますので英語のスペルを忘れてしまった場合でも、簡単に検索することができます。

Split Rows

Split Rows
1つのテキストエリア内の文章を、1行ずつ使用したい時におすすめなのがSplit Rowsというプラグインです。使用シーンとしてはWebサイトやWord、Excelなどで文章をコピーしてアートボード上にペーストする場合に、毎回テキストエリアを作成して「見出し」「章ごとの文章」の内容ごとに分けるのはとても手間がかかります。

そんな時に、このプラグインを使えば文章をアートボード上にテキストをコピー&ペーストしてからすぐに文章を分けることができますので、作業効率が上がります。

Notes and Annotations

Notes and Annotations
Notes and Annotationsは、付箋のようなメモを作成できるプラグインです。
アートボード外に作成したオブジェクトについてのメモを残すことができますので、個人だけではなくチームでデザイン作成をする際にも便利なプラグインかと思います。

また、Adobe XDの機能としてコメントをワークス画面に残すことができますが、メモの方が見やすい場合もあります。そのような場合に、このプラグインを使うと非常に役立つかもしれません。

Stark

Stark

Starkは、デザインに使っている色の視認性が基準値に達成しているかを確認できるプラグインです。
機能としては、カラーブラインドの方の見え方をシミュレーションしたり、「Web Content Accessibility Guidelines (WCAG) 2.0」が定めている色のコントラスト比が基準に達しているかを確認することができます。

※カラーブラインドとは、色盲のことを指します。

※Web Content Accessibility Guidelines (WCAG) 2.0とは、Webサイト内のコンテンツのアクセシビリティに関するガイドラインのことです。このガイドラインは、W3C(World Wide Web Consortium)のアクセシビリティのガイドラインを作成しているWAI(Web Accessibility Initiative)という団体によって策定されています。

Mimic

Mimic
参考にしたいWebサイトのデザインをAdobe XD上で模写する時に、そのサイト内で使用されている画像を手動で一つ一つ保存したり、フォントやカラーを調べるのは手間がかかります。
そんな時におすすめのが、Mimicというプラグインになります。

このプラグインは、Webサイト内で使用されている「フォント」「カラー」「画像」をアートボード上に抽出してくれるプラグインです。

使い方は参考にしたいWebサイトのURLをプラグイン内の検索窓にペーストするだけで、「フォント」「カラー」「画像」を抽出することができます。

Lorem Ipsum

Lorem Ipsum
ダミーテキストを簡単にアートボード上へ追加できるプラグインです。
デザインの構成段階で、テキストエリアの文章が定まっていない時に、このプラグインを使うと便利です。
アートボード上のテキストエリアをクリックしてから、プラグインパネルのLorem Ipsumをクリックするだけで、ダミーテキストを追加できます。

ご自身でダミーテキストを作成したり、別のウインドウからダミーテキストをコピーしたりするという手間を省くことができるため、とても便利なプラグインです。

まとめ

今回は、Adobe XDのプラグインについて紹介しました。
記事内で紹介したプラグインはどれも便利ですので、ぜひ利用してみてはいかががでしょうか。

関連記事