現在網路上可以找到許多免費 Icon ，對於大部分的網頁開發已經很足夠了，但真的需要自己設計 Icon 時該怎麼辦呢？這篇來分享一下一個工程師要如何用 Adobe XD (免費)建立一個屬於自己的 Icon 。
這篇是從美學概念很差的工程師(小弟我)出發的，所做的只是簡易的 favicon 用在部落格上，因此使用到的都是基本簡單的技巧而已，設計師大大們可以忽略這篇。
做一個簡單的圖標使用免費的 Adobe XD 就很夠用了，首先到官網下載。
照著步驟就可以完成安裝了。
我們只是要建立圖示，使用 Custom Size ，調整為 512*512 的大小，並按下圖示建立專案。
建立完成後會看到一個白色的區塊，在 XD 中叫做 artboard ，將名稱改為 Icon ，並將右下角的格線開出來，這樣一來作業環境就完成了～
工具欄上有多種工具可供使用，由上而下依序是：
元素的部分下一節會提到，先來介紹功能性的工具：Select, Artboard 及 Zoom。
Select 工具(快捷鍵為 v)，可以選取元素並做修改。
選取後，右方會出現細節的調整工具，這時就可以針對元素作細節的調整。
也可以直接拖拉元素上各邊的點做大小的調整。
再往點稍遠的地方移動鼠標，可以轉動元素。
按住
Shift做拉移的動作可以保持等比例。
對元素連點兩下，可以開啟自訂模式，以圓形為例：
就可以自由地改變圖形，中間是決定邊的位置，左右兩個點是調整弧度。
Rectangle, Ellispe, Polygon, Line, Pen 都可以使用此功能任意的改變圖形樣貌。
此工具為增加一個畫布，當你有不只一個 Icon 想要在同個專案下設計的話可以按此工具增加一塊畫布。
可以自己拖拉一個自訂大小的畫布(左上)，也可以在空白處點一下產生與原本相同的畫布(右下)。
局部放大，通常都用滾輪達成此功能。
元素的種類有 Rectangle, Ellipse, Polygon, Line, Pen, Text，接下來會介紹各別的特殊功能，一般常用的功能都滿直覺的就不浪費篇幅了。
Rectangle 畫出四邊形元素，按著 Shift 拉的話可以畫出正方形。
拉動內部四個虛點可以改變角的弧度：
按住 option 拖拉虛點可以只拉單角：
如果想要直接指定各角度的話可以在設定欄的下方個別調整：
Ellipse 畫出圓形，按著 Shift 拉的話可以畫出正圓形。
畫出多邊形，一開始拉出來的會是三角形，按著 Shift 拉的話可以畫出正三角形。
拉動內部的虛點可以改變角的弧度：
拉動邊上的實點，可以產生對應角數量的星形。
設定欄上可以調整角的數量也可以做角度及星形內縮率的調整：
Line 畫出直線，按著 Shift 拉的話可以畫出水平, 垂直及 45 度角的直線。
Pen 可以畫出隨意的線條，點一下為線的起始，直到按下 esc 結束或連回起始點形成圖形。
在畫線時，單指拉移決定線段，三指拉移會拉出弧線：
Line 及 Pen 在自訂模式下都可以改變任一地方的弧度，因此可以先畫直線，在做細部的弧度調整。
Text 可以插入字串，對字串點兩下可以在設定欄中設定字體及配置。
元素中有些共通的設定，例如顏色或是陰影的調整，會在這裡介紹一下。
顏色的調整可以直接使用調色盤，或是在畫面上看到適合的顏色可以直接使用右方的選擇器取用顏色。
可以在設定欄上設定陰影：
接著我們可以放些常用顏色, 字型, 元件到 ASSETS 中，使我們在使用的時候可以不用在重新調整這些設定。
使用的方法如下:
已經加過或是不適配的(例如字型只會在 Text 選中時才能加入)，加號會是暗掉的狀態。
另外使用同個 asset 產生的元件，只要一個做修改，其他的都會跟著修改。
XD 他已經提供了基本的圖形：四邊形，圓形及三角形，足夠應付大部分的場境，但還是有一些圖形會需要自己做，下面介紹幾個較常用的圖形。
將正方形的其中一角弧度拉到最大：
將一個圓形及一個四邊形成別，使用交集功能，就可以產生半圓形：
上面講要如何使用各類的工具，現在花費了千辛萬苦終於完成了，剩下最後的輸出過程，只要按下 Export 就大功告成了！
可以選擇目標的格式：
最近在設計部落格的 Icon ，花了一些時間研究 XD 的用法，目前只有設計 Icon 的時候使用到 XD ，但 XD 的主要功能其實是設計 UX 的，如果之後有機會用到的話，再來分享這部分。
Smashing Magazine: How To Create Icons In Adobe XD
本文同步發表於 LimitlessPing
Peter Chen
iThome鐵人賽
看影片追技術