Adobe XDをもっと使いこなすヒント! 第52回 多角形ツールをつかいこなす

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、多角形ツールを便利に使いこなす方法に関連する7つのツイートを紹介します。

Tip 1. 多角形ツールで三角形を描く

多角形ツールを選択し、マウスでアートボード上をドラックすると、ドラッグした領域内に三角形を描くことができます。Shiftキーを押しながらドラッグすると、正三角形を描くことができます。

Tip 2. 多角形の角の数を変える

プロパティインスペクタの「コーナーカウント」に指定されている値は、多角形の角の数を表しています。この数字を変えると、三角形が四角形(や、もっと角数の多い多角形)に変わります。正三角形を描いてから角数を変えた場合は、各辺の長さが等しい多角形(例えば正方形)になります。

コーナーカウントの値を直接変更する代わりに、値が選択されている状態で上下の矢印キーを使うと、角数を順に増やしたり減らしたりすることができます。

Tip 3. 多角形を角丸にする

多角形の角のどれか一つの内側には、中央に青い点のある円が表示されます。これを内側にドラッグすることで、多角形の角を丸くすることができます。長方形ツールとは異なり、角ごとに角丸の半径を変えることはできません。

より正確に角丸の半径を指定したいときは、プロパティインスペクタの「角丸の半径」に値を数値で指定する方法もあります。

Tip 4. 星の形を描く

多角形の上にカーソルを移動すると、線のどれか一つの中央に小さな円が表示されます。それを中央に向かってドラッグすると、星形のシェイプになります。プロパティインスペクタの「スター比率」を指定しても、星形にすることができます。

Tip 5. 多角形をパスに変換する

ショートカットキー(Mac: Cmd+8, Win: Ctrl+8)を使うと、多角形をパスに変換できます。上の動画のようにペンツールに持ち替えると、ある一つの角を選択して、パスを開くことができます。一度ペンツールで編集した後は、任意のアンカーポイントを操作できるようになります。

Tip 6. 多角形を変形して使う

多角形は縦横比を自由に変更して使えます。縦横比を変えた後も、角丸などのすべてのプロパティを利用することが可能です。上の動画では、ブーリアングループの要素として使われている縦に延ばされた多角形を角丸にしています。

Tip 7. 多角形ツールでハートを描く

コーナーカウントのフィールドに<3を入力すると、多角形がハートの形に変わります。上の動画のように、星でレーティングを表す要素を、ハートのレーティングに変えるのも簡単です。


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

次回をお楽しみに!

POSTED ON 2020.06.11