Adobe XDのおすすめプラグイン 便利なものだけを用途別に紹介

画像:Adobe XD プラグイン 便利なプラグインを紹介

どんどん便利な機能が実装されていくAdobe XDですが、それでもまだ基本機能では出来ない事もあります。
逆に今ではプラグインを使わずとも出来る機能も沢山あります。

「何となく便利そうだけど要るのかな?」
「でも無駄なものは入れたくない」

という方に、作業効率を高めるおすすめのプラグインだけ紹介します。

実は知らないだけで、前述したように基本機能で出来る事も多いので参考にして下さいね。

最新機能とテクニックはAdobeの公式チュートリアルサイト「Adobe XD Trail」が分かり易くておすすめです。

画像:Adobe XDのおすすめチュートリアルを紹介

Adobe XDの使い方はXD チュートリアルでOK

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

プラグインは公式サイトからダウンロードするのが安心です。プラグイン検索はXDアプリ内から簡単に行ける様になっています。

まずはAdobe XD プラグインの検索画面へ

画像:Adobe XD プラグインはここから探せる
XDプラグインはここから探せる

上記の様に、プラグイン検索画面へ行く方法は2つあります。

  • 画面上の【プラグイン】メニューから。
  • 画面左下のアイコン →【プラグインを見つける】ボタンをクリック。
画像:Adobe XD プラグイン インストールしたプラグインはここから使える
インストールしたXDプラグインは左下アイコンからも確認出来る

左下アイコンの方はインストールしたプラグインが見やすく一覧表示されるので、検索する時もこちらの方が分かり易いかもしれません。

Adobe XD プラグインの検索方法

画像:Adobe XD プラグイン検索手順
XDプラグインの検索手順

Adobeのアプリで使えるプラグインがすべてここから検索出来ますが、このままでは検索しにくいのでXDだけに絞り込みをします。

① すべてのプラグイン

最初はXDだけでなくPhotoshopなど他のアプリのおすすめプラグインも一緒に表示されています。

このままでは探しにくいので【すべてのプラグイン】を一度クリック。

② アプリケーション

アプリケーション名が表示されますので、【XD】にチェックを入れます。

検索一覧からXDプラグインのインストール

画像:Adobe XD プラグイン インストールはここをクリック

プラグインのインストールには【入手】をクリックします。それ以外の所をクリックするとプラグインの詳細が表示されます。

ただし、英語表記かつ使い方の詳細が見つからない事も多いので大変かもしれません。

この記事では日本語での解説を用意しましたので参考にしてくださいね。

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

画像:Adobe XD プラグインのアンインストールはここから
XDプラグインのアンインストールはここから

インストール済みのプラグインの所にある三点リーダーをクリックすると【アンインストール】が出来ます。

Adobe XD プラグインは役割によって6つのカテゴリーがある

画像:Adobe XD プラグインは役割事に6つのカテゴリーに分けられる
XDプラグイン役割別に6つのカテゴリー

プロトタイプ制作時に必要となる機能を役割ごとにカテゴリー分けしてあります。自分に必要なプラグインを探す手がかりとして利用出来ます。

カテゴリー名を見ても分かりにくいので簡単に補足説明していきます。

各プラグインの特徴

プラグインごとの特徴を整理しました。プラグインによっては複数のカテゴリーに分類されるものもあります。

今ではXDの基本機能で出来る事も多いので、プラグインのインストール前に確認して下さいね。

①アセットデザイン

プロトタイプを作る際に必要なよく使うデザインパーツや画像などの素材が、プラグイン側であらかじめ用意されています。

プラグイン以外にXDの公式サイトでもUIキットが用意されていますので、そちらも参考にしてください。

②公開とハンドオフ

ハンドオフとはIT用語で言えば、他の端末に引き継ぐこと。XDで作ったデータをHTMLやCSSで書き出すなど、コーディング作業時に役立つ機能です。

デザイナーの方でコーディングが苦手な方は補助的に使うと便利です。

③ユーザービリティとテスト

色のコントラストや文字のサイズなど、ユーザビリティをチェックできるプラグインがまとめられています。

ただし説明文などは基本的に英語です。また、高機能だけど有料だったり、別途アカウント登録が必要になるプラグインも多いです。

④ツールと自動処理

レイヤーの名前を一括で変更したり、複数のアートボードの余白を取り除くなど時間短縮や効率化を図る機能がまとまっています。

⑤共同作業

チーム内外のメンバーと情報共有する際に役立つ機能をもつプラグインがまとめてあります。ドキュメントにコメントを付けたり出来ますが、今ではXDの基本機能で出来る事も多いです。

⑥すべてを参照

そのままですが、すべてのカテゴリーをまとめて表示させます。

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

Quick Mockup モックアップの作成が簡単

画像:Adobe XD プラグイン Quick Mockupのインストール
Quick Mockup

よく使われるUI要素が既に用意されており、簡単に素早くモックアップを作れるプラグインです。

色々なスタイルやステート、サイズが用意されていて、Adobe XDで直接編集してカスタマイズも可能です。

参考サイト:Adobe Blog

unDraw フリーイラスト素材を挿入出来る

画像:Adobe XD プラグイン unDrawのインストール
unDraw

unDrawは海外のイラスト素材サイトですが、XDからイラストを探してドキュメントに挿入できるプラグインです。

何かしら画像が入っている方がデザインのイメージが掴みやすいので、有料素材サイトを使えない時は参考に。

Resize Artboard to Fit Content コンテンツの高さや幅に揃える

画像:Adobe XD プラグイン Resize Artboard to Fit Contentのインストール
Resize Artboard to Fit Content

制作の段階ではアートボードの高さを伸ばす事はよくあります。でもデザイン完了の段階で思いがけず下に余白が残ってしまう事も。

このプラグインを使えば選択したアートボードの下辺にある余白を取り除き、オブジェクトの下辺に揃えてくれます。

複数のアートボードで一気に適用させる事も出来ます。

画像:Adobe XD プラグイン Resize Artboard アートボードの余白を取る
アートボードの余白を取る

Resize Artboard to Fit Contentの使い方

設定の種類は「アートボードをコンテンツに合わせる」だけなのでシンプルで分かり易いです。まず最初に「設定」項目でチェックを入れたりサイズを変更しておきましょう。

アートボードをコンテンツに合わせる

前述した通り、最初に設定項目で指定した内容でアートボードがリサイズされます。

設定は「現在のアートボード幅を維持する」にチェックを入れておけば問題ないと思います。

設定

画像:Adobe XD プラグイン Resize Artboardのリサイズ設定を解説

サイズ維持

オブジェクトがアートボードからはみ出している場合、オブジェクトに合わせてアートボードが広がります。

広がる事にメリットは無いので、基本的には「現在のアートボード幅を維持する」にチェックを入れた方が良いです。

もしアートボードの横幅を変える時は「サイズ固定」でサイズ指定をします。

オフセット

下辺のサイズを「0」にしておけば、アートボードを配置したオブジェクトの下辺にフィットさせてくれます。

Artboard Plus 複数のアートボードを揃える

画像:Adobe XD プラグイン Artboard Plusのインストール
Artboard Plus

デザインをしていくとアートボードの数が増えていきますし、特に高さはアートボード毎に様々です。
制作の過程でアートボードを動かしてしまう事もありますよね。

こちらのプラグインはコンテンツではなくアートボード同士の間隔を揃えることが出来ます。

デザイン完了時にはプラグインを使って一括で揃えてしまいましょう。アートボードがバラバラのまま納品なんてあり得ませんから。

設定の種類には以下のものがあります。

Artboard Plusの使い方

Setting

画像:Adobe XD プラグイン Artboard Plusの設定
Artboard Plusの設定

アートボードを揃える際の幅と高さを設定。アートボードをグリッドで再配置する際に使うので先に設定しておきます。

画像:Adobe XD プラグイン Artboard Plus アートボードの間隔を揃える
Artboard Plusでアートボードの間隔を揃える

Rearrange Artboards into Grid

アートボードをグリッドで再配置(余白の数値設定可能)

Create Artboard Around Selection

選択したオブジェクトサイズに合わせたアートボードを作成

Sort Artborads by Name A-Z (Z-A)

アートボード名を昇順/降順に並び替え

Remove Decimal Numbers サイズの端数を取り去る

画像:Adobe XD プラグイン Remove Decimal Numbersのインストール
Remove Decimal Numbers

Web制作では小数点以下の端数が出ないように気を付けている筈ですが、後から思いがけず端数が出ている事に気付く事も。

このプラグインではオブジェクトに対する小数点以下の端数を取り除く事が出来ます。(小数点以下を切り捨て)

横幅、高さ、X座標、Y座標の数値が対象です。

※オブジェクトを回転させた時のX座標は上手く取り除けませんでした。(2022/0131時点)

Split Rows テキストボックスを分割する

画像:Adobe XD プラグイン Split Rowsのインストール
Split Rows

レイアウト時に入れ込むテキストはWordやPoworPointなど別データで用意されている事も多いですよね。
そんなテキストをコピペで流し込む際に役立つプラグインです。

デザインによっては改行位置を調整しますよね?手動でするのが大変な時は使って見てくださいね。

Split Rowsの使い方

画像:Adobe XD プラグイン splitrowsの2つの機能を解説
split rowsの2つの機能を解説

Split Simple

テキストボックス内のテキストを改行位置で独立した別々のテキストボックスに分割します。余白が均等に揃っていますが、本文の見た目も変わっています。

Split Preserve Appearance

こちらも改行位置で別々のテキストボックスに分割しますが、違いとしては、テキスト分割後も見た目が変わる事はありません。

Rename it レイヤー名を一括で変更

画像:Adobe XD プラグイン Rename itのインストール
Rename it

デザインしていくと自然とレイヤーが増えていきますが、面倒で名前を付けない事があるかもしれません。
レイヤー数が多いと後から困る訳ですが、このプラグインを使う事で一括で名前を付ける事が出来ます。

デザインしながら適宜レイヤー名を付ける癖を付けた方が早いですが。

Rename itの使い方

Rename Selected Layers

まず1つもしくは複数のアートボードやレイヤーを選択してから使います。

あらかじめレイヤー名や数字などのキーワードが用意されていて、選択するとアートボード名が生成されます。

生成された名前はポップアップ画面下に表示されます。

Find & Replace Selected Layers

こちらはすでにあるレイヤー名を別の名前に置換するのに使います。

Settings

プラグインとGoogle Analyticsを紐付けます。設定する必要はありません。自己責任でお願いします。

Copy CSS from panel

画像:Adobe XD プラグイン Copy CSS from panelのインストール
Copy CSS from panel

弊社ではwebデザインを作成する際にAdobe XD(以下XD)をメインに利用していますので、HTML・CSSコーディングを行う際にもXDを使うことになります。

XDで作成されたデザインカンプからコーディングに必要な情報を確認するにはプロパティインスペクタを利用することになりますが、手動、目視での作業だとどうしてもミスがおきてしまいます。
デザインスペックを作成して確認することもできるのですが、共有リンクを作成するのにもひと手間かかりますし、IE11のような古いブラウザでは使えないプロパティが含まれている場合は都度修正が必要です。

Copy CSS from panelの使い方

使い方はとても簡単です。調べたいオブジェクトをクリックして選択した後プラグインパネルを開くだけ。もしくは先にプラグインを選択しておいても大丈夫です。

画面左のパネルにCSSが表示されるので下にある【Copy CSS】ボタンをクリックすればクリップボードにコピー出来ます。

例えば、必要なプロパティだけ欲しい時は、カーソルでプロパティ名を直接ドラッグして選択すればOKです。もちろん右クリックやショートカットでもコピー出来ます。

画像:Adobe XD プラグイン Copy CSS from panelの使い方
Copy CSS from panelの使い方

グラデーションやボックスシャドウなどの様に記述が面倒なものはコピーして使うと楽ですね。同じくサイズやカラー指定などもコピーすると便利です。

さすがに何でも出来る訳では無いので、あくまで補助的に使うと良いですね。

まとめ – プラグインは必要?

XDの基本機能の進化は早く充実しています。ついこの間まで出来なかった事も気付いたら出来る様になっていることも多いです。

無理にプラグインを使う必要はありません。もし使うなら、単調な作業を効率化出来るものがおすすめです。

以下、公式のチュートリアルサイトを見れば、殆どのプラグインが不要だと分かります。

公式チュートリアル:Adobe XD Trail

画像:Adobe XDのおすすめチュートリアルを紹介

Adobe XDの使い方はXD チュートリアルでOK

画像:未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!

未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!