Rojcyk

我们如何使用Figma处理Kiwi.com设计体系

深入介绍我们如何搭建文件,遵循的原则,以及如何在Figma中构建设计体系。

Original, 🇺🇸 English translation is available here. If you feel like something is wrong with this Chinese translation, please comment or edit this file.

Kiwi.com的移动端设计团队很小,只有我们两个人。但是大约有20个人以某种方式参与了该设计。他们对最新的迭代进行评价、修复副本,或设计跨平台功能。目前我们的前端是在Sketch中设计的,Orbit也是,这是我们的设计体系。但是由于Orbit的移动端部分看起来不同,我们决定尝试在Figma中设计,看看它是怎么操作的。

  • 我们为什么在Figma中构建移动端设计体系
  • 最近的更新如何改变了我们的工作方式
  • 我们如何设计了设计体系(有示例)

为什么选择Figma?

以Sketch为导向的工作流程依赖于Zeplin处理切换,Abstract覆盖版本控制,Marvel设计静态原型。但是,有时候会不同步。原型会卡在最新的测试迭代中,人们忘记向Abstract推送任务,或许Zeplin还没有更新最新的已审核过的视觉,或者嵌入Dropbox Paper的PNG是3周前的。在设计中,这些工具一定会不同步🤔

在加入Kiwi.com之前,我一直有尝试Figma的想法,但是很难实现。我没有发现它有什么使用的价值,也不需要保持所有工具同步。

Twitter

我还对浏览器/云端方式感到不爽。我喜欢随时可以打开Sketch,它是一个原生的mac应用。然后它就吸引了我,不可避免 — 你要么把所有东西放在云端,它是100%同步的,要么在不同步的工作流程中离线使用。所以,我试着使用Figma,慢慢的,我越来越喜欢它。

去年11月,我加入了Kiwi.com。Vojta是当时唯一在移动端工作的人。他自己负责所有的平台和设备👏。虽然他干得很出色,但他的工作缺乏统一的体系。

Twitter

我们想尝试一下,但是在没有团队支持的情况下押注Figma,并在其中设计Orbit,这似乎不太靠谱。当时还不清楚Figma团队的前进方向,以及他们的关注点。另外,有些功能还没做好。然而,我们还是决定尝试一下,但仅限于移动端。我们的前端和Orbit仍然在Sketch中设计和维护

Figma 3.0

直到最近,管理组件还是很痛苦。它缺乏可以让设计系统扩展的功能。如果你想高效地使用DS,那么只能使用一个文件。

幸运的是,Figma发布重要的3.0更新。我在这里不会讲太多细节(只需点击链接),但更新基本包括:

  • 让启用、禁用和管理更新更容易
  • 允许用户通过覆盖文件共享组件
  • 允许用户共享不同的层样式(这让它比Sketch更原子化,因为它可以让你将文本样式与颜色和效果相结合)

每当我们设计一个新的库组件,或者设计体系之外的内容时,我们都试图遵循几个UX原则。它应确保库统一、高效和易用。

最大二级深度逻辑

最初,使用组件并嵌套时,看起来非常强大。但是你知道,能力越大,责任越大。设计体系很容易走极端。我发现大约2级深度可达到使用性和可能性的最佳平衡。

想想命中框

命中框这个术语来自FPS游戏,它是你需要击中的区域,这样才能给对手造成伤害。在我们的案例中,这是一个你需要双击的区域,用于编辑或选择图层。有时层的排序是足够的,有时候你可能需要让其更大。无论哪种方式,你都需要让工作变得简单:)

组件覆盖逻辑

组件覆盖建议基于组件的大小。因此,如果你想用其他组件替换某个组件,并想从建议窗口中选择它时,它需要具有相同的大小。

助手库

它确实有助于定义一个单独的文件,包含我们用来构建设计文件的所有小东西。我们创建了一个名为“Helpers”的文件。它有助于在视觉上区分组件,并给画布带来结构感。我们这样做是因为我们要与公司的每个人共享这些文件,甚至与非设计人员共享,他们通常需要视觉助手查看这些文档。

GroupIt ProTip

我们将所有组件封装在组内。这样文件组件库中的侧边栏就不会散乱。结果是,处理带有许多组件的页面更加容易了。这是我在Sketch中特别想要的东西。

优化位图资源

当在我们在设计中处理照片或其他位图时,我们会像处理网络资源一样处理它们。

  • 我们优化图像:使用ImageOptim, Optimage, tinyPNG之类的工具。我不确定Figma是否做了什么优化,但是我们还是要做。
  • 我们优化文件格式: PNGs用于简单插图和JPEGs用于照片。
  • 我们调整资源大小:在模型中,我们通常不需要广告牌大小的照片。

遵循此操作可以减少文件和库组件的下载时间。还可以减少重新打开文件的麻烦。

#组件和项目结构

我重新创建了以下示例,方便你自己轻松地使用。只需复制它们,根据你的工作流程随意调整。

项目文件结构

每个项目或流程只有一个文件。我们有位置选择器、日期选择器、搜索之类的文件。但是它也有自己的问题,你无法连接两个文件并从中创建原型。但是,这仍然是管理方面最好的解决方案。

项目版本管理

我们将页面作为项目的不同版本,使用标准的X.Y命名约定。X表示重要的版本更新,而Y表示小的迭代。最新的迭代在顶部。组件页面,存储我们考虑移到主UI库的候选组件。

项目封面

这似乎是一件小事,但是如果文件和项目过多,浏览Figma就变得很麻烦。文件标题是有用的,但是很难快速浏览。这就是我们使用封面图片的原因。

Twitter

全局库

目前只有移动团队在使用Figma,但未来可能会有所改变。因此,我们必须以既支持移动库又支持前端库的方式来设置文件。

助手

Helpers source file

我之前提到过。它只有几个组件可以帮助我们的团队构建和查找文件。我们使用Page、category和section区分不同的组件,会给没直接使用Figma的人提供注释,颜色样本用于我们的通证库。

Tokens

这个文件很少使用。它包含了整个设计体系的大部分原子组件。该文件有三个页面:颜色、排版和阴影。基本上,除了组件外,您可以在Figma库中定义所有内容。

颜色

Colors source file

这个文件很少使用。我们已经定义了使用的颜色。

排版

Typography source file

排版和颜色是一样的。我们已经在设计体系中定义了我们需要的所有内容(它缺少一些FE字体款式的定义),因此很少使用。上面定义的排版看起来很简单,但是当与其他共享样式结合在一起时,就非常适合移动端使用。

阴影

Shadows source file

我们仍在试验阴影,但到目前为止,我们已经定义了4个立面等级,这似乎对我们很有效。

图标

Shadows source file

图标有自己的页面,它们被分成不同的部分,放在24x24的框内。几乎所有的图标都是标准的Material Design Icons.

插图

插图与图标非常相似。它只是一个巨大的画布,布满了我们的产品插图。它们的大小相同。但是由于SVG对Figma的导入限制,现在我们必须使用位图。

Orbit移动端

Orbit for Mobile source file

之前,我们为iOS和Android开发了两个不同的移动端库。但由于它们有很多重合,我们决定将其合并,这样便于维护。但是UI元素的展现方式仍然存在差异,例如开关等。这个工作仍在进行,我们需要赶上Android🙂的进度

结论

虽然Figma在3.0发布之前缺少部分功能,但我需要的大多数必备功能都已经有了,它已经成为其他工具的有力竞争者。用它构建设计体系已被证明是相对容易的。实际上,我觉得在Figma中管理设计体系要比其他工具容易得多。它肯定是不完美的,但最符合我的需求。

在每次更新时,我们搭建文件和分割设计体系逻辑的方式也会随之变化,但是本文中提到的内容是我们最常用的,也被证明是非常有效的。

在下一篇文章中,我将介绍如何真正在Figma中构建设计体系、嵌套组件中的一些陷阱以及一些技巧。如果这恰好是你想看的内容,如果想在更新时马上看到内容,最佳办法是点击下方的按钮👇