《独家秘籍 - Figma版本式文件管理》

廊坊/设计爱好者/4年前/995浏览
《独家秘籍 - Figma版本式文件管理》

工作的文件越来越多,每次找文件就像西天取经一样。

用了这个方法,保证你找文件效率跟以前不再是一个量级!


工作的文件越来越多,每次找文件就像西天取经一样。

用了这个方法,保证你找文件效率跟以前不再是一个量级!

还有我这个人不太会做视频,如果有那里做的不好的地方......

你来打我呀🤪🤪🤪🤪🤪



传统文件管理

我猜你肯定也遇到过这样的情况,看着一堆密密麻麻的文件!!!

诶?我馁个文件存哪来着?上次做的那个叫什么名字来着?这个文件当时是哪个版本?

你历经千辛万苦,终于找到了你需要的文件。打开之后发现这个文件居然是废弃的版本!!!

或许,你有良好的文件管理习惯,但新的问题也有可能会困扰你,这个文件和上一个版本有什么区别??

当然这也不是你的锅!我们的习惯就是面对问题给出答案,作为设计师的答案就是一个又一个设计文件,我相信有的时候你的答案还远不止1个。所以你文件不及时整理就会变成这样,即便你有整理归纳的习惯。但是,传统的目录结构管理方法又显得没那么灵活。


使用思路

HI我是胶布,我们将了解一种新的文件管理思路。

首先要知道的设计文件是如何产生的,UI设计的内容是服务于产品,而产品本身会按照一定周期进行更新,也就是发版。发版会包含若干个功能,这里的功能也可以叫做需求,其中每一个需求都相当于问题,都是需要对应的答案,也就是设计文件支持。

按照以往的管理方式,是直接面对需求进行管理,那你的文件可能会变成这个样子。

要是按照版本记录呢?在进行更新时。又需要在各种文件夹中来回穿梭,用起来还是有点麻烦。

不妨尝试着换一种思路,创建一个记录的文件,因为需求本身可能是一句话、或者一个文档,只需要记住就好了。而处理结果是一个又一个实实在在的文件,把记录和文件本身分开进行管理,他们之间用「链接」的方式进行管理。

还记的文件是怎么来的吗?是发版中包含需求,需求需要对应的文件。

那可以把版本和需求这两个记录给提取出来,具体的设计文件独立存储。记录文件通过链接跳转到不同的设计文件,这样看起来是不是显得灵活一些。

那么接着尝试着增加一个虚拟的项目(alpha版本

其中有2个需求(需求1需要a页面、(需求2需要b、c页面

首先创建一个记录文件alpha,里面包含着需求1和2,需求1链接到a页面,需求2链接到bc页面,看来效果还不错。


Figma怎么实现

将这种管理方式用到Figma上来试一下效果,我们需要做两件事,创建一个目录文件,和按照产品功能去创作文件。


一个目录文件

记录文件就是一个普通的Figma文件,左侧的Page一栏用来记录版本,每一个版本使用一个Page表示,画板区域是这个版本包含的需求,每个需求包含着对应的功能页面的名称,看起来还不错。


不过为了区分每个需求在工作中的不同状态,可以在增加一行状态,把记录文件做成一个任务看板的形式,看板从左至右依次为。

未确认、已经知道的需求但是还不确认做不做;

收件箱、需求和时间明确了,等待制作;

制作中、正在处理的需求;

待过稿、做完待确认的内容;

开发中、设计没问题了开发正在实现中;

待验收、开发完成等待设计验收;

已上线、已经确认没有问题的需求,等待合并成集成包的需求。

每一个需求就会变成一个卡片的形式,按照常规的工作流程所有需求卡片会依次挪到最右侧的已上线状态下面。


一堆功能文件

接下来看下设计文件,这里介绍下我使用的管理方式,拿一款大家都比较熟悉的App微信举个例子。

我们可以按照App的功能,进行文件的管理,首页可以是一个功能文件,通讯录、发现、我、各是一个文件。


那每一个功能文件的Page,一栏包含三个内容,(封面)可以帮助快速在Figma中定位文件,它的尺寸是w780pt,h350pt,在这里写上功能的名称。


0000 - v1.0.0这是我们需求的设计文件,前面四位是需求号(需求号一般是由产品记录的,每一个需求只会对应一个号码)这个号码必须是产品、设计、开发能达成一致的一个标准。


后面的版本记录了,这个功能页面的更新次数。

小数点后两位记录的是简单样式的更改,比如更改了文字的字号,颜色,或者调整了图标的大小;

小数点后一位记录的是这个页面功能框架的修改,比如在这个页面增加了一个新的功能;

小数点前一位记录的是大版本的修改,这个可能和上一个版本是完全不一样的设计。


最后有一个仓库Page用来放那些飞机稿


此外需要给设计文件上面加上一个标题,这个标题需要和记录文件的那个需求保持一致,在标题后方增加一个记录文件所连接到的版本。


把文件关联起来

接下来就可以把功能文件和版本记录给关联起来,在功能文件的Page一栏,右键选择对应的页面选择Copy link to Page。

到版本记录中找到对应的需求重的页面文字,按键盘上的com + k或者在上方选择Create link,在弹出文本框里直接粘贴刚才的链接,这样的一个带有跳转链接的版本记录就做好了。


另外为了方便快速跳转到对应的版本,可以把版本文件页面的链接在复制一个,加到功能文件的标题上,这样一来就可以实现文件之间的快速跳转。



总结

一起来回顾一下,版本式文件管理,主要由两部分组成,负责记录的版本文件,每一个Page里面包含了需求状态和需求卡片,需求卡片里包含了对应的功能页面名称。


另外是一堆以功能作为记录的设计文件,在Page一栏有封面版本记录和一个仓库,每一个功能Page里面有导航标题和的设计文件。


最后他们之间用link的方式进行关联,就实现了Figma版本式文件管理。


具体怎么用

接下来模拟一个在工作中遇到的情况


预计1.0.02版本有3个需求

  1. 0012-我的页面调整

  1. 我的

  1. 0013-优化浏览流程

  1. 首页

  2. 详情页

  1. 0014-优化分享流程

  1. 详情页

  2. 分享弹层


先需要把这个1.0.02版本先记录下来,再增加任务处理的状态栏,再增加三个需求卡片依次将需求名称填写进去,再对应的需求卡片里填入页面名称,到这里的记录文件就算完成了。


接下来去找到对应的功能文件,如果没有对应的功能文件,我们直接新建一个,记得加上封面、版本记录、仓库,接着我们就可以开始画界面,在界面上方增加一个标题,把引导标题记得给改掉。


复制一个Page的链接粘贴到对应需求的页面文字上,再将版本的页面链接粘贴到导航标题上,这样我们的第一个需求就算添加完成,其他两个需求同样进行添加。


废话

使用这样的文件管理方式,不论是产品、设计师还是开发,在日常的工作流程中,只需关注一个版本记录,就可以快速找到对应的文件内容。

视频中所用到的文档内容我会放在评论中,大家可以自行下载。

最后祝各位生活愉快再见!



所用资料

Notion:

hijiaobu.com


演示稿:

https://www.figma.com/file/NL3cdydBsVwihNjIMfvX3z/Figma%E7%89%88%E6%9C%AC%E5%BC%8F%E6%96%87%E4%BB%B6%E7%AE%A1%E7%90%86?node-id=0%3A1


Figma版本式文件管理-记录

https://www.figma.com/file/hBmgUpvCzKrosCthtnVX4m/Figma%E7%89%88%E6%9C%AC%E5%BC%8F%E6%96%87%E4%BB%B6%E7%AE%A1%E7%90%86-%E8%AE%B0%E5%BD%95?node-id=9%3A401


Figma版本式文件管理-文件

https://www.figma.com/file/rcCDoCWvIKCTMbwTwmagpF/Figma%E7%89%88%E6%9C%AC%E5%BC%8F%E6%96%87%E4%BB%B6%E7%AE%A1%E7%90%86-%E6%96%87%E4%BB%B6?node-id=3%3A10



0
阅读原文
|
Report
|
2
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
AI机器 AI Machines
Homepage recommendation
相关收藏夹
IP形象设计
IP形象设计
IP形象设计
IP形象设计
精选收藏夹
作品收藏夹
作品集
作品集
作品集
作品集
精选收藏夹
作品收藏夹
餐饮案例
餐饮案例
餐饮案例
餐饮案例
精选收藏夹
作品收藏夹
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
精选收藏夹
作品收藏夹
交互
交互
交互
交互
精选收藏夹
作品收藏夹
中国风元素插画
中国风元素插画
中国风元素插画
中国风元素插画
精选收藏夹
作品收藏夹
大家都在看
Log in