UI/UXデザインツール『Adobe XD』入門

3-6. オブジェクトの基本操作と使い方

シェイプ、テキスト、画像といったオブジェクトに共通する基本の操作について説明します。

  • UIデザイン
  • UXデザイン
  • プロトタイピング

公開日:2019/06/26最終更新日:2019/06/27

スポンサーリンク

1.オブジェクトの重ね順を入れ替える

ワークスペースに追加したオブジェクトは、後から新しく追加や複製したものが上に重なるように配置されます。

この重ね順は、レイヤーパネルでレイヤーをドラッグするか、オブジェクトを選択してショートカットキーを入力して入れ替えることができます。

並べ替えのショートカットはこちらです。

  • Comand + Shift + [ ... 最前面へ
  • Comand + [ ... 前面へ
  • Comand + ] ... 背面へ
  • Comand + Shift + ] ... 最背面へ

2.オブジェクトの表示・非表示を切り替える

配置したオブジェクトを一時的に「非表示」にすることができます。
※アートボードは非表示にできません。

レイヤーパネルで非表示アイコンをクリックするか、ショートカット 「Command + ,」 で設定できます。

オブジェクトを非表示にすると、「全選択」をしない限り、ワークスペース上で選択することはできません。
選択・編集するには、レイヤーパネルから非表示を解除するか、全選択して「Command + ,」を2回押し、全てのオブジェクトの非表示設定を解除する必要があります。

3.オブジェクトの操作をロックする

配置したオブジェクトを「ロック」すると、表示されているし選択もできるが、編集できない状態になります。
※アートボードはロックできません。

レイヤーパネルでロックアイコンをクリックするか、ショートカット 「Command + /」 で設定できます。
グループをロックすると、中に含まれるオブジェクトも編集できなくなります。

4.オブジェクト間の距離を計測する

オブジェクトを選択した状態で Optionキー を推しながら、隣接または親となるアートボード・オブジェクトにカーソルを乗せると、その両者の距離をピンク色のガイドで表示します。

5.オブジェクトを回転・反転する

配置したオブジェクトを上下・左右反転や回転させることができます。
※アートボードには設定できません。

6.レイヤー名を変更する

オブジェクト・グループのレイヤー名は、レイヤーパネル上から変更できます。

7.オブジェクトをグループ化する

複数のオブジェクトを選択した状態で Command + G を押すと、それらを一つのグループにすることができます。
グループを選択した状態でもう一度グループ化の設定をすると解除されます。

グループは、ひとつのオブジェクトのような扱いで選択・操作できます。これにより、グループ内の複数の要素をまとめて移動したり、サイズ変更・反転・回転などの処理ができます。整列・分散でも有効です。

オブジェクトとグループをさらにグループ化する、いわゆるネスト化も可能です。

グループ内の個別のオブジェクトを選択するには、グループを一度ダブルクリックし、グループ内編集モードに切り替ます。また、全選択(Command + A)するとグループ内の要素だけ選択することもできます。
ただし、グループ外のオブジェクトをクリックすると解除されます。

理解度チェック

UI/UXデザインツール『Adobe XD』入門

1. Adobe XDの概要とインストール

2. Adobe XDの基本操作

3. Adobe XDで画面をデザインする

4. より効率よくデザインするための機能

スポンサーリンク

このレッスンの著者