從2016年Adobe發佈了Experience Design CC(以下稱XD) Beta版，當時就有下載來試用看看，那時主流還是用Sketch，當時公司的設計師也是。隨著各種版本的演進，XD功能也越來越成熟，也開始有設計師會把它當作主要的工具來使用；今年5月，Adobe官方推出了Starter Plan，再也不用像其他Adobe Creative Cloud的軟體一樣，要付月租費(保護費？)才能使用，Adobe官方直接提供免費下載，原本需要台幣320元的Single App方案還在，差別只是在一些線上資源以及分享數量的限制而已（詳細可以在官網這邊查到）。
廢話不多說，接下來進入正題。
以下操作會以macOS系統為主，快捷鍵部分請Windows使用者在轉換一下。
首先開啟XD，因為沒有要做Mobile or Web的設計，就選個Custom Size吧！
XD內建的工具都很簡單，都可以在左邊的工具列上看到。
先畫一個Artboard，點選左邊工具列倒數第二個，或者按鍵盤快速鍵”A”，拉出你要做圖的範圍。
接著我們打開網格，可以用快速鍵（Command + ‘）或者點上方工具列（’View’ → ‘Show Square Grid’），然後把畫面縮到Artboard的左上角（用觸控板兩指縮放或者按住Option + 滑鼠滾輪滾動，右上角也有比例可以直接調整）。
接下來準備開始做圖，先說明一下會用到的工具。
首先一個網格的大小是8×8 pixal，8在近年算是主流的基本單位。
https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
再來，所有的正多邊形，我們都將用矩形來做繪製，他在左邊工具列的第二個。
最後，一直被冷落的右邊工具列上，第二列右邊有一排四個的方框組合，用數學的集合論來解釋的話依序就是聯集、相對差集、交集、對稱差，不懂集合論的話可以自己畫幾個方框來玩玩看。
好了，基本的介紹到這邊，接下來開始畫圖囉！
為了計算方便，以下的多邊形都會將最寬的地方設為32(四格)。
正三角形
首先我們先畫出兩個正方形，選擇矩形繪製工具，按住 Shift 再按著滑鼠左鍵拖曳，畫出一個32×32的正方形‘A’，接著如法炮製，在旁邊再畫一個正方形‘B’。
使用選取工具選取兩個正方形，取消填滿，再選取B，用右上角的旋轉工具旋轉30度，將B拖曳至A的下方，使得B的上半部與A的下半部重疊出一個直角三角形。
再度同時選取A&B，點選右上角的聯集工具，就產生了一個30º、60º、90º的直角三角形P。
將聯集出來的P固定長寬比，設定寬度為32，對齊好格線，然後複製P，在旁邊貼上做出直角三角形Q，複製的方法可以用’Command + C’然後’Command +V’，或者可以按著‘Option’再用滑鼠左鍵拖曳P。
接著將Q左右翻轉，選擇Q之後用滑鼠拖曳左右的其中一個錨點，水平往反方向拉，就可以得到翻轉後的直角三角形R，注意翻轉後寬度一樣要是32。
最後將P的中心點對齊R的右邊，上下對齊，同時選取P&R之後按下交集，正三角形就完成了！！
要驗算的話，可以簡單固定長寬比，把寬度設為20，高度如果是17.32就沒錯囉！（30º、60º、90º的三角形三邊比分別為1:√3:2，印象中是國中數學？）
正五邊形
接下來進入正五邊形，這個我試了很久才找出這個比較淺顯易懂的方法，會用到一些基本的三角函數，不熟的可能要去複習一下。
四邊形的部分直接跳過，因為不管正方形、長方形、平行四邊形、梯形、菱形，如果要特殊角度只要會三角形應該都不難，甚至用畫筆工具就可以畫出來了。
在開始畫正五邊形之前，先來規劃一下要怎麼使用集合工具來做圖，為了方便對齊及計算，我先把正五邊形拆成上下兩部分來做圖，分別完成後再來組合。
來畫上半部吧！三個角分別是108º、36º、36º，看過上面正三角形應該就會畫了。
組合完上半部可以注意一下高度，因為Adobe XD只有顯示到小數點後第二位，有時候似乎會不小心多進一位，像上面我最後按下對稱差前高度是11.62，按下後卻變成11.63，但我第一次做的時候又正常，不清楚它到底是怎麼計算的？（高度計算方式為16×tan36º=11.6246…，macOS可以用內建Spotlight或者用線上工具計算）
比較麻煩的是下半部，為了要方便使用集合工具及計算，必須貼著格線來做圖，也就是只能水平或者垂直切，最後我決定直切兩刀，變成左右兩個三角形，再加上中間的矩形，剩下就是用三角函數計算高度及寬度。
先做左邊三角形的部分，上半部等腰三角形的底角是36º，所以下半部左邊三角形和他相鄰的角就是108º-36º=72º，於是就可以知道他是一個72º、18º、90º的直角三角形，再次使用旋轉工具畫出來。
那這個三角形寬高應該分別要是多少呢？又得使用三角函數了，已經確定正五邊形的每一條對角線都是32，那正五邊形的高度就會是32×sin72º=30.4338…。
四捨五入取30.43，再扣掉上半部的11.62，可以得知下半部高度為18.81，鎖定三角形寬高比再設定高度，便可算出寬度為6.11，接著複製再水平翻轉，左右三角形都完成了。
只剩下半的矩形了，高度一樣是18.81，寬度的話稍微計算一下，32–6.11×2=19.78，用矩形工具畫完再調整就好了，記得不要鎖定寬高比，最後再跟左右三角形組合即完成下半部梯形，位置可以手動設定X、Y座標來微調。
最後再將上下半部組合，對齊後選擇對稱差工具，完成正五邊形。
正六邊形
學會畫正三角形，那就一定會畫正六邊形。
先借用前面畫的正三角形，複製出兩個之後，排列成三個頂點交集的圖樣。再來同時選取三個三角形，同時複製出三個之後，再一起上下翻轉。最後將翻轉後的三角形疊回原本的三角形上，中心點對齊，按下對稱差就完成了。
正八邊形
再來就畫八邊形跟十二邊形吧！其他的應該都很少會用到就不浪費時間了。
非常簡單的八邊形，先畫一個正方形，複製出一個之後轉45º，將兩個正方形中心對齊，取交集就完成了。
正十二邊形
和八邊形作法相似，先畫一個正方形，複製出兩個分別旋轉30º、60º，同樣將三個正方形中心對齊，取交集就完成了。
上面最後出來的結果是讓十二邊形的邊對齊上方，如果想要讓頂點對齊上方的話，可以先做出上面的圖，旋轉15º之後，取消交集再重新取交集就可以了，重新取交集的意義在於讓圖形的框架能夠對齊框線，方便再拿去做更進階的圖形，前面畫的圖形也適用。
總結
剛開始使用XD時，會覺得官方提供的工具很陽春，要做圖都得土法煉鋼，要多邊形乾脆直接從Keynote複製過來就好；但熟悉使用後，其實要畫出這些稍微進階的圖也不難，觀念對了就會畫得很快。
這篇都是使用矩形工具，未來有機會再來分享其他工具的使用心得，有任何疑問或建議歡迎在下面留言討論。