大廠出品！如何基于Figma 做好團隊設計文件的整理？

一、為什么要做設計文件整理

靈犀是一個多產品線的部門，目前高頻迭代的就包括外貿通、靈犀辦公、云筆記等多個產品，外貿通作為一個龐大的產品線又細分了多條業務線，截至目前靈犀設計文件已多達 300+。日積月累的設計資產是設計的一筆財富，但同時也帶了一系列的問題，比如不同產品線、業務線的設計資源整理方式不統一，跨業務線團隊協作起來相互的文件難以查找，同一團隊需求迭代時歷史文件查找效率低，以及上下游同學查找設計資源時沒有頭緒和線索等問題，為了促進設計師之間的協作、提升歷史文件查找的效率，助力上下游的同學對設計資源的高效使用，規范設計文件意義重大、價值可觀。

麥肯錫全球研究所的研究顯示，人們工作時間的 19% 都耗費在了日常查找資料上。也就是說，每周五天工作日中，有一天基本上都在查找資料，如果可以將這些浪費的時間利用起來的話，工作效率能提升 30%-35%。正是這些不起眼的細節才是每天浪費你大量時間的地方，而提高設計工作效率最簡單、最容易出效果的恰恰是大部分人都經常會忽略的日常資料素材整理。

整理設計文件可以：

1. 方便迭代時歷史文件查閱；
2. 方便團隊其他同學查閱、使用；
3. 將設計過程中產生的新的控件，納入控件庫，并及時更新設計規范；

而今天的主角“Figma”對設計的提效是顯而易見的，對文件的整理顯然也提出高效的解決方案，而我們如何更好的利用這款軟件，發揮他的價值呢？

更多Figma技巧：

二、怎么做設計文件整理

1. 價值觀（基本原則）：

①清晰

因為我們的設計文件要服務設計、研發、產品、測試等多角色，文件信息的清晰展示，可以降低不同業務線的同學的理解成本、溝通成本。例如如果可以通過顏色、命名形成條件反射，就可以減少大腦的思考，以達到清晰的目的。

②快捷

設計文件主要用于需求迭代的設計、研發、歷史文件復用等，文件夾的層級簡單，可以減少相關同學使用成本。例如 figma 由文件夾、文件、頁面三個層級的形式。

③生長

設計文件的整理應當以服務業務為根本，規則要跟隨業務需要不斷變化，不寬泛、不束縛、可拓展。

2. 策略：

①統一文件夾層視覺語言

對于多產品線的團隊而言，文件夾可以很好的將設計文件按照產品劃分，方便相關產品線的設計同學、上下游產品的研發、產品、測試同學進行文件查找、查看。這里要注意文件夾的命名一定要清晰、簡短，最好不要超過 7 個字符，面對不同團隊的文件要分到不同文件夾，比如桌面端、移動端。我們在用的文件夾的命名規則是：產品線-所在端，例如：云筆記-移動端。同時也要用好 figma 的文件夾收藏功能，將自己參與或是常用的文件夾添加在側邊欄。

注：1.將文件夾收藏到側邊欄 2.紅色區域為文件夾列表

②統一文件層視覺語言

我們將文件類型劃分為設計稿、開發稿、交互稿、設計規范、升級改版五類，根據不同類別，制定不同文件的規范。

我們的文件命名及封面規則：

對文件的命名規則：產品 (端) /業務-稿別-編碼，例如：靈犀辦公移動端-開發稿 3，外貿建站-UI 稿 4，其中端分桌面端、移動端，可以選填，業務線龐大的產品名稱也可由二級分支如外貿的主站、業務系統、建站等代替。

對封面的設計規則：主標題行包含：產品/業務 (兩者取其一）、稿別、編碼。副標題行包含：端 (選填）、版本號。不同的背景顏色對應不同文件類型。

由于 Figma 文件存儲于云端，頁面的數量過大會出現經常 loading 的現象，根據我們自身的經驗，會每季度更換一次新的文件，相互文件通過序號繼承。

需要注意的是不同類型的文件樣式及命名區分度，靈犀辦公產品就曾出現研發對照交互稿開發的案例，不僅對研發帶來重復性的工作量，也對后期的走查帶了不小的挑戰。可以通過對封面的設計及文件的命名規范，以達到條件反射，減少大腦的思考，展示清晰的目的。

按照規則以上 5 種文件類型在一個業務線下的樣式如下：

和文件夾類似，也要用好 figma 的文件收藏功能，將自己參與或是常用的文件添加在側邊欄。

③統一頁面視覺語言

我們將文件類型劃分為設計稿、開發稿、交互稿、設計規范、升級改版五類，根據不同類別，制定不同文件的規范

設計稿

設計稿按功能模塊劃分，注意功能模塊與飛機稿、探索稿區分，頁面內通過一級標簽、二級標簽直觀的標識功能點，并保持設計稿最新。為了確保 “設計稿” 中每個模塊都是最新的設計稿（即與線上的版本一致），各業務線需要定期整理（建議在每版本封包后）。

注：

1. 文件列表欄按功能模塊劃分頁面
2. 其他設計頁面，如：飛機稿、探索稿等
3. 一級標簽樣式，常用于功能點
4. 二級標簽樣式，常用于功能分支

開發稿

開發稿按版本劃分，一個版本的需求量大，有固定模塊劃分的產品線可在此基礎上增加業務劃分。例如：外貿需求量大，且研發資源較為固定跟隨業務，故而將每版本需求按模塊拆分，更便于研發定位設計稿。頁面內通過一級標簽、二級標簽直觀的標識功能點，一級功能點后需@相應的設計師，方便研發、測試同學對接，同時也方便后期走查時定位自己的設計稿。

交互稿

考慮到交互稿同開發稿同期服務于研發，故頁面結構需相互保持一致，便于研發對照。

同時在交互稿內必須包含信息：需求標題、更新時間、產品、交互、UI 分工、一級標簽、二級標簽，根據需求選填項目背景、項目目標、設計目標/內容、PRD 鏈接、UI 稿鏈接、重點關注，樣式如下。

視覺規范

根據業務的發展，不同產品線的組件一般有所不同，規范源文件建議包含：更新日志、組件索引、基礎樣式、變體源文件

升級改版

升級改版的頁面包含：需求分析、競品分析、靈感版、飛機稿、不同的風格稿、核心頁面等

最后

隨著項目越做越多，資料越積越大，特別是多人協作的時候，就會發現井然有序的文件整理多么的重要，而文件的整理遠不止 figma 設計文件這么簡單，工作文檔的整理、學習資源的整理、靈感素材的整理等等甚至可以發展成為一個學科，這里也向大家推薦《佐藤可士和的超整理術》，希望能拋磚引玉，讓大家的文件可以井然有序，不再讓這些不起眼的細節在每天浪費我們大量時間，以把精力釋放到更有價值的地方，做更有意義的事情。最后的最后就是隨著 figma 的更新迭代，部分功能的入口已經調整，但整體的思路和方法不變，希望可以對大家有所幫助。