你今天 Xdddddddd 了嗎－2：基本功能介紹
前一篇文章主要是跟大家介紹 Adobe Xd 在設計流程中的作用，以及操作介面的各個按鈕作用，而在這篇文當中，會分享一些在 Xd 中非常好用的功能。不過這邊還是要重申，雖然 Xd 在繪製物件與排版的功能不及 Sketch，但在製作 Prototype 的便利度上，個人覺得還算實用。
目前自己主要都是用 Xd 來設計可以互動的 Wireframe，在會議或與客戶溝通可以直接用網頁來模擬流程，避免很多溝通成本。再來就是用 Mock-up 快速兜出 Prototype，非常方便呈現與傳遞檔案，因為考量到客戶的作業系統，與其將畫面全部輸出成圖一張一張講解，在網站上直接觀看還是方便許多。
接下來會為各位分享常見的功能運用方式。
本系列預計分成三個部分，如果對其他篇的內容感興趣，可以點選下列連結跳轉：1. 簡介
2. 快捷鍵與功能介紹（本文）
3. 開始你的第一個原型設計吧！：製作、輸出與小眉角
Artboard
Artboard 就像是畫布，你的設計都會在上方完成，在剛開始進入 Xd 時都會詢問你要開啟什麼檔案，直接在入口就能選擇手機、平板或網頁，如果沒有你要的裝置尺寸，也可以用自訂的方式來開啟。
假設你選擇 iPhone，中間就會出現空白的手機畫面，但要注意一個 Artboard 只代表一個頁面，如果要設計其他的畫面，可以從右方拖曳另一塊 Artboard，或者直接選擇工具列上的 Artboard 在畫面空白處點擊，同樣會產生新的頁面。
在點選 Artboard 時，右方還有其他的選項可以使用，像 Vertical 就是讓你的設計可以超出原先的手機畫面，一般的 iPhone 6/7 只有 375*667 points，但如果你想呈現的 prototype 是可以滾動來看頁面的話，就必須勾選這個功能，不過通常都會是預設，除非你有特殊需求再進行更改。下方還有一個 Grid 選項，點選之後就會出現網格，方便對齊排版或者描繪 icon 用。
另外還有一點，就是當你繪製完畫面之後，每個頁面上的所有元件可以在左方統一管理，要大量刪除或調整順序，隱藏或是鎖定，都能夠方便管理。
Assets
通常在我們開始一項專案設計之前，都會先設定好 Guildline，也就是整個頁面所用到的顏色、字體大小或是各種 icon，但如果沒有一個地方存放這些設定，每次用到就必須重新開別的檔案會放費很多時間。
Xd 中的 Assets 就是在幫助大家解決這個問題，當我們設定好基本的視覺規範後，可以加到左方的資產庫中，之後要使用顏色、字體或是 icon 時只要從 Assets 快速選取即可。
下圖是我參考 Airbnb 的 iOS APP 做了一個餐廳預約 APP 的頁面，左方就是 Assets 的樣貌，包含各個級距的字體以及會用到的顏色、按鈕等。
顏色
Xd 的顏色工具，除了單色選取更換，也可以使用漸層色做設計，只要在顏色工具上方按下 “Gradient” 就可以自己調配漸層的樣式。
形狀
目前能夠直接在 Xd 中直接完成的圖形，只有矩形、圓形與線條，像三角形這類的圖案，就得用鋼筆工具自己畫。
有的時候你需要裁切照片到某個大小，但又不想開啟其他的修圖程式，可以用 Mask 功能，只要將形狀套在圖片上方，按下 Masking with shape 就可以裁切成想要的形狀了。
如果覺得慢慢裁切太麻煩，Xd 有個更方便的功能，只要先設定你想要的形狀，再從外部直接將圖片拖曳至形狀中，就能將圖片放到裡面了。
Repeat Grid
個人覺得算是 Xd 中非常好用的一個功能，只要選取一個物件後點選 “Repeat Grid”，就能快速複製相同的物件，而且調整一個樣式後會全部一起變換。
但要注意這個功能產出來的物件是一個群組，所以想要個別移動記得要解除群組（或者再按一次按鈕，此時上方會寫 ungroup gird）才能繼續執行。
Boolean
Xd 中可以進行 Boolean operator，也就是兩個圖形的交集、聯集等合併功能，這個部分可以斟酌使用，因為大部分的圖形示意都會依靠 icon 完成，比較少用到這個功能，除非是自己繪製 icon 的場合。
Align and Distribute
用在排版上相當方便的功能，相信很多朋友在設計時都會遇到怎麼對都對不準的情況，或是一直調間距調到眼睛很痠，可以藉由這個排列功能減輕對齊的負擔，上下左右或垂直水平置中都可以完成，還能夠設定固定間距。
檔案輸入
在檔案輸入這點，Xd 算適應性很強，相關軟體或檔案都可以直接無痛輸入，不用擔心相不相容之類的問題，加上軟體本身所佔的資源不多，操作上真的非常順手。
從電腦上傳圖片：
- 直接拖曳圖片放入視窗中。
- 從 File -> Import 中輸入。
從網路上複製圖片：
- 直接拖曳圖片放入視窗中。
- 右鍵 -> 複製圖片，在視窗中貼上。
從 Phototshop 中輸入圖片：
- 在選框工具選取圖片，直接複製或者按 Edit -> Copy merged，再貼到 Xd 視窗中。
從 Illustrator 中輸入向量圖形：
- 右鍵 -> 複製，在視窗中貼上
從 Sketch 中輸入資源：
- 選擇你要使用的圖層，複製並在 Xd 視窗中貼上
檔案輸出
Xd 支援三種類型的檔案輸出：png、svg、pdf。
比較特別的是，png 可以根據你的設計做不同版本的檔案輸出，像 iOS 工程師在設計時會需要三種尺寸的元件，Android 則需要五種尺寸的元件，在輸出時可以依據需求做輸出調整。
以上是 Adobe Xd 的部分基本功能介紹，主要跟大家分享一開始摸軟體會不太熟悉的功能，至於常用的快捷鍵或者是解說可以參考 Xd Guru 寫的 Definitive Guide：
下一篇會分享如何製作 Prototype，以及輸出、錄製原型時需要注意的地方，再來就是怎麼開始你的第一個原型設計，如果有任何問題都歡迎大家一起交流 :)
如果想要更有系統性地認識這套軟體，也推薦各位朋友參考一些線上課程：
如果喜歡這篇文章的話，可以點選左方的 “Clap”，也歡迎分享給所有親朋好友，只要註明出處即可：）
