AdobeXD初心者のための、XDで覚えておいた方がいい8個の便利機能

どうも、UIデザインをしている今井です。
以前まではWebデザインやUIデザインの主要アプリと言えばPhotoshopやIllustratorでしたが、今ではかなりの人がAdobeXDをデザインする際の主要アプリにされていると思います。
僕もXDを使い始めてだいぶ経ちましたが、WebやUIデザインに特化しているだけあって、それらをデザインする際は本当に使いやすいですね。IllustratorやPhotoshopと比べてまだまだ洗練されていない分、細かいところで物足りない感じはありますが、軽くて早いし、使いやすくて学習コストもかからず、かなり気に入っています。
初めはかなり少ない機能の状態でリリースされ、まさしくベータ版という感じでしたが、毎月きちんと更新されて今では便利な機能が豊富になりました。
今回はそんなXDの便利な機能のなかでも、特に覚えておくといい機能を7つ紹介します。XD初心者は特に必見です！ぜひ最後までご覧ください！

もくじ

• 画像配置が簡単！XDの画像配置方法
• 画像の修正や差し替えが楽になる、CCライブラリを使った画像管理
• デザインの統一感がアップし、修正が楽になるコンポーネント
• ボタン作成が楽になるパディング機能
• 新着情報一覧のデザインが楽になるリピートグリッド
• ポップアップデザインを作る時に便利なオーバーレイ機能
• デザイン上でホバーを実装できるステート機能
• プレビューでのスクロール時に、グローバルナビなどを固定表示する方法

画像配置が簡単！XDの画像配置方法

XDでは2種類の画像配置方法があります。

1. 先に図形を作成し流し込む方法
2. 画像を先に配置し図形でマスクする方法

後でマスクする方法は、PDFを書き出した際やデザイン共有をブラウザで確認した際に、表示がおかしくなるエラーが起こる可能性があるので、1の図形に流し込む方がおすすめです。（※すでにエラーが解消されていたらすみません）

やり方

1. 長方形ツールで四角いオブジェクトを描画
2. 描画したオブジェクトに、デスクトップなどから画像をドラッグ＆ドロップして配置

画像の修正や差し替えが楽になるCCライブラリを使った画像管理

CCライブラリは、画像やベクターデータなどをクラウドに保存しておける機能です。これを使用することで画像やベクターデータの差し替えや修正がかなり楽になります。
差し替える時はライブラリに保存されたデータをドラッグ＆ドロップするだけで差し替えることができますし、修正の際はライブラリのデータを開き、修正して保存すればそのまま反映されるので、修正したデータを再度配置しなおす作業は必要ありません。
かなり使い勝手がよく効率化につながるので、ぜひ活用しましょう。

やり方

1. Photoshopで使用する画像を開く
2. CCライブラリウインドウを開き、新規ライブラリを作成する
3. 作成したライブラリに画像をグラフィックとして登録
4. XDでCCライブラリウインドウを開き、先程登録した画像を配置して使用する

デザインの統一感がアップし、修正が楽になるコンポーネント

Webサイトのデザインで、全体で繰り返して使用されるボタンやグローバルナビ、ヘッダーやフッターを作る時に役立つのが「コンポーネント」です。
コンポーネントとは、ボタンなどの要素を1つのセットとして登録したもので、初めに登録したものがマスターとなり、マスターを修正した場合は全体に反映され、マスター以外に修正を加えた場合は反映されません。
ただし、マスター以外で修正を加えた場合、修正した部分はマスターの修正が反映されなくなるので、それを理解した上で扱うようにしましょう。

やり方

1. コンポーネントにしたい部分を選択
2. 「オブジェクト」の「コンポーネントにする」を選択（ショートカット：コマンド＋K）

ボタン作成が楽になるパディング機能

Webデザインでのパディングとは内側の余白のことで、XDでもグループとコンポーネントでパディングを設定することができます。
パディングを設定することで、テキストの長さに合わせてサイズが変わるボタンが作れるなど、他にも応用すればいろんなところで使える機能ですので、ぜひ覚えておきましょう。

やり方

1. パディングを設定したい部分をグループ化（またはコンポーネント化）する
2. 右ウィンドウにある「レイアウト」の「パディング」をONにする
3. ONにすると下に数値が表示されるので、その数値で余白は調整できます

新着情報一覧のデザインが楽になるリピートグリッド

リピートグリッドとは名前の通り、指定した内容を縦横にリピートさせることができる機能です。
Webサイトなら新着情報一覧や製品一覧など、リスト形式になっているデザインを作る際にかなり便利です。
そして、ルールに則った原稿や画像を用意しておけば、ドラッグ＆ドロップするだけで各ブロックにデータを流し込むこともできます。

やり方

1. リピートしたい内容を選択し、右ウィンドウの上部にある「リピートグリッド」をクリック
2. 選択していた部分が緑色の枠に変わるので、下と右にあるボタンのような部分を動かすと、その方向に内容がリピートされます
3. リピートされた要素の間にカーソルを合わせると、余白部分がピンク色で表示され、その状態でドラッグすれま間隔を拡大縮小できます
4. リピートされた要素同士はリンクしていますので、どこか一つに変更を加えると全てに反映されます

ポップアップデザインを作る時に便利なオーバーレイ機能

オーバーレイ機能とは、ポップアップ画面やモーダルウィンドウをデザインする際に使用する機能で、別のアートボードで作ったデザインを重ねて表示させることができます。
背景となるデータは作らず、重ねて表示したい部分だけ作ればいいので、手間が減って作業時間を短縮できます。

やり方

1. 背景となるデザインとオーバーレイさせるデザインを、別々のアートボードで作る
2. プロトタイプモードで、背景となるデザインからオーバーレイ表示したいアートボードにワイヤーを引っ張ってつなぎ、「アクション」の「種類」を「オーバーレイ」にする
   するとアートボードを結ぶワイヤーが点線になります

デザイン上でホバーを実装できるステート機能

ステートとは、ホバーやタップによる色や形の変化を表現できる機能です。
ホバーをデザイン上で確認したい時や、タップやクリックによるボタンの変化（ON・OFFボタンなど）を表現する際に使用します。

やり方

1. ホバーで変化させたい部分をコンポーネント化する
2. 右ウィンドウの「コンポーネント」「初期設定のステート」の右の「＋」をクリックし「ホバーステート」を選択
3. 「ホバーステート」を選択し、ホバー時の色や形を設定する

プレビューでのスクロール時に、グローバルナビなどを固定表示する方法

WebサイトやUIのデザインでクライアント様にデザイン確認をしてもらう時に、「この部分は上部に固定表示で」ということ伝えるようなことが必ずあります。XDではそれをプレビューで表現することができます。
文字や言葉で伝えるより実際に画面上で見せれた方が断然伝わりやすくなりますし、コーディング担当へ伝える際の伝え漏れも減りますので、ぜひ活用しましょう。

やり方

1. プレビューで固定表示したいオブジェクトを選択
2. 右ウィンドウの「スクロール時に位置を固定」にチェックを入れる

まとめ

AdobeXDは日々更新され、常に進化を続けているので、便利な機能が今後もどんどん開発されると思います。便利な新機能を知らずに過ごすのは勿体ないので、なるべくリリース情報をチェックして、日々の業務に活用していきたいと思います。
ぜひみなさんも今回紹介した機能を活用して、クオリティアップと作業時間短縮に役立ててください！