Adobe XDをもっと使いこなすヒント！ 第52回 多角形ツールをつかいこなす
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、多角形ツールを便利に使いこなす方法に関連する7つのツイートを紹介します。
Tip 1. 多角形ツールで三角形を描く
#AdobeXD #ProTip Use the polygon tool to draw a closed shape. By default, the tool gives you three points (which is, naturally, a triangle). @AdobeXD pic.twitter.com/jVcMwerioW
— Elaine Chao (@elainecchao) April 6, 2020
多角形ツールを選択し、マウスでアートボード上をドラックすると、ドラッグした領域内に三角形を描くことができます。Shiftキーを押しながらドラッグすると、正三角形を描くことができます。
Tip 2. 多角形の角の数を変える
#AdobeXD #ProTip Quickly add or remove points in your polygon by using the control in the property inspector. @AdobeXD pic.twitter.com/vWr0gksMM5
— Elaine Chao (@elainecchao) April 7, 2020
プロパティインスペクタの「コーナーカウント」に指定されている値は、多角形の角の数を表しています。この数字を変えると、三角形が四角形（や、もっと角数の多い多角形）に変わります。正三角形を描いてから角数を変えた場合は、各辺の長さが等しい多角形（例えば正方形）になります。
コーナーカウントの値を直接変更する代わりに、値が選択されている状態で上下の矢印キーを使うと、角数を順に増やしたり減らしたりすることができます。
Tip 3. 多角形を角丸にする
#AdobeXD #ProTip Change the corner radius of each segment either directly on the canvas or via the property inspector. All of the corners are linked together. @AdobeXD pic.twitter.com/AFWoa3laZ0
— Elaine Chao (@elainecchao) April 9, 2020
多角形の角のどれか一つの内側には、中央に青い点のある円が表示されます。これを内側にドラッグすることで、多角形の角を丸くすることができます。長方形ツールとは異なり、角ごとに角丸の半径を変えることはできません。
より正確に角丸の半径を指定したいときは、プロパティインスペクタの「角丸の半径」に値を数値で指定する方法もあります。
Tip 4. 星の形を描く
#AdobeXD #ProTip The star control is on the center of one of the segments. Drag it in and out to control the star’s angles, or get more fidelity by adjusting the value in the property inspector. @AdobeXD pic.twitter.com/ju1iRt3CAa
— Elaine Chao (@elainecchao) April 10, 2020
多角形の上にカーソルを移動すると、線のどれか一つの中央に小さな円が表示されます。それを中央に向かってドラッグすると、星形のシェイプになります。プロパティインスペクタの「スター比率」を指定しても、星形にすることができます。
Tip 5. 多角形をパスに変換する
#AdobeXD #ProTip Convert your object to a path (Cmd+8 Mac, Ctrl+8 Win), then switch to the pen tool. There will be exactly one point you can move to open the path, and you can press escape to stop editing and leave it open. @AdobeXD pic.twitter.com/KHc5QsWe02
— Elaine Chao (@elainecchao) April 13, 2020
ショートカットキー（Mac: Cmd+8, Win: Ctrl+8）を使うと、多角形をパスに変換できます。上の動画のようにペンツールに持ち替えると、ある一つの角を選択して、パスを開くことができます。一度ペンツールで編集した後は、任意のアンカーポイントを操作できるようになります。
Tip 6. 多角形を変形して使う
#AdobeXD #ProTip Polygons are great additions to your Boolean groups, which are editable even after the fact. Simply double click to enter the group, make your adjustments to the polygon, and press Escape to exit its edit context. @AdobeXD pic.twitter.com/3hKxaYXc0o
— Elaine Chao (@elainecchao) April 15, 2020
多角形は縦横比を自由に変更して使えます。縦横比を変えた後も、角丸などのすべてのプロパティを利用することが可能です。上の動画では、ブーリアングループの要素として使われている縦に延ばされた多角形を角丸にしています。
Tip 7. 多角形ツールでハートを描く
#AdobeXD #ProTip Quickly change your star rating to a heart rating by typing an ASCII heart in the polygon’s sides. The resulting shape will be a path and can be edited with the pen tool. @AdobeXD pic.twitter.com/coh2lZQWGl
— Elaine Chao (@elainecchao) April 16, 2020
コーナーカウントのフィールドに**<3**を入力すると、多角形がハートの形に変わります。上の動画のように、星でレーティングを表す要素を、ハートのレーティングに変えるのも簡単です。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！