隨著業(yè)務(wù)發(fā)展、產(chǎn)品迭代和團(tuán)隊(duì)規(guī)模不斷壯大，如何高效管理不斷積累的設(shè)計(jì)稿件、提升協(xié)作效率成為團(tuán)隊(duì)管理規(guī)范化不可缺失的一環(huán)。本文將分享筆者制定團(tuán)隊(duì) Figma 文件管理規(guī)范的經(jīng)驗(yàn)，每個(gè)團(tuán)隊(duì)的實(shí)際情況不同，希望能為大家提供一些解決問題的思路。

更多文件管理方法：

現(xiàn)狀分析

在新規(guī)制定前，我們?cè)O(shè)計(jì)師創(chuàng)建文件的邏輯是：按模塊和角色的不同分工分別創(chuàng)建文件，并在一個(gè)文件中持續(xù)輸出設(shè)計(jì)稿直到達(dá)到該文件存儲(chǔ)上限，因此會(huì)出現(xiàn)諸如“首頁-交互 1/2/3...”、“搜索-視覺 1/2/3..."這種文件。

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

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

重構(gòu)文件管理層級(jí)

我們團(tuán)隊(duì)訂閱的是 Figma Professional Plan，相較于 Organization Plan 少了一些文件管理的功能。我根據(jù) Figma 目前提供的結(jié)構(gòu)重新定義了如下五個(gè)文件管理層級(jí)。第一級(jí)（Team）就是團(tuán)隊(duì)相關(guān)設(shè)計(jì)成員的總和，一般按業(yè)務(wù)線組織設(shè)計(jì)團(tuán)隊(duì)。 下面我將從第二級(jí)（Project）開始，逐級(jí)講解每一層的組織方式。

二級(jí)：Project/項(xiàng)目

項(xiàng)目層級(jí)主要用于劃分組織分工。我們從以下三個(gè)維度創(chuàng)建項(xiàng)目：

1. 模塊項(xiàng)目：將產(chǎn)品按功能模塊/頁面劃分為多個(gè)相對(duì)獨(dú)立的項(xiàng)目
2. 通用資產(chǎn)項(xiàng)目：通用設(shè)計(jì)資產(chǎn)項(xiàng)目用來存儲(chǔ)和管理全流程通用視覺規(guī)范（如 12.0 設(shè)計(jì)系統(tǒng)、標(biāo)簽規(guī)范）、重點(diǎn)模塊運(yùn)營規(guī)范（如首頁運(yùn)營規(guī)范，以備團(tuán)隊(duì)協(xié)作審核需要）、通用素材庫（如 icon、3D 素材）等。其他垂類場景資產(chǎn)可以放在各模塊項(xiàng)目內(nèi)維護(hù)。
3. 歸檔項(xiàng)目：不再更新且不涉及內(nèi)容復(fù)用的文件可以判定為過期版本，全部移入“ 歸檔”項(xiàng)目中；

Team 視角下，使用“add to favorite”功能將常用項(xiàng)目固定在左導(dǎo)航，創(chuàng)建快捷方式。

三級(jí)：Design Files/設(shè)計(jì)文件

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

為了避免每個(gè) Figma 文件體量過大加載變慢，我們默認(rèn)按季度創(chuàng)建日常需求文件。時(shí)間跨度按需求吞吐量和文件大小的增速動(dòng)態(tài)調(diào)整：

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

我們通過“pin to top of project”功能將近期頻繁使用且持續(xù)時(shí)間較長的文件置頂，方便團(tuán)隊(duì)成員快速訪問。請(qǐng)注意“pin to top”和“add to favorate”功能的區(qū)別，置頂全員可見，收藏僅個(gè)人可見。

四級(jí)：Pages/頁面

頁面層級(jí)指打開 Figma 文件后，左側(cè)導(dǎo)航欄的組織方式。

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

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

③對(duì)于正在進(jìn)行中的需求，可以在頁面前方添加 “ ??” 標(biāo)記，定稿后刪除標(biāo)記。

五級(jí)：Canvas/畫布

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

A/日常需求文件

1. 交互稿、視覺稿分兩個(gè)畫板，方便橫向?qū)Ρ群筒榭矗?/li>
2. 將所有過程稿都保留在文件中，方便歷史追溯（團(tuán)隊(duì)內(nèi)盡量避免使用個(gè)人 Draft 草稿文件出圖）；方案定稿后，將所有草稿整理并框選在遠(yuǎn)離定稿的其他區(qū)域，添加灰色蒙層以示廢棄。

B/新版合集文件

新版合集文檔收集產(chǎn)品核心頁面最新版本視覺稿，同時(shí)詳細(xì)列舉頁面中各主要區(qū)塊的變體。團(tuán)隊(duì)內(nèi)要求設(shè)計(jì)定稿后，若涉及新功能、新樣式應(yīng)該立刻更新到整合新版合集。合集有以下作用：

1. 方便管理者對(duì)頁面最新進(jìn)展有整體的認(rèn)知；
2. 方便設(shè)計(jì)同學(xué)快速調(diào)用內(nèi)容；
3. 方便不同模塊同學(xué)信息拉齊；

每個(gè)模塊的新版合集采用總-分的結(jié)構(gòu)，主要包含兩個(gè)部分：

1. 「總」完整頁面結(jié)構(gòu)導(dǎo)航：核心頁面范例，包含頁面的主要狀態(tài)和最完整的區(qū)塊結(jié)構(gòu)組合。
2. 「分」各結(jié)構(gòu)區(qū)塊詳情：包含每個(gè)區(qū)塊全量變體樣式，以及基礎(chǔ)展示邏輯說明。（當(dāng)變體之間存在展示優(yōu)先級(jí)時(shí)，添加邏輯備注。如“展示優(yōu)先級(jí)：A>B>C>D”）

技巧 1： 在頁面結(jié)構(gòu)導(dǎo)航頁添加詳情頁 Frame 跳轉(zhuǎn)鏈接，可以快速從導(dǎo)航頁找到目標(biāo)區(qū)塊并跳轉(zhuǎn)到詳情。具體操作方法為：

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

技巧 2: 使用 Figma“評(píng)論”功能在更新區(qū)域添加描述備注。

如何快速查找稿件

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

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

小結(jié)

以上是筆者對(duì)團(tuán)隊(duì) Figma 文件管理的經(jīng)驗(yàn)總結(jié)，規(guī)范只是解決問題的手段，每個(gè)團(tuán)隊(duì)需要根據(jù)實(shí)際情況對(duì)癥下藥，定制符合團(tuán)隊(duì)習(xí)慣的管理方式。

歡迎關(guān)注「JellyDesign」的小程序：