« 回到项目列表

Fridge

简介

Fridge 是一款设计资产速查工具,目前仅支持 Mac 端。通过 Fridge,设计师可以方便直观地向工程师交付设计资产、沟通设计细节。

项目最初的想法,源自我在 Teambition 工作期间遇到的一个真实的问题。设计团队给产品定义了设计系统,因此项目中使用到的颜色数量是有限的,或者至少是有规律的。但我们发现工程师在代码中并不是直接引用颜色的色值,而是会给颜色定义变量名,通过变量去引用;而设计师在设计稿中的标注都是用的具体的颜色值,两者之间无法形成很直观的映射。每次沟通颜色的调整,都需要设计师去到工程师的电脑前,打开代码,找到颜色的定义,一通搜索,才知道对方讲的是什么。

某一天,有一个设计师提出了一个想法:我们能不能自己开发一个小工具,把设计系统中的颜色与代码中的变量名一一对应起来,像一本字典一样,方便设计师向工程师传达设计细节。听到这个想法,我觉得有点意思,眼下这确实是个问题,这个方案能解决问题,并且开发成本也不高。于是我们一拍即合,一个负责出设计,一个负责写代码,找了一个周末做出了 Fridge 的前身 —— Teambition Color。

拿给团队实践了一段时间后,发现好像还不错,挺方便的,问题到这里也就告一段落。

后来随着设计系统的进一步完善,同样的问题又出现在了图标、插画等其它设计资产上。于是就在 Teambition Color 的基础之上,增加了几个新的类别,如法炮制了一番。由加入了其它设计资产,Color 一词已经不再适用,急需换个名字,同时随着这个工具在兄弟团队间的推广,我们不想让人误以为这是 Teambition 对外发布的某个正式产品,因此在命名上刻意避免与其产生关联。最终,想到了 Fridge 这个名字。

为什么叫 Fridge?如果把产品比作一道料理,那么设计资产就是食材。食材放在冰箱里冰箱,故此得名。

Fridge 2.0 目前正在开发阶段,我准备将其扩展到 Figma、VS Code 等平台上,进一步缩短触达路径。现有的 1.x 版本由于是内部工具,有些地方依赖了公司内部的一些东西,基于数据安全考虑不便开源。2.0 版本会彻底摆脱这些依赖,让 Fridge 的本体成为一个完全中立的存在,届时不出意外应该会开源。

周期

2020 年 5 月 - 至今

相关链接

内部工具,暂不提供外部访问方式

项目截图

图标 截图