隨著業務發展、產品迭代和團隊規模不斷壯大，如何高效管理不斷積累的設計稿件、提升協作效率成為團隊管理規范化不可缺失的一環。本文將分享筆者制定團隊 Figma 文件管理規范的經驗，每個團隊的實際情況不同，希望能為大家提供一些解決問題的思路。

更多文件管理方法：

現狀分析

在新規制定前，我們設計師創建文件的邏輯是：按模塊和角色的不同分工分別創建文件，并在一個文件中持續輸出設計稿直到達到該文件存儲上限，因此會出現諸如“首頁-交互 1/2/3...”、“搜索-視覺 1/2/3..."這種文件。

以上方式存在的問題也很明顯：

1. 「查找難」歷史文件數量非常多，找要找“某個時段”的“某個需求”的文件很困難；
2. 「加載慢」單文件體量巨大，嚴重影響網頁運行效率；
3. 「內容散」每個文件里面都是日常局部需求散點，難以對頁面最新的完整方案有整體認知；
4. 「協作難」一方面不同設計角色（交互/視覺）之間各做各的，另一方面，負責不同模塊的同學之間信息也不互通。（P.S.很多功能涉及全流程協同改造，即便是模塊設計師也應該具備全局視角）

重構文件管理層級

我們團隊訂閱的是 Figma Professional Plan，相較于 Organization Plan 少了一些文件管理的功能。我根據 Figma 目前提供的結構重新定義了如下五個文件管理層級。第一級（Team）就是團隊相關設計成員的總和，一般按業務線組織設計團隊。 下面我將從第二級（Project）開始，逐級講解每一層的組織方式。

二級：Project/項目

項目層級主要用于劃分組織分工。我們從以下三個維度創建項目：

1. 模塊項目：將產品按功能模塊/頁面劃分為多個相對獨立的項目
2. 通用資產項目：通用設計資產項目用來存儲和管理全流程通用視覺規范（如 12.0 設計系統、標簽規范）、重點模塊運營規范（如首頁運營規范，以備團隊協作審核需要）、通用素材庫（如 icon、3D 素材）等。其他垂類場景資產可以放在各模塊項目內維護。
3. 歸檔項目：不再更新且不涉及內容復用的文件可以判定為過期版本，全部移入“ 歸檔”項目中；

Team 視角下，使用“add to favorite”功能將常用項目固定在左導航，創建快捷方式。

三級：Design Files/設計文件

為了方便查找和管理，我將設計文件劃分為以下 5 種類型，通過不同文件封面顏色可快速區分。

為了避免每個 Figma 文件體量過大加載變慢，我們默認按季度創建日常需求文件。時間跨度按需求吞吐量和文件大小的增速動態調整：

1. 大量需求：按月度：2023-5 月
2. 中量需求：按季度：2023-Q1
3. 少量需求：按年度：2023-全年

我們通過“pin to top of project”功能將近期頻繁使用且持續時間較長的文件置頂，方便團隊成員快速訪問。請注意“pin to top”和“add to favorate”功能的區別，置頂全員可見，收藏僅個人可見。

四級：Pages/頁面

頁面層級指打開 Figma 文件后，左側導航欄的組織方式。

①日常需求整體按「月份」分組，按「開始時間+需求名稱」的命名方式自下而上（最新在最上方）創建

②如果某些功能區塊需求相對集中，可以采用「功能區」分組，命名方式同上。

③對于正在進行中的需求，可以在頁面前方添加 “ ??” 標記，定稿后刪除標記。

五級：Canvas/畫布

畫布是設計師內容輸出的區域，這里主要分享兩種文件類型的內容組織方式：「日常需求」和「新版合集」。

A/日常需求文件

1. 交互稿、視覺稿分兩個畫板，方便橫向對比和查看；
2. 將所有過程稿都保留在文件中，方便歷史追溯（團隊內盡量避免使用個人 Draft 草稿文件出圖）；方案定稿后，將所有草稿整理并框選在遠離定稿的其他區域，添加灰色蒙層以示廢棄。

B/新版合集文件

新版合集文檔收集產品核心頁面最新版本視覺稿，同時詳細列舉頁面中各主要區塊的變體。團隊內要求設計定稿后，若涉及新功能、新樣式應該立刻更新到整合新版合集。合集有以下作用：

1. 方便管理者對頁面最新進展有整體的認知；
2. 方便設計同學快速調用內容；
3. 方便不同模塊同學信息拉齊；

每個模塊的新版合集采用總-分的結構，主要包含兩個部分：

1. 「總」完整頁面結構導航：核心頁面范例，包含頁面的主要狀態和最完整的區塊結構組合。
2. 「分」各結構區塊詳情：包含每個區塊全量變體樣式，以及基礎展示邏輯說明。（當變體之間存在展示優先級時，添加邏輯備注。如“展示優先級：A>B>C>D”）

技巧 1： 在頁面結構導航頁添加詳情頁 Frame 跳轉鏈接，可以快速從導航頁找到目標區塊并跳轉到詳情。具體操作方法為：

1. 在 frame 中右鍵 → copy as → copy link
2. 選中文字圖層，點擊頂部 “??” icon添加文字鏈接，將上一步復制好的 frame 地址貼過來。

技巧 2: 使用 Figma“評論”功能在更新區域添加描述備注。

如何快速查找稿件

想要看頁面最新的完整方案可以查看新版合集，但合集并非面面俱到，日常小需求迭代稿件如何快速查找呢？

產品需求排期表記錄了我們日常產出的所有需求，與其在一堆 figma 日常需求文件中找，不如將需求表作為我們的需求索引，視覺定稿后，使用“copy link to page”功能，將稿件地址復制并添加在需求備注信息中。通過這種方式，我們可以在需求表中快速搜索并定位某個稿件地址。

小結

以上是筆者對團隊 Figma 文件管理的經驗總結，規范只是解決問題的手段，每個團隊需要根據實際情況對癥下藥，定制符合團隊習慣的管理方式。

歡迎關注「JellyDesign」的小程序：