如何組織你的 Figma 頁面？（上） — 我的 Figma 模板分享
為什麼你需要注意 Figma 頁面結構？
一個好的 Figma 檔案結構可以讓你的工作更輕鬆、有效率，也有助於團隊之間的合作。
對於設計師本身，結構完備的 Figma 檔案可以作為專案藍圖，讓你在開始一個新設計的時候省去動腦的時間。在回顧或是重塑過去的設計時也可以有跡可循，讓自己輕鬆迅速地重新掌握專案的細節。
而一個邏輯合理的檔案結構對於設計團隊內部，或是跨團隊的溝通幫助更是巨大。有了固定的檔案結構，新進的設計師可以更快地融入團隊的工作模式。工程師、產品經理或是其他的相關方也都可以依循一貫的檔案結構，節省尋找、了解設計內容的時間，最小化協作時的摩擦。
本文的內容
這個主題的內容比較多，因此我把內容拆成了兩篇文章：
- 上篇 — 我的 Figma 模板（本文）：我的 Figma 檔案結構以及每個組成部分的說明，一共包含五個區塊。
- 下篇 — 設計與推廣模板的秘訣：規劃自己的 Figma 檔案結構時需要注意或是考量到的地方，一共有五個重點。
在閱讀時，你也可以參照以下的模板連結來協助理解，或是直接複製使用。
https://www.figma.com/community/file/1381918365788175306/figma-file-tamplate
須知
Figma 畢竟是工作用的軟體，所以結構必須適配於你組織的文化、產品以及工作流程。不同的團隊可能會有非常不同的模板，適合我的結構也不一定適合你。所以在進入我的模板前，我想必須先說明一下自己的團隊背景。
我所在的公司主營電子商務，團隊以 Inhouse 的模式工作。我們經手的都是自己公司的頁面與產品，也累積了很多設計嘗試、測試數據。UX 團隊的工作除了自己發起的優化專案之外，也時常需要支援其他部門所提出的功能、介面需求。
接下來就讓我們進入正題，開始介紹我的 Figma 檔案結構吧。
0.模板大綱
我的 Figma 檔案主要由以下的五個頁面，依照順序所組成：
- About 關於
- Handoff 設計交付
- Design 設計
- Research 研究
- Archive 儲藏室
1. About 關於
「關於」頁面是整個 Figma 檔案的第一個頁面，所有人在第一次打開這份檔案時都會先看到它，而它的目標是好好地介紹這個設計專案。
在這個頁面中，我會包含一個簡約的封面。在其中包含專案名稱、設計師的名字、設計日期（精確到月就好）以及其他像是頁面、模塊、功能之類的標籤。這些關鍵字可以讓我快速了解專案主題，日後也方便用搜尋找到這份檔案。
除了封面之外，我也會在這個頁面中加入以下三個畫板，用來完善整個專案的相關資訊：
- 專案背景：介紹專案背景，包括動機、假設、目標以及相關資訊。
- 預期效果：希望專案執行後達到的具體成果，例如提升加入購物車、提升用戶滿意度⋯⋯等等。
- 實際成果：這是在專案結束之後才會完善的一個畫板，包含最後的成效、以及其他觀察，用於總結成果。
這三張畫板除了可以作為將來參照的依據，也可以直接用來作為專案分享的投影片（剛好是 16:9 的畫幅比例，也刻意設計地像是投影片的形式），當我們需要與其他的 Stakeholders 或是分享的時候特別方便唷。
2. Handoff 設計交付
在關於的頁面之後，就會緊跟著我的設計交付頁面。Handoff 是很大的話題，值得一篇獨立的文章，所以在本文中就不多做介紹了，但這邊想要提兩個小訣竅：
第一是可以用 Emoji 來標示設計交付的完成狀態（我會習慣用 🚧 表示施工中、 ✅表示完成），這樣一來可以避免工程師誤開修改中的頁面。
第二是在頁面名稱上加上交付日期與備註。這麼做的好處是如果一個項目經過不同時期的改動、變化，有多個設計交付檔案的時候，也可以簡單地分別出來。
3. Design 設計
第三個頁面是「設計」。我有時候也會把它叫做 Main 或是 Working，因為它就是用來進行設計工作的主要畫板。
只要是設計過程中的產物幾乎都會在這裡，包含筆記、用戶流程、Wirefrrame 到 Hi-fi 可能都會同時存在。刪刪改改、不停嘗試之下，這個頁面在項目的前期總會顯得雜亂無章，只有在需要討論或是鄰近交付的時候，我才會著手整理。
在專案過程中，每次經歷一些重要的時間點（像是跟主管過設計或是與需求方的討論會），我都會把這個頁面複製一次，然後把它命名成該次討論的版本（例如 Discussion 24.05.02）這樣一來，會議中留下的筆記以及當次會議時使用的設計材料就會被留在複製的頁面之中，如果之後需要參照（或是舉證）就會十分方便。
有時候當設計臻至完成，我會直接把「設計」頁面轉成交付頁面。但如果後續還需要修改的話，我仍然會複製出一個工作用的頁面，以「不在交付頁面上放沒有確認過的內容」為原則，在新的頁面上做修改，這樣可以確保交付頁面上的所有內容都是可用可信的，避免發生溝通失誤。
這些習慣雖小，但可以明確地增加設計師的可靠度唷。
4. Research 研究
研究頁面包含了專案的研究材料，例如旅程地圖、數據圖表、Persona以及競品分析等等。
這些研究可能存在不同的平台上，我會用截圖的方式把重點節錄到 Figma 中，這樣在發想設計的過程中可以更順手，在討論設計的時你也可以在 Figma 中信手捻來圖表與分析，讓自己的設計更有說服力。
5. Archive 儲藏室
最後一個頁面是儲藏室，它的功能就是存放設計想法的寶庫。
有些設計點子不適合眼下的專案，但可以被複用在其他專案裡。有時候我們也會遇到一個想法在初期不被接受，卻又在後期被重新被認可的情況。
這時候如果丟失了這些設計版本，就會需要重新來過徒增困擾。為了以防萬一，我會習慣性地把值得保留下來的設計版本複製暫存到儲藏室頁面中。
這個頁面在設計提案時也扮演著不可或缺的角色。它可以用來展示設計過程與設計嘗試，具體的呈現了設計師在專案上投注的心血與時間，大大增加了提案的說服力。
在提案時如果討論對象提到某種設計可能性，也可以直接把當初的設計呈現給對方看。例：
- 需求方:「這邊嘗試看看用紅色吧？」
- 設計師:「這邊試過了唷（切換到 Archive），效果如您所見，不是很合適呢。」
總結
以上就是我常用的 Figma 頁面模板了，希望對你的設計有所幫助。
最後想要再次強調，一個這個頁面模板不應該被直接使用，而是應該依據你所在的組織團隊進行調整。至於調整時需要注意的地方，會在下一篇文章中詳細敘述唷。
謝謝你閱讀到這裡，也希望內容可以幫助到你。如果覺得內容有用的話請幫我拍手、訂閱與分享。也別忘了在 Youtube 還有 Instagram 上追蹤我，我會定期以簡單的方式分享 UX 設計與產品管理的相關工具與技巧。
