在Figma,我们认为设计系统是帮助实现民主化的强大工具,并使整个组织能够成为设计过程的一部分。它们可实现大规模一致性,并帮助团队更快地交付更好的产品。但是,产品设计团队在设计系统方面的学习和成长并没有赶上市场营销和网页设计的步伐。

作为新加入的营销网站制作人,我开始剖析我们营销网站上的页面以及创建新页面的过程。我意识到我们严重缺乏网页设计最佳实践的一致性和严格性。设计人员和开发人员没有使用一种可重复使用的方法和元素库来构建页面,而是各自提出了自己的系统并创建全新的解决方案,其中许多解决方案与在其他页面上已经实现的解决方案非常相似,尽管并不完全相同。营销网站不仅难以维护和更新,而且对于我们的用户而言,感觉不一致。现在是构建设计系统的时候了。

盘点

我们的第一步是评估我们现有的资产:字体、大小、颜色、列宽、布局等。我们开始将所有这些信息编译到一个Figma文件中,这样一来就很容易看到重叠的内容,换句话说,就是需要统一的重复模式。我们还发现了离群值或仅使用过一次的组件,这些在样式指南中都不存在。

重复的元素占了很大一部分,因此我们将它们分解为原子级别,这将允许使用设计系统的任何人将原子和分子拼凑在一起,从而形成适合任何页面和所需内容的有机体。对于我们而言,最终获得灵活的构建基块是非常重要的,这些构建基块可以在任意组合中相互配合使用。

我们还寻找相似但不完全相同的元素,并统一成相同的样式。因此,我们创建了「H1, h2, H3」标题字体、正文字体和技术文本样式,而不是12种不同的标题样式。我们对博客和其他长内容进行了相同的处理,添加了诸如重要引述(pull quotes)和块引用(block quotes)之类的样式。

一旦我们编译并完善了我们已经创建的视觉语言,将所有组件组织到一个共享库中,这样,即使只有很少设计经验的人或对Figma不熟悉的人也可以创造出和网站其余部分样式统一的内容。

简化、灵活的设计系统

在一个月的时间里,我们的小型团队创建并组织了一个牢固且灵活的样式指南和组件库,该库现在位于我们的CMS中,即Contentful中。所有内容在各个方面都具有统一性:字体排版、大小、填充、行高、颜色和网格。现在,当设计团队开始创建新页面时,他们可以随时获得灵活的构建基块。创建H1标题可以很容易地从设计系统中获取。我们还开始对常用配对的元素进行组件化以及使用系统中的元素组装区块。我们称这些较大的有机体为“FLEGO”(Figma + LEGO),你可以在此查看该文件

更快进入市场

现在,Figma的大部分核心营销网站都是使用此框架构建的。通过Contentful使用我们的设计系统,我们可以在一天之内完成从概念到发布的过程,而无需任何新代码。例如,当我们想创建一个新功能时,最初有这个主意的产品销售人员和我使用FLEGO制作了快速线框图,并直接复制到Figma文件中,然后使用CMS中的组件构建页面。在不到48小时的时间里,我们将想法变成了真实的网页。

使用FLEGO构建的新功能页面的一部分

另外,当我们要对原子或分子进行通用更改时,我们只要在Contentful中进行一次更改即可,而不必让开发人员在每个页面中进行数十次更新。最近,我们重建了品牌并将我们的品牌字体更新为「Whyte」。由于我们将网站的所有构建基块放在一个文件中,因此我们能够快速进行版式更新,查看决策的影响并进行迭代,直到我们拥有一个可在整个网站上正常工作的系统。

上图:使用新字体Whyte的FLEGO。下图:使用旧字体Apercu的FLEGO。

不断发展

我们已经能够在一些大型项目中依靠我们的设计系统,但是我们仍在进行修正和调整,并希望在遇到新的向组件添加或修改组件的新理由时,总能如此。我们在可访问性方面还有工作要做,而这正是我们现在优先考虑的问题。

有时我们也会脱离系统。例如,我们希望立即在我们的首页上吸引访问者的注意力,因此我们选择了较大的居中标题动画。我们的网站上没有其他类似的部分,因此这不是我们的设计系统的一部分。

https://4ebstudio.oss-cn-hongkong.aliyuncs.com/20200210/homepageanimation6.gif

每当我们发现自己偏离到系统之外时,我们都会谨慎地说明原因,并调查将来做出相同决定的可能性。如果很有可能我们将会再次使用它,那么这将是将其添加到系统中的令人信服的理由。

开始你自己的设计系统

尝试组织和发展自己的系统?这是管理Figma营销网站系统的文件,以及一个空白模板,可帮助你入门:

  • FLEGOs:我们营销网站由设计系统中的原子和分子构成。
  • 样式指南入门模板:一个示例模板,可用于开始使用你自己的样式指南。