AdobeXDで正三角形（正多角形）を作る

#はじめに
アプリなどのプロトタイプを作るのに便利なAdobeXDですが、使える基本図形が四角形と円しかないため、正三角形を作ろうと思うと案外苦労したりします。
そこで、この記事では基本図形を組み合わせて正三角形を作る方法を解説します。

この記事を書いた発端としては、業務でよくUIのデザインを考えることがあり、その際に三角形を作る方法をググってもあまりパッとした情報がなかったためです。
もっといい方法もあると思います。知っていたら教えてください。
~~illustratorで描けばいいって？　XDと違って無料期間7日間しかないじゃないですか~~

#なんでもいいから三角形をつくる
いきなりですが、正三角形ではなく、ただの三角形を作る方法を先に示します。
これは簡単です。

まずは画面左の長方形ツールを選んで（キーボードの`R`でも選べます）、
<img width="322" alt="スクリーンショット 2018-10-25 0.55.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/268579/49e363d0-9b22-25e0-1cfb-45c3d3c4b7a2.png">

おもむろに四角形を描き、
<img width="619" alt="スクリーンショット 2018-10-25 0.56.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/268579/b0d4b1b9-9bbf-3992-5f90-84ede2a522c9.png">

選択範囲ツールに切り替え（キーボードの`V`でも切り替えられます）、四角形をダブルクリック。
そうするとパス（図形の頂点）を選択できる状態になります。
<img width="601" alt="スクリーンショット 2018-10-25 0.57.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/268579/a63c0992-b5c4-7797-57df-53253b7ba924.png">

どこでもいいので、パスを1つ選んだ状態でキーボードの`delete`を押すと、三角形の出来上がり！
<img width="589" alt="スクリーンショット 2018-10-25 0.57.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/268579/382b5760-2204-5f3d-b7e4-b7e70cd28a0a.png">

あとはパスをつかんでグリグリすれば好きな三角形がつくれますね。
<img width="575" alt="スクリーンショット 2018-10-25 0.58.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/268579/bfe6aa58-353b-bc9a-7565-cc459e623a76.png">


#正三角形をつくる
正三角形を作りたい場合、上記の方法だと正確な正三角形はつくれません（多分）
そこで、角度を変えた複数の正方形と交差ツールを使ってつくります。

まず正方形をつくります。
正方形にするには`shift`を押しながらです。
<img width="558" alt="スクリーンショット 2018-10-25 1.10.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/268579/c7ef4d99-c606-6b2d-0ed0-812c04607f18.png">

コピーして3つ同じものを用意します。
<img width="670" alt="スクリーンショット 2018-10-25 1.13.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/268579/a56744b9-565e-1291-43af-724596a8a721.png">

1つはそのままに、残り２つをそれぞれ`60°`と`120°`に回転させます。
<img width="672" alt="スクリーンショット 2018-10-25 1.13.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/268579/26303ab4-e2cd-13fa-6b94-2948c2a5d4c1.png">
<img width="672" alt="スクリーンショット 2018-10-25 1.13.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/268579/50ac42d3-9e51-4db7-338c-ed0d47b8b4ae.png">

その３つを下の写真のように重ねます。
ピクセル単位で頂点同士が一致するように拡大しなが十字キーを使って頑張ってください。
重ねられたら、赤ワクで示した交差ツールをクリックすれば、
<img width="614" alt="スクリーンショット 2018-10-25 1.15.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/268579/8634933b-defc-cd03-697a-4c336e562ee3.png">

正三角形の完成です。やったー！
<img width="549" alt="スクリーンショット 2018-10-25 1.20.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/268579/53d0c019-e486-da66-ad03-736a1d9b515c.png">

一度作ってしまえば、基本図形と同じように拡大縮小や回転ができます。
<img width="793" alt="スクリーンショット 2018-10-25 1.44.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/268579/c62860a4-f112-1d1b-ec99-03ba942fb90d.png">



#正多角形をつくる
同じ要領で好きな正多角形を作ることができます。

例えば正五角形であれば下の写真のように重ねて、合体ツールを使います。
ちなみに正五角形の場合は`360/5=72`なので`72°`ずつずらした正方形が５つ必要ですね。
<img width="599" alt="スクリーンショット 2018-10-25 1.25.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/268579/eca2ce0d-11f2-f300-05cc-1a936603345c.png">

六角形であればこう
<img width="681" alt="スクリーンショット 2018-10-25 1.35.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/268579/5bcf512d-f557-d7e8-dcd7-15827de36f47.png">


#弱点
360の約数の正多角形しかつくれません。
少数点以下の角度で指定すればで限りなく近いものは作れるとおもますが。

#正三角形はなぜ合体ツールでつくれないのか
面積の関係。
正五角形以上は正方形より面積が広いので、その図形内に基本の正方形が収まります。
そのため、外枠を当てはめていき、合体ツールで整形できます。
しかし、三角形は正方形よりも面積が狭いのでどう頑張っても外枠ではつくれないのです。
よって内枠で交差ツールを使うしかありません。

#おわりに
考えてみたら正三角形はまだしも、アプリのUIで正五角形使うことなんてほぼありませんね。