【Adobe XD】プラグインの使い方を解説する【おすすめも紹介】

  • PR
  • WEB制作
【Adobe XD】プラグインの使い方を解説する【おすすめも紹介】

今回は、人気のデザインツールAdobe XDの『プラグイン』の使い方について解説してゆきます。

記事の後半では【おすすめプラグイン】も紹介してゆきします!

Adobe XDについて「何ができるツールなの?」「どんな作業に適しているの?」という事が知りたい方は「Adobe XDとは?出来ることや使い方を解説する」をご覧ください。



このほか「Adobe XDの全体的な使い方を確認したい!」という方には次の記事がおススメです。

▼この記事を書いたひと

フリーランスみやしも(@miyashimo_blog)です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。

Adobe XDのプラグインについて

Adobe XDには標準機能を拡張する『プラグイン』という仕組みがあり、このプラグインを利用すれば、XDをより自分好みの作業環境にカスタマイズできる様になります。

プラグインとは
アプリの機能を拡張するソフトウェアをさす言葉。多くは必要に応じて追加・削除といった操作ができる様になっており、本体のアプリをカスタマイズする目的のために利用されます。

XDのプラグインには様々な種類のものが存在しますが、利用に際してはおおむね次のようなメリットが生まれます。



▼プラグイン利用のメリット

  • XDに存在しない機能が追加できる
  • XDによるデザインの作業効率があがる
  • 作業精度が上がり、制作物のクオリティがあがる


プラグインを使いこなせば、Adobe XDが今よりもずっと便利になりますよ!

今回はそんな、Adobe XDにおける『プラグイン』の基本的な使い方から実用的なおすすめプラグインの紹介まで、くわしく解説してゆきます。

Adobe XDにプラグインを導入する方法

Adobe XDにプラグインをインストールする方法

XDでプラグインを利用するために、まずはプラグインの導入方法から解説してゆきます。

プラグインをインストールする方法

AdobeXDにプラグインをインストールするには、次の順番で操作します。



▼プラグインを追加する方法

  1. メインメニューで『プラグイン⇒プラグインを見つける』を選択する
  2. 開いたウィンドウでプラグインの名前を検索する
  3. 各プラグインの『インストール』リンクを押す
XDにプラグインを追加する方法①
Adobe XDにプラグインをインストールする方法①
XDにプラグインを追加する方法②
Adobe XDにプラグインをインストールする方法②

以上の方法で、XDにプラグインをインストールする事ができます。

続けてアンインストールの方法も確認しておこう!

プラグインをアンインストールする方法

XDのプラグインをアンインストールする方法について、あらかじめ確認しておきましょう。



アインストールをする場合は、先ほどのウィンドウで『管理』を選択して、対象のプラグインのメニューを開き『アンインストール』ボタンを押します。

XDのプラグインをアンインストールする方法
XDのプラグインをアンインストールする方法

プラグインは『試しに使ってみる』という利用機会がおおく、試した結果、不要になったプラグインも多く出てきます。使わないと判断が利いたプラグインは、あらかじめ削除しておくことで後々の管理が楽になります。

積極的に試して、自分に合ったプラグインを厳選してゆこう!

Adobe XDのプラグインを呼び出す方法

Adobe XDにインストールしたプラグインは次の方法で呼び出し、使うことが出来ます。



▼XDでプラグインを呼び出す方法

  • ワークスペース左下の『プラグイン』アイコンをクリック
  • 左側のパネルに表示されるリストから使用したいプラグインを選択する
XDプラグインの呼び出し方
Adobe XDでプラグインを呼び出す方法
以上がプラグインを呼び出す基本的な方法となりますが、一方では、ショートカットキーに対応したプラグインもあります。

インストールしたプラグインの使い方は?

Adobe XDで利用できるプラグインのほとんどは海外製のため、使い方を調べる場合は英語のサポートページや、他のサイトの記事を参考にする必要があります。



とはいえ、ほとんどのプラグインがシンプルに出来ており、使い方を調べずとも使えることが多い現状ですが、本記事では、プラグインごとの簡単な使い方もあわせて紹介してゆきます。

初心者の方も安心して読み進めてくださいね!

Adobe XDおすすめプラグイン紹介

ここからは、Adobe XDにおけるおすすめプラグインの紹介をしてゆきます。

各プラグインごとに、XDで検索がしやすいようプラグインの名前・おススメ度を掲載してゆきます。また簡単な使い方の説明もあわせて掲載します。
プラグイン選びの際に、ぜひ参考にしていって下さいね!

アイコンフォントが使える『Icons 4 Design』

XDプラグイン紹介「Icons 4 Design」
Adobe XDのおすすめプラグイン『Icons 4 Design』
プラグイン:『Icons 4 Design』
おススメ度:★★★★☆

有名な『FontAwesome』をはじめとする12種類・5,000個以上のアイコンフォントがXD上で使用できる様になるプラグインです。



▼対応フォント

Font AwesomeFeatherIoniconsMap IconsMaterial IconsMetro UIOpen IconicPayment FontSimple IconsWeather IconsZocial



アイコン名は英単語などで検索する必要がありますが、外部のフォントデータなどを読み込む手間がなくなるため、アイコンフォントを使用したデザイン作業を高速化することが可能です。

プラグインの使い方
『Icons 4 Design』を開いてアイコンを検索&選択すると、選択したアイコンのパスデータが編集エリアに追加される。

好きなイラストを選ぶだけ!!『Un Draw』

XDプラグイン紹介「Un Draw」
Adobe XDのおすすめプラグイン『Un Draw』
プラグイン:『Un Draw』
おススメ度:★★★☆☆

たくさんのフラットデザインのイラストが利用できる様になるプラグイン。Un Drawのライセンスは全て商用利用可(クレジット表記不要)となっており、すべてのイラストが無料で利用できます。

イラストはパス形式で利用できるため、部分的に利用したり、色を変更したりといった使い方もできます!
プラグインの使い方
『Un Draw』を開いてイラストを検索&選択すると、パスデータがクリップボードに保存される。あとはCommand+V(Ctr+V)でアートボードに貼り付ければイラストが利用できます。

ダミーの顔写真を反映する『UI Faces』

XDプラグイン紹介「UI Faces」
Adobe XDのおすすめプラグイン『UI Faces』
プラグイン:『UI Faces』
おススメ度:★★☆☆☆

あらかじめレイアウトした複数のオブジェクトに対してダミーの顔写真が反映できるプラグイン。使える場面は限られますが、サンプルなどのデザインをより具体的なイメージにする、といった効果が期待できます。

プラグインの使い方
複数のオブジェクトを選択した状態でUI Facesを開き「Select Photos」を押す。開かれたウィンドウから任意の顔写真を選択する。

高さ・幅が自動調整できる『Trimlt』

XDプラグイン紹介「Trimlt」
Adobe XDのおすすめプラグイン『Trimlt』
プラグイン:『Trimlt』
おススメ度:★★★★★

アートボードやテキストエリア内のコンテンツ量にあわせて高さ・幅を自動で調整してくれるプラグイン。複数のオブジェクトを選択した一括操作にも対応してます。



▼TrimItが対応している要素

  • アートボード
  • リピートグリッド
  • テキストエリア
ページ数や横並びのレイアウトの多いWEBデザインではとくに利用頻度が高いプラグインです!
▼プラグインの使い方
オブジェクトを選択した状態でプラグインのリストにある『TrimIt』をクリックする。

テキストを一行ずつ分割できる『Split Rows』

XDプラグイン紹介「Split Rows」
Adobe XDのおすすめプラグイン『Split Rows』
プラグイン:『Split Rows』
おススメ度:★★★☆☆

1つのテキストボックスに含まれている文章を、1行おきに分割してくれるプラグイン。

▼プラグインの使い方
テキストエリアを選択した状態でプラグインのリストにある『Split Rows』をクリックする。

小数点を切り捨ててくれる『Remove Decimal Numbers』

XDプラグイン紹介「Remove Decimal Numbers」
Adobe XDのおすすめプラグイン『Remove Decimal Numbers』
プラグイン:『Remove Decimal Numbers』
おススメ度:★★★★☆

オブジェクトの座標・サイズなどの設定値に発生した小数点を切り捨ててくれるプラグイン。WEBデザインにおいて小数点を含まないデザインデータを作成する際にはとても重宝します。

▼プラグインの使い方
オブジェクトを選択した状態でプラグインのリストにある『Remove Decimal Numbers』をクリックする。

文章チェックに役立つ『テキスト校正くん』

XDプラグイン紹介「テキスト校正くん」
Adobe XDのおすすめプラグイン『テキスト校正くん』
プラグイン:『テキスト校正くん』
おススメ度:★★★☆☆

アートボード内の選択中のテキストに対して文章校正を行ってくれるプラグイン。文章校正は、以下のようなルールに従ってチェックを行ってくれます。



▼文章校正ルール(一部抜粋)

  • 「ですます」調と「である」調の混在
  • ら抜き言葉 ・ 二重否定 
  • 同じ助詞・接続詞の連続使用
  • 逆接の接続助詞「が」の連続使用
  • 全角と半角アルファベットの混在

※くわしくは公式ページをご参照ください

▼プラグインの使い方
テキストオブジェクトを選択した状態でプラグインのリストにある『テキスト校正くん』をクリックする。(※文章以外のオブジェクトを選択していると動作しない)

作業時のメモが残せる『Notes and Annotations』

XDプラグイン紹介「Notes and Annotations」
Adobe XDのおすすめプラグイン『Notes and Annotations』
プラグイン:『Notes and Annotations』
おススメ度:★★☆☆☆

XDで注釈やカギ線コネクタを設置できる様にするプラグイン。アートボード外にも設置できるため、作業時のメモを残すなどの用途にはとても便利に使えます。

プラグインの使い方
Notes and Annotationsのプラグインを開き、付箋やカギ線などの追加したい図形を選択する。

XDの関連情報まとめ

このほか、人気のデザインツール「Adobe XD」の関連情報をまとめて紹介します。

XDの基本的な使い方

Adobe XDの基本的な使い方について、つぎの記事で確認する事ができます。

各機能のくわしい使い方

各機能のくわしい使い方について、つぎの記事が参考になります。

アートボード:デザインの作業領域

リピートグリッド:デザインのくり返しを行う

コンポーネント:デザインを部品化して管理する

レイアウトグリッド:グリッドシステムのデザインに役立つ

プロトタイプ:デザインを動かすことが出来る

プラグイン:おススメも紹介する

この記事のまとめ

今回は、人気のデザインツール『Adobe XD』のプラグインについて、基本的な使い方からデザイン制作で役立つおすすめなプラグインの紹介にいたるまで、くわしく解説してきました。

プラグインを導入すればXDの作業環境がいまよりずっと便利になりますね!

Adobe XDを使ってみよう

Adobe XDは無料から使えて、かつ初心者にも扱いやすい人気のデザインツールです。多くのWEBデザイナー・UI/UXデザイナーから支持を集めており、今やWEBサイト・アプリ開発の現場では欠かせないツールになります。



▼公式サイト

Creative Cloud

デザインやUI/UXなどを学習するなら、ぜひ優先的に習得しておきたいツールですね!

基礎から学びたい方に向けて

Adobe XDの使い方を基礎から学びたい方に向けて、画像付きで分かりやすく解説する記事を書きました。

WEB初心者の方や、これからクリエイターになりたい方は必見の内容です!