那些年的排列組合，現在不用解開了——「Stack」功能更新｜ Adobe Xd (2020年6月)
Stack 是這個月 Adobe Xd 的眾望所歸更新重點，可以重新堆疊局部物件，能有效提高排版效率與幫助後期管理，形式上有點像前端工程師所熟悉的 Flexbox。本篇文章為 hahow 《不小心就學會！用 UI 設計方法製作網站》 線上課程預習用內容，若剛好對 UI 設計與網頁開發有興趣的同學們，可以到課程頁面瞭解更多。
嗨囉，我是 Riven 🙂
這個六月 Adobe Xd 迎來了第 30 版本的更新，除了連 LOGO 也一起換掉了（我說那個框呢🤔）這次也有個很重大的新功能值得關注，跟著我一起來看看有什麼新消息吧～
什麼是 Stack
在今年一月的時候，Adobe Xd 就曾經釋出 Content-Aware-Layout 的更新，可以讓像是隨著文字變多而按鈕跟著變長、橫向拖曳物件讓群組一起變化等等，都是很舒適的設計體驗。
而這個月的 Stack 呢，則是又更進化了！我們現在可以在 Adobe Xd 中直接移動物件並重新排列堆疊，不用像以前那樣還要解開群組：
在 Adobe Xd 中怎麼使用 Stack
而這在 Adobe Xd 中的設定也非常簡單，只要將全部的物件選取，並群組(Group)起來，之後右側的控制列就會出現 Stack；勾選之後就可以直接拖曳群組中的物件，即完成重新堆疊排列的設定。
從圖中我們可以看到當選取的物件移動時，群組內的其他物件也會跟著一起移動，相當符合設計習慣（不用先搬過來再移過去的）。
在 Stack 的設定中有 垂直 與 水平 兩種模式可以選擇，而且如果群組中還有子群組，也能做兩層的設定，以符合更複雜的物件型態。
Stack 於 UI 設計稿上的運用
這個月的 Stack 功能更新可以說是眾望所歸，因為這項功能在 Adobe Xd 官方的 feature 論壇已經有來自全球的設計師提出要求，而 Adobe 也總算釋出了這項新功能。
而為什麼大家這麼想要 Stack 的設置呢？就是因為它可以將我們的 UI 設計稿整理地服服貼貼的，在設計檔案管理上可以幫上很大的忙，可以增進工作效率。
我們從下面這個範例中可以看到 Stack 在 UI 設計稿上的運用：
點擊這裏 下載 Adobe Xd 官方提供的 Stack 範例檔案。而我們也能在這個長得像 Evernote 加 Notion 的設計稿中，設置各類局部物件為 Stack，就能夠更清楚地看到這項功能對於 UI 設計師的幫助：
Stacks 提供靈活排版
而如果你是寫過前端的工程師，應該會對這樣的設計模式很眼熟，沒錯，Stack 跟 CSS 的 Flexbox 很相似，這是一個近年來很常見的排版方式，能夠輕鬆快速地排好預先設置好的區塊，並支援主流的瀏覽器。
而這也是 Stack 為什麼被大家敲碗敲爆的主要原因，能夠自適應各尺寸的排版，不論是 UI 設計師還是前端工程師，都能夠更好地運用設計稿。
我一直很喜歡且支持 Adobe Xd 的原因，就是因為它會持續追蹤與了解使用者（設計師們）的需求，並給予快速地迭代更新，很符合其 UI/UX 設計整合軟體的定位及意象，每次改版帶來的小更新，都讓 Xd 成為更強大的設計軟體。
延伸學習資源
Adobe Creative Cloud
Adobe 目前是月費訂閱制，每個月都可以使用所有的 Adobe 軟體，以及雲端儲存空間，如果你是學生有更多的優惠。
《不小心就學會！用 UI 設計方法製作網站》
這是我在 hahow 上的新募資課程，內容關於 Adobe Xd 軟體教學，與實務上的 UI 設計方法，以及 Webflow 網頁開發框架等等。
Adobe Xd Taiwan 台灣設計師交流社群
裡面有很多設計師、工程師與 PM 等等職業工作者，以及剛開始入門的新同學，一起碰撞出學習與討論的火花。
