如何管理设计团队Figma文件?来看大厂高手的总结!

随着业务发展、产品迭代和团队规模不断壮大,如何高效管理不断积累的设计稿件、提升协作效率成为团队管理规范化不可缺失的一环。本文将分享笔者制定团队 Figma 文件管理规范的经验,每个团队的实际情况不同,希望能为大家提供一些解决问题的思路。

更多文件管理方法:

现状分析

在新规制定前,我们设计师创建文件的逻辑是:按模块和角色的不同分工分别创建文件,并在一个文件中持续输出设计稿直到达到该文件存储上限,因此会出现诸如“首页-交互 1/2/3...”、“搜索-视觉 1/2/3..."这种文件。

如何管理设计团队Figma文件?来看大厂高手的总结!

以上方式存在的问题也很明显:

  1. 「查找难」历史文件数量非常多,找要找“某个时段”的“某个需求”的文件很困难;
  2. 「加载慢」单文件体量巨大,严重影响网页运行效率;
  3. 「内容散」每个文件里面都是日常局部需求散点,难以对页面最新的完整方案有整体认知;
  4. 「协作难」一方面不同设计角色(交互/视觉)之间各做各的,另一方面,负责不同模块的同学之间信息也不互通。(P.S.很多功能涉及全流程协同改造,即便是模块设计师也应该具备全局视角)

重构文件管理层级

我们团队订阅的是 Figma Professional Plan,相较于 Organization Plan 少了一些文件管理的功能。我根据 Figma 目前提供的结构重新定义了如下五个文件管理层级。第一级(Team)就是团队相关设计成员的总和,一般按业务线组织设计团队。 下面我将从第二级(Project)开始,逐级讲解每一层的组织方式。

如何管理设计团队Figma文件?来看大厂高手的总结!

二级:Project/项目

如何管理设计团队Figma文件?来看大厂高手的总结!

项目层级主要用于划分组织分工。我们从以下三个维度创建项目:

  1. 模块项目:将产品按功能模块/页面划分为多个相对独立的项目
  2. 通用资产项目:通用设计资产项目用来存储和管理全流程通用视觉规范(如 12.0 设计系统、标签规范)、重点模块运营规范(如首页运营规范,以备团队协作审核需要)、通用素材库(如 icon、3D 素材)等。其他垂类场景资产可以放在各模块项目内维护。
  3. 归档项目:不再更新且不涉及内容复用的文件可以判定为过期版本,全部移入“ 归档”项目中;

Team 视角下,使用“add to favorite”功能将常用项目固定在左导航,创建快捷方式。

如何管理设计团队Figma文件?来看大厂高手的总结!

三级:Design Files/设计文件

为了方便查找和管理,我将设计文件划分为以下 5 种类型,通过不同文件封面颜色可快速区分。

如何管理设计团队Figma文件?来看大厂高手的总结!

为了避免每个 Figma 文件体量过大加载变慢,我们默认按季度创建日常需求文件。时间跨度按需求吞吐量和文件大小的增速动态调整:

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

我们通过“pin to top of project”功能将近期频繁使用且持续时间较长的文件置顶,方便团队成员快速访问。请注意“pin to top”和“add to favorate”功能的区别,置顶全员可见,收藏仅个人可见。

如何管理设计团队Figma文件?来看大厂高手的总结!

四级:Pages/页面

页面层级指打开 Figma 文件后,左侧导航栏的组织方式。

①日常需求整体按「月份」分组,按「开始时间+需求名称」的命名方式自下而上(最新在最上方)创建

②如果某些功能区块需求相对集中,可以采用「功能区」分组,命名方式同上。

如何管理设计团队Figma文件?来看大厂高手的总结!

③对于正在进行中的需求,可以在页面前方添加 “ ✏️” 标记,定稿后删除标记。

如何管理设计团队Figma文件?来看大厂高手的总结!

五级:Canvas/画布

画布是设计师内容输出的区域,这里主要分享两种文件类型的内容组织方式:「日常需求」和「新版合集」。

A/日常需求文件

  1. 交互稿、视觉稿分两个画板,方便横向对比和查看;
  2. 将所有过程稿都保留在文件中,方便历史追溯(团队内尽量避免使用个人 Draft 草稿文件出图);方案定稿后,将所有草稿整理并框选在远离定稿的其他区域,添加灰色蒙层以示废弃。

如何管理设计团队Figma文件?来看大厂高手的总结!

B/新版合集文件

新版合集文档收集产品核心页面最新版本视觉稿,同时详细列举页面中各主要区块的变体。团队内要求设计定稿后,若涉及新功能、新样式应该立刻更新到整合新版合集。合集有以下作用:

  1. 方便管理者对页面最新进展有整体的认知;
  2. 方便设计同学快速调用内容;
  3. 方便不同模块同学信息拉齐;

每个模块的新版合集采用总-分的结构,主要包含两个部分:

  1. 「总」完整页面结构导航:核心页面范例,包含页面的主要状态和最完整的区块结构组合。
  2. 「分」各结构区块详情:包含每个区块全量变体样式,以及基础展示逻辑说明。(当变体之间存在展示优先级时,添加逻辑备注。如“展示优先级:A>B>C>D”)

如何管理设计团队Figma文件?来看大厂高手的总结!

技巧 1: 在页面结构导航页添加详情页 Frame 跳转链接,可以快速从导航页找到目标区块并跳转到详情。具体操作方法为:

  1. 在 frame 中右键 → copy as → copy link
  2. 选中文字图层,点击顶部 “🔗” icon添加文字链接,将上一步复制好的 frame 地址贴过来。

如何管理设计团队Figma文件?来看大厂高手的总结!

技巧 2: 使用 Figma“评论”功能在更新区域添加描述备注。

如何管理设计团队Figma文件?来看大厂高手的总结!

如何快速查找稿件

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

产品需求排期表记录了我们日常产出的所有需求,与其在一堆 figma 日常需求文件中找,不如将需求表作为我们的需求索引,视觉定稿后,使用“copy link to page”功能,将稿件地址复制并添加在需求备注信息中。通过这种方式,我们可以在需求表中快速搜索并定位某个稿件地址。

如何管理设计团队Figma文件?来看大厂高手的总结!

小结

以上是笔者对团队 Figma 文件管理的经验总结,规范只是解决问题的手段,每个团队需要根据实际情况对症下药,定制符合团队习惯的管理方式。

欢迎关注「JellyDesign」的小程序:

如何管理设计团队Figma文件?来看大厂高手的总结!

收藏 75
点赞 30

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。