Adobe XDをもっと使いこなすヒント! 第51回 ブーリアングループで複雑なシェイプをつくる

by akihiro kamijo

Posted on 05-28-2020

連載

Adobe XDをもっと使いこなすヒント!

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、ブーリアングループを使ってシェイプをつくる方法に関連する4つのツイートを紹介します。

Tip 1. 2つのシェイプのブーリアングループ

#AdobeXD #ProTip The Boolean groups feature is available right in the property inspector, and calculates the shape between two or more different objects (addition, subtraction, intersection, exclusion). The resulting shape will have the styles of the bottom-most object. @AdobeXD pic.twitter.com/xH3hM4Tg1J

— Elaine Chao (@elainecchao) April 27, 2020

ブーリアングループを使うと、複数のオブジェクトを組み合わせて複雑な形状のシェイプを作成できます。作成するには、組み合わせたい2つ以上のオブジェクトを選択してから、プロパティインスペクターの4種類のアイコン(合体、型抜き、交差、中マド)のどれかを選択します。上の動画では、円の一部を三角形を使って切り抜いています。

Tip 2. ブーリアングループを複製して編集

#AdobeXD #ProTip Boolean groups are non-destructive, so you can quickly change the type of Boolean group after the fact. In this case, I’ve duplicated the object and edited it after the fact. @AdobeXD pic.twitter.com/UHEhiiig3D

— Elaine Chao (@elainecchao) April 28, 2020

ブーリアングループは、元のオブジェクトをそのまま保持しています。そのため、後から自由にやり直しができます。上の動画では、ブーリアングループをコピーしてから(複製も再編集が可能です)、片方の合成ルールを「型抜き」から「交差」に変更しています。

Tip 3. ブーリアングループにオブジェクトを組み合わせる

#AdobeXD #ProTip You can create Boolean groups with an existing Boolean group – just select both objects and create a group. You can then enter the group by double clicking to make adjustments. @AdobeXD pic.twitter.com/QbooYkaFeh

— Elaine Chao (@elainecchao) April 29, 2020

ブーリアングループにオブジェクトを組み合わせて、新たなブーリアングループを作成できます。通常のオブジェクトの場合と同様ブーリアングループにしたいオブジェクトを選択し、プロパティインスペクターからルールを選択します。

上の動画のように、通常のグループと同じく、ブーリアングループをダブルクリックすると、中のオブジェクトの編集を行えます。

Tip 4. ブーリアングループに新しいシェイプを追加

#AdobeXD #ProTip You can add additional shapes to a Boolean group by entering the group context (double click), then either drawing something or pasting it in. After you exit edit context (Esc), the changes will be applied. @AdobeXD pic.twitter.com/zfN9BbXWDz

— Elaine Chao (@elainecchao) April 30, 2020

作成済みのブーリアングループに後からオブジェクトを追加することができます。ブーリアングループを編集モードに(ダブルクリック)してからオブジェクトを描画するかペーストします。作業が終わったらEscキーを押下して編集モードを終了します。

いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

Topics: クリエイティブ, UI/UX & Web, UI / Web デザイン

Products: