CSS 的 flexbox 是當今前端設計師常用的排版方式，但在製作原型時並不見得容易，可幸 Adobe XD 在 2020 年 6 月更新時便引入「Stacks」新功能，讓用戶輕易地排列群組內的元件。當然，是次 6 月更新亦有 Scroll Groups 等新功能，就在這裡一次過介紹。
Adobe XD 這 4 大特色功能還不懂？快學起來向 UI 設計師邁進吧！
Adobe XD：免費下載
Adobe CC：馬上訂閱
Stacks
網頁設計有不少重複排列的元素，如導覽列（navigation bar）內的連結、文章的標籤（tags）、側欄（sidebar）的推薦閱讀等等。這些在前端都可以用 flexbox 輕易完成，而在原型（prototype）界面設計中，Adobe XD 的用戶可使用全新的 Stacks 來讓排版變得更方便。
要使用 Stacks，第一步就是要將排版的物件加入群組（Group）。選擇了群組後，便可在右邊看到 Stacks 選項。
勾選 Stacks 時，Adobe XD 會自動選擇群組物件推疊的方向。這個時候，群組內的物件便可使用 Stacks 賦予的功能，例如是交換位置，現在只需拖曳群組內的物件便可，再不用逐一移位。
除此之外，作為模仿 flexbox 效果的功能，用戶亦可快捷地將每個物件平分空間，只需緊按 Shift 或者使用 Shift + S 便可。
Scroll Groups
除了 Stacks 之外，Adobe XD 亦加入了 Scroll Groups。顧名思義，就是讓用戶可設計出水平和垂直的捲動效果，以模擬貼文、列表、幻燈片、相片集等元素。如果用戶想模擬幻燈片（Carousel/ Slider）效果，Scroll Group 可輕易做到。
點選所需物件後，可在右邊選擇水平、垂直或全部方向的 Scroll Group。之後，群組兩端就能調節可觀看的大小。 進入預覽模式後，即可展示出捲動效果。
注意：在 Windows 環境中，要預覽水平捲動效果，只能使用 Trackpad，現階段未能使用滑鼠；垂直捲動效果就可使用滾輪預覽。
全新 Plugin 「Chart」
今次的 Chart 插件方便用戶將圖表插入到 XD 檔案中。用戶可使用 Google Sheets、CSV、JSON 和 REST API 提供數據，再選擇需要的圖表類型，包括折線圖、區域圖、棒形圖、散佈圖等。當然，用戶亦可選擇圖表樣式，如顏色、字型、線條等。
圖片來源：How to create data visualization framework with Chart plugin
此外，今次的更新亦迎來 Design Token、Slack 整合等，不妨留意。
Adobe XD：免費下載
Adobe CC：馬上訂閱
