どんどん便利な機能が実装されていくAdobe XDですが、それでもまだ基本機能では出来ない事もあります。
逆に今ではプラグインを使わずとも出来る機能も沢山あります。
「何となく便利そうだけど要るのかな？」
「でも無駄なものは入れたくない」
という方に、作業効率を高めるおすすめのプラグインだけ紹介します。
実は知らないだけで、前述したように基本機能で出来る事も多いので参考にして下さいね。
最新機能とテクニックはAdobeの公式チュートリアルサイト「Adobe XD Trail」が分かり易くておすすめです。
Adobe XD プラグインのインストール方法
プラグインは公式サイトからダウンロードするのが安心です。プラグイン検索はXDアプリ内から簡単に行ける様になっています。
まずはAdobe XD プラグインの検索画面へ
上記の様に、プラグイン検索画面へ行く方法は2つあります。
- 画面上の【プラグイン】メニューから。
- 画面左下のアイコン →【プラグインを見つける】ボタンをクリック。
左下アイコンの方はインストールしたプラグインが見やすく一覧表示されるので、検索する時もこちらの方が分かり易いかもしれません。
Adobe XD プラグインの検索方法
Adobeのアプリで使えるプラグインがすべてここから検索出来ますが、このままでは検索しにくいのでXDだけに絞り込みをします。
① すべてのプラグイン
最初はXDだけでなくPhotoshopなど他のアプリのおすすめプラグインも一緒に表示されています。
このままでは探しにくいので【すべてのプラグイン】を一度クリック。
② アプリケーション
アプリケーション名が表示されますので、【XD】にチェックを入れます。
検索一覧からXDプラグインのインストール
プラグインのインストールには【入手】をクリックします。それ以外の所をクリックするとプラグインの詳細が表示されます。
ただし、英語表記かつ使い方の詳細が見つからない事も多いので大変かもしれません。
この記事では日本語での解説を用意しましたので参考にしてくださいね。
Adobe XD プラグインのアンインストール方法
インストール済みのプラグインの所にある三点リーダーをクリックすると【アンインストール】が出来ます。
Adobe XD プラグインは役割によって６つのカテゴリーがある
プロトタイプ制作時に必要となる機能を役割ごとにカテゴリー分けしてあります。自分に必要なプラグインを探す手がかりとして利用出来ます。
カテゴリー名を見ても分かりにくいので簡単に補足説明していきます。
各プラグインの特徴
プラグインごとの特徴を整理しました。プラグインによっては複数のカテゴリーに分類されるものもあります。
今ではXDの基本機能で出来る事も多いので、プラグインのインストール前に確認して下さいね。
①アセットデザイン
プロトタイプを作る際に必要なよく使うデザインパーツや画像などの素材が、プラグイン側であらかじめ用意されています。
プラグイン以外にXDの公式サイトでもUIキットが用意されていますので、そちらも参考にしてください。
②公開とハンドオフ
ハンドオフとはIT用語で言えば、他の端末に引き継ぐこと。XDで作ったデータをHTMLやCSSで書き出すなど、コーディング作業時に役立つ機能です。
デザイナーの方でコーディングが苦手な方は補助的に使うと便利です。
③ユーザービリティとテスト
色のコントラストや文字のサイズなど、ユーザビリティをチェックできるプラグインがまとめられています。
ただし説明文などは基本的に英語です。また、高機能だけど有料だったり、別途アカウント登録が必要になるプラグインも多いです。
④ツールと自動処理
レイヤーの名前を一括で変更したり、複数のアートボードの余白を取り除くなど時間短縮や効率化を図る機能がまとまっています。
⑤共同作業
チーム内外のメンバーと情報共有する際に役立つ機能をもつプラグインがまとめてあります。ドキュメントにコメントを付けたり出来ますが、今ではXDの基本機能で出来る事も多いです。
⑥すべてを参照
そのままですが、すべてのカテゴリーをまとめて表示させます。
おすすめXDプラグインを紹介
Quick Mockup モックアップの作成が簡単
よく使われるUI要素が既に用意されており、簡単に素早くモックアップを作れるプラグインです。
色々なスタイルやステート、サイズが用意されていて、Adobe XDで直接編集してカスタマイズも可能です。
参考サイト：Adobe Blog
unDraw フリーイラスト素材を挿入出来る
unDrawは海外のイラスト素材サイトですが、XDからイラストを探してドキュメントに挿入できるプラグインです。
何かしら画像が入っている方がデザインのイメージが掴みやすいので、有料素材サイトを使えない時は参考に。
Resize Artboard to Fit Content コンテンツの高さや幅に揃える
制作の段階ではアートボードの高さを伸ばす事はよくあります。でもデザイン完了の段階で思いがけず下に余白が残ってしまう事も。
このプラグインを使えば選択したアートボードの下辺にある余白を取り除き、オブジェクトの下辺に揃えてくれます。
複数のアートボードで一気に適用させる事も出来ます。
Resize Artboard to Fit Contentの使い方
設定の種類は「アートボードをコンテンツに合わせる」だけなのでシンプルで分かり易いです。まず最初に「設定」項目でチェックを入れたりサイズを変更しておきましょう。
アートボードをコンテンツに合わせる
前述した通り、最初に設定項目で指定した内容でアートボードがリサイズされます。
設定は「現在のアートボード幅を維持する」にチェックを入れておけば問題ないと思います。
設定
①サイズ維持
オブジェクトがアートボードからはみ出している場合、オブジェクトに合わせてアートボードが広がります。
広がる事にメリットは無いので、基本的には「現在のアートボード幅を維持する」にチェックを入れた方が良いです。
もしアートボードの横幅を変える時は「サイズ固定」でサイズ指定をします。
②オフセット
下辺のサイズを「０」にしておけば、アートボードを配置したオブジェクトの下辺にフィットさせてくれます。
Artboard Plus 複数のアートボードを揃える
デザインをしていくとアートボードの数が増えていきますし、特に高さはアートボード毎に様々です。
制作の過程でアートボードを動かしてしまう事もありますよね。
こちらのプラグインはコンテンツではなくアートボード同士の間隔を揃えることが出来ます。
デザイン完了時にはプラグインを使って一括で揃えてしまいましょう。アートボードがバラバラのまま納品なんてあり得ませんから。
設定の種類には以下のものがあります。
Artboard Plusの使い方
Setting
アートボードを揃える際の幅と高さを設定。アートボードをグリッドで再配置する際に使うので先に設定しておきます。
Rearrange Artboards into Grid
アートボードをグリッドで再配置（余白の数値設定可能）
Create Artboard Around Selection
選択したオブジェクトサイズに合わせたアートボードを作成
Sort Artborads by Name A-Z (Z-A)
アートボード名を昇順／降順に並び替え
Remove Decimal Numbers サイズの端数を取り去る
Web制作では小数点以下の端数が出ないように気を付けている筈ですが、後から思いがけず端数が出ている事に気付く事も。
このプラグインではオブジェクトに対する小数点以下の端数を取り除く事が出来ます。（小数点以下を切り捨て）
横幅、高さ、X座標、Y座標の数値が対象です。
※オブジェクトを回転させた時のX座標は上手く取り除けませんでした。（2022/0131時点）
Split Rows テキストボックスを分割する
レイアウト時に入れ込むテキストはWordやPoworPointなど別データで用意されている事も多いですよね。
そんなテキストをコピペで流し込む際に役立つプラグインです。
デザインによっては改行位置を調整しますよね？手動でするのが大変な時は使って見てくださいね。
Split Rowsの使い方
Split Simple
テキストボックス内のテキストを改行位置で独立した別々のテキストボックスに分割します。余白が均等に揃っていますが、本文の見た目も変わっています。
Split Preserve Appearance
こちらも改行位置で別々のテキストボックスに分割しますが、違いとしては、テキスト分割後も見た目が変わる事はありません。
Rename it レイヤー名を一括で変更
デザインしていくと自然とレイヤーが増えていきますが、面倒で名前を付けない事があるかもしれません。
レイヤー数が多いと後から困る訳ですが、このプラグインを使う事で一括で名前を付ける事が出来ます。
デザインしながら適宜レイヤー名を付ける癖を付けた方が早いですが。
Rename itの使い方
Rename Selected Layers
まず１つもしくは複数のアートボードやレイヤーを選択してから使います。
あらかじめレイヤー名や数字などのキーワードが用意されていて、選択するとアートボード名が生成されます。
生成された名前はポップアップ画面下に表示されます。
Find ＆ Replace Selected Layers
こちらはすでにあるレイヤー名を別の名前に置換するのに使います。
Settings
プラグインとGoogle Analyticsを紐付けます。設定する必要はありません。自己責任でお願いします。
Copy CSS from panel
弊社ではwebデザインを作成する際にAdobe XD（以下XD）をメインに利用していますので、HTML・CSSコーディングを行う際にもXDを使うことになります。
XDで作成されたデザインカンプからコーディングに必要な情報を確認するにはプロパティインスペクタを利用することになりますが、手動、目視での作業だとどうしてもミスがおきてしまいます。
デザインスペックを作成して確認することもできるのですが、共有リンクを作成するのにもひと手間かかりますし、IE11のような古いブラウザでは使えないプロパティが含まれている場合は都度修正が必要です。
Copy CSS from panelの使い方
使い方はとても簡単です。調べたいオブジェクトをクリックして選択した後プラグインパネルを開くだけ。もしくは先にプラグインを選択しておいても大丈夫です。
画面左のパネルにCSSが表示されるので下にある【Copy CSS】ボタンをクリックすればクリップボードにコピー出来ます。
例えば、必要なプロパティだけ欲しい時は、カーソルでプロパティ名を直接ドラッグして選択すればOKです。もちろん右クリックやショートカットでもコピー出来ます。
グラデーションやボックスシャドウなどの様に記述が面倒なものはコピーして使うと楽ですね。同じくサイズやカラー指定などもコピーすると便利です。
さすがに何でも出来る訳では無いので、あくまで補助的に使うと良いですね。
まとめ – プラグインは必要？
XDの基本機能の進化は早く充実しています。ついこの間まで出来なかった事も気付いたら出来る様になっていることも多いです。
無理にプラグインを使う必要はありません。もし使うなら、単調な作業を効率化出来るものがおすすめです。
以下、公式のチュートリアルサイトを見れば、殆どのプラグインが不要だと分かります。
公式チュートリアル：Adobe XD Trail
