Explore, learn, enjoy

之前写过一篇关于 Design System 的文章《Atomic Design - 原子化设计体系》,写的时候还没有正式开始项目的组件化工作。经过数个月断断续续的整理、修改,住这儿的 Design System 的 Sketch Library 已经基本完成。但是一些 Sketch 本身的缺陷始终困扰着我。

技术背景

正如我在那篇文章中提到的,考虑到多个人同时修改一个 Sketch 文件会导致在网盘内产生冲突版本,长此以往会分裂出多个版本,需要额外的精力去维护、合并设计稿。因此当时我选择了 GitHub 作为组件库的存储方案,最起码能保证文件不会轻易修改。

但是我低估了设计师对 Git 的“抵触”,Sketch 文件会被 Git 当作二进制文件而无法进行合并,随着项目越来越复杂,手动合并将越来越困难。使用的时候也不一定能想起来去 Fetch 一下。总之,为代码而生的 Git 并不适合管理设计文件。

用 Git 管理 Sketch 文件的第三方服务很多,Abstract 是其中做的比较好的。但 Sketch 的局限性不仅仅在版本控制上,而是它没法兼顾灵活性和统一性。

考虑一下Figma

其实我很早就听说过 Figma,但是那时候他们对中文的支持很糟糕,一些 icon 在浏览器上会显示得很大,给我留下了不太好的第一印象。最重要的,它是纯 Web 服务。一般来说专业软件没有用 Web 的,人们往往对其可靠性抱有怀疑态度。

Figma官网截图

今年初由于部门调整,原属于数个部门的设计师合并到一个团队,因此我们开始考虑将所有旗下移动端产品使用同一套 Design System,减少重复劳动,统一视觉风格。因此我需要扩充原来只用于住这儿的设计组件,使其支持多个不同视觉风格的产品,Sketch 逐渐不堪重负。

先说缺点

Figma 的缺点很明显,也有不少。

依赖网络

Figma 是基于 Web 的技术,是优点也是缺点。如果没有网络就没法用。话又说回来,没网络不放假回家还工作什么?

服务器在境外

目前 Figma 没有被墙,但是也会被解析到美国的服务器,延时是一大问题。所以在直连的时候打开速度经常很慢,在网络差的时候尤为明显,让我在满怀热情的给别人展示的时候非常尴尬。

没有插件

之前曾有过第三方的插件平台 Figma Plus,可以做到填充头像、姓名,支持 RTL……。最近由于种种原因停止开发了。插件并不是 Figma 官方支持的属性。因此 Sketch 的插件生态仍然具有极大优势。

Figma Plus

无法自定义填充数据源

Sketch 52开始支持自定义的数据源,可以制作出更贴近场景的设计稿,更有代入感。

Sketch Data

对中文的支持度不够

几个星期前 Figma 宣布提升了 CJK 文字的效果,其实更多的只考虑到日文。结果就是当你新建一个文档并输入中文时,显示的字体实际上是 Noto Sans JP,这就导致输入的汉字如果没有对应日文版本时会无法显示。解决办法很简单,把文字换成中文字体就行了。其实开发团队是知道的,在我反映了这个问题后他们回复我:

Figma回信

使用Figma的理由

即便有那么多的缺点,我为什么还要在 Figma 上实现我们升级版的 Design System 呢?

文字样式

在 Sketch 中,文字样式 Text Style 由图中的诸多属性共同定义,包括字体、字号、字重、行高,还有对齐方式、颜色等:

sketch的文字样式设置

其实我只需要文字样式包含字体、字号、字重、行高就够了,对齐方式应该可选,颜色也应该支持从色板中自由选择。

但是 Sketch 的这种设计就导致了,为了提供多种对齐方式和颜色,你需要将文字样式翻好几倍。除非你想让这个文字属性和原来的脱钩,成为一个新的样式。想多一个颜色?你需要把之前所有字号字重不同对齐方式都复制一遍改成需要的颜色。

而 Figma 的文字样式就简单的多,只包括以下这些属性:

Figma的文字样式设置

所以在 Figma 中,你设定好文字样式后,对齐方式、颜色的修改都不会改变文字样式本身。在我这里,需要增加一个产品时,只需要增加一套新产品的色板,而完全不用改变文字样式。

Figma 在这方面的优势是显著的,之前我们有8个字号,2个字重,3种对齐方式,7种颜色(现在是8种),这样理论上会有8*2*3*7=336种文字样式,用起来真是灾难。

现有文字样式有上百种
就这还只是一部分样式,如果再增加颜色数量还得增加好多

现在,我只需要在 Figma 中设置 16 个文字样式即可。引入新的颜色也不会导致数量剧增。

颜色管理

尽管现在 Library 文件中添加的颜色可以在其他文件中看到,但这实质上只是一个快捷方式,颜色并没有成为参数化的“style”,不管是文字还是图层,当你在这里选择其他颜色,也会导致和 symbol “脱钩”,成为一个新的样式。

sketch的颜色板

所以为了实现颜色切换,我在 Sketch 中用了很笨的办法:预先制作不同颜色的图层,填充一类,描边一类,分别有各种颜色,将其设置为 Layer Style。实际使用的时候,我需要叠加至少两个图层,一个负责填充颜色,一个负责描边颜色。如果你还想要阴影,就得再加一个阴影图层。

Figma 中则没有这个 Layer Style的概念。你可以为图层填充、描边设置色板中的 Color Style。阴影则是另外一种 Effect Style。

Figma中没有layer style的概念

这样填充、描边不用分成两个图层了,你可以设置任意颜色和阴影,如果 Color Styley 有变动,这里也会一并修改。

6月10日更新:在 Sketch 55.1 试了一下,改填充颜色的 symbol 貌似不会导致组件脱钩。

版本控制

既然是像 Google Doc 的在线服务,文件历史当然是必须的。Figma 会自动保存修改,你也可以手动打上 tag 标记版本,从此告别“首页-4.5-20190522”这种命名方式,设计稿只有一份。想回到任何历史版本很容易。

协作

既然支持好多人同时操作一个文件,也就意味着程序员看到的和设计师看到的是一样的,包括图层结构、参数、距离。也就意味着不再需要切图,程序员可以选择任何图层导出。

而且修改对所有人都是实时的,修改完开发可以立刻看到。

产品也可以修改一些文案。而在以前需要产品告诉设计,改完以后上传标注再通知开发。现在产品可以自己修改,设计师可以专注于摸鱼。

要不要切换?

不同的团队需求和工作方式都不一样,我不会劝你一定要迁移到 Figma——如果真的要迁其实很容易,直接导入 Sketch 文件即可,各种数据都能保留。我只是说,这是一个“革命性”的工具,如果能解决你们团队以前无法解决问题,尝试一下挺好。

最后可以在这里用一下纯在线的设计工具是什么体验。