Adobe XDのオブジェクト作成の仕方

左側のツールバーに展示してある描画ツール使用して、オブジェクトの作成ができます。この描画ツールによって、単純なアイコンやグラフィックであれば素早く作成可能。
さらに、選択ツールを用いると特定の線やシェイプ・オブジェクトの選択によって編集もできます。

Adobe XDの画像の配置の仕方

画像の配置には練習用のサンプルファイル（kotohajime_wire.xd）があるので、ダウンロードしてみましょう。見本のファイルを参考にして、既存のワイヤーフレームに画像の配置が可能です。

オブジェクトに配置した場合でも、実際の作業もそれほど難しくありません。作成したオブジェクトに配置したい画像をドラッグアンドドロップした後、その上にオブジェクトを配置します。「オブジェクト」→「シェイプでマスク」を選択すると、自動的に画像がオブジェクトの形で切り抜かれて完了です。

Adobe XDのリピートグリッド

リピートグリッドは、Adobe XDの最も大きな特徴です。
リピートグリッドを使用するとメニューや記事のリストなどの規則性のあるレイアウトに複数の画像やテキストを一気に配置可能。

実際の操作は、画像とテキストのグループをまとめて選択し、リピートグリッドボタンをクリック。その後、リピートグリッドのハンドルを下方向または右方向にドラッグします。さらに、複数の画像ファイルをまとめて選択し、画像エリアのいずれか1つにドラッグ&ドロップ。テキストの挿入も可能になっています。

Adobe XDの書き出し

Adobe XDでは、デザインアセットとアートボードへの書き出しも可能ですMacでは、ファイル／書き出しを選択。Windowsでは、ハンバーガーメニューにある「書き出し」をクリックします。
加えて、レイヤーパネルでアートボードを選択し、右クリックで書き出しを選びます。

マークされたアセットの書き出しができるバッジや選択されたアセットの書き出しができる選択済み・デザイン内のすべてのアートボードの書き出しも可能です。
また、複数のオブジェクトを一つのアセットとして書き出す場合は、オブジェクトのグループ化を行います。

WebやAndroidといった目的のプラットフォームとファイル形式を選択してディレクトリ指定した後に出力ファイルを保存します。
メッセージが表示されたら解像度を指定し書き出しをクリックしたら完了です。

Adobe XDのアップデート

Adobe XDの最大の特徴は頻繁なアップデートです。
かなりの頻度でアップデートを行っており、2019年10月にも新機能が追加されています。このアップデートでも多くの機能が追加されていますが、XD23.0以降に対応した機能として、そのうちの3つを紹介します。

  • ブレンド効果
  • 位置とサイズの微調整
  • 重なり合うレイヤーの順次選択
  • ひとつずつ解説していきます。

ブレンド効果

XD23.0以降では、非破壊的なブレンド効果の適用によって画像やグラフィックアセットの設定が可能になりました。
このブレンド効果によって、オブジェクトのデザインカラーの変更ができるようになり、さらに活気のあるデザインに仕上げられます。

位置とサイズの微調整

キーボードショートカットと矢印キーの組み合わせにより、グリッドサイズ単位でUI要素の位置とサイズを変更できるようになりました。

Shift+矢印キーで選択範囲を10px単位で移動可能。
サイズの変更はcommand+矢印キーで1px単位の変更ができます。
また、選択範囲を10px単位でサイズ変更する時の操作は以下の通り。

Mac Windows
command+Shift+矢印キー Alt+Shift+矢印キー

正方形グリッドが有効な場合は、グリッドへスナップするように選択範囲を移動した後、以下の操作で移動や変更が可能です。

  • Shift+矢印キー→グリッドサイズ単位で移動
  • 上記の表の操作→グリッドサイズ単位で選択範囲のサイズを変更
    それぞれ、左上隅に要素が固定されます。

重なり合うレイヤーの順次選択

重なり合うレイヤーの順次選択は、commandキーもしくはCtrlキーを押しながらクリックでキーボードショートカットのビヘイビアーが拡張。
デザインカンバスとデザインスペック上で、Z軸の上から順にオブジェクトを選択できます。
また複数のレイヤーが上下に積み重ねられている場合、同様の操作を選択したレイヤーの下にある次のオブジェクトを選択。一番下のレイヤーに到達してから、同じショートカットキーの使用で最上位レイヤーに戻せます。

このように、簡単なショートカットキーで、様々な機能が直感的に使用できるようになっています。