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

3-10. 複数オブジェクトの合体・型抜きなどの処理(ブール演算)

  • UIデザイン
  • UXデザイン
  • Webデザイン

長方形・楕円形・多角形などのシェイプは、合体や型抜きといった合成処理を、再編集可能な状態で設定できます。この操作はAdobe XD公式サイトでは「ブール演算を使用したオブジェクトの組み合わせ」と呼ばれています。

公開日:2019/08/04最終更新日:2019/08/04

1.ブール演算の基本

複数のオブジェクトを選択した状態で、プロパティパネルのアイコンをクリックするか、次のショートカットキー操作によって合成できます。

  • 合体(Unite) ... Option + Command + U
  • 前面オブジェクトで型抜き(Subtract) ... Option + Command + S
  • 交差(Intersect) ... Option + Command + I
  • 中マド(Exclude) ... Option + Command + X

アピアランスは、再背面のオブジェクトのものが引き継がれます。

XDにおけるこの処理の特徴は、デフォルトで個別のオブジェクトの再編集が可能(非破壊)なことです。
合成したオブジェクトをダブルクリックしていくか、Commandを押しながらシェイプをクリックすると、合成前の個別のシェイプを選択し、位置やサイズを調整することが可能です。

この複合オブジェクトの中に、更に別のオブジェクトを追加することも容易です。

複合オブジェクトを選択し、「パスに変換(Command + 8)」を実行すると、一つのパスになり再編集ができなくなります。
SVG書き出しの際などで活用します。

2.合体

選択したすべてのオブジェクトを合体します。

3.前面オブジェクトで型抜き

選択した複数オブジェクトについて、最背面のオブジェクトの形状でその上に重なるオブジェクトを型抜きします。

4.交差

選択したすべてのオブジェクトが交差する箇所だけ残します。

5.中マド

選択したオブジェクトの中で、前後のオブジェクトが重なる部分をくり抜いて表示します。

例えば円を連続で重ねると、次のような表現になります。

理解度チェック





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

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

2. Adobe XDの基本操作

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

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

5. Adobe XDでプロトタイプを作成する

6. Adobe XDでデザイン・プロトタイプを共有する



このレッスンの著者