在 Figma 中构建和扩展设计系统：案例研究

确定如何为跨国公司构建设计系统意味着对每个组件和模式进行细致的分类。 这是一项艰巨的任务，既需要大局观，又需要关注细节。 以下是一位设计系统团队负责人如何完成它的。

当总部位于瑞士的控股公司 ABB 着手创建设计系统时，其目标是为数百种软件产品整合一致的外观和感觉，其中许多软件产品为使工厂、矿山和其他工业场所保持运转的机械系统提供动力. 对于一家在全球拥有近两打业务部门和近 150,000 名员工的公司来说，这绝非易事。 对于担任 ABB 10 人设计系统团队的首席产品设计师的 Abdul Sial 来说，扩展组件和模式库取决于保持开放性和透明度，并强调大量文档。

设计系统设计师的角色

越来越多像 ABB 这样的大公司拥有专门致力于创建和维护设计系统的团队。 马德里设计师亚历杭德罗·贝拉斯科说：“设计系统允许一致性，在公平的时间内进入市场，并且不允许生产卡在没有创造价值的定制上。” 或者，正如葡萄牙里斯本的设计师 Alexandre Brito 所解释的那样：“只要有很多人使用同一组工具，设计系统就会提供结构。 就像每个人都使用相同的语言一样。”

如果传统的风格指南涵盖了设计基础——例如字体和颜色——那么设计系统的影响范围就更广了。 “设计系统是样式指南、设计组件、设计模式、代码组件以及最重要的文档的组合，”Sial 说。 当他在 ABB 的设计系统上工作时，大约有 120 名设计师定期使用它。 这项工作代表了该系统的 4.8 版本，该团队将其称为“设计进化”。

设计系统设计师所扮演的角色与那些只关注单个产品的人不同。 “您可以鸟瞰公司正在使用的所有不同产品，”Sial 说。

在设计运营中工作还需要与整个公司的利益相关者进行沟通。 “设计系统设计师必须是社交的，” Velasco 说。 “设计系统设计师必须非常喜欢与组织内不同角色的人一起工作和交谈。 他们必须能够区分要包含哪些反馈，以便围绕公司的需求构建设计系统。”

组件的生命周期

在 ABB 的设计系统上工作时，Sial 遵循一个总体理念：“文档、文档、文档”。 对于 ABB 网站、移动屏幕或大型独立屏幕上的每个可重复使用元素，Sial 都想展示他所谓的组件生命周期。 这意味着对所有组件和模式（面包屑、标题、输入或按钮）进行大量记录，仅举几例。 “它经历了什么旅程？ 做了哪些决定？ 这样，我们并不总是重新创建所有内容。 在尝试某事之前，您可以阅读并看到有人已经对其进行了测试，”Sial 说。

根据他的经验，这种哲学与典型的文档方法背道而驰。 例如，在快节奏的产品开发世界中，文档通常在项目结束时编写或完全放弃。 但对于设计系统，Sial 说，文档不仅仅是事后的想法。 “设计系统永远不会完成； 它需要不断改进，”他说。 “设计系统创建者和消费者希望了解思维过程和决策，以便不断改进它。”

文档对于像 ABB 这样大的设计系统尤其重要。 “拥有如此庞大的团队，你必须能够扩大规模，”他说。 “我们如何确保加入团队的每个人都可以快速访问任何组件并了解它是如何开始的、如何编辑的以及他们使用的是什么版本？”

寻找合适的工具

有许多工具可用于构建设计系统，包括 Figma、Sketch 和 Adob​​e XD。 Sial 尝试了几种，尝试了设计和项目管理工具的混合，然后才选择了 Figma，它为文档提供了充足的空间。

Sial 和他的团队决定每个组件都应该放在自己的文件中。 “大多数时候，您一次只处理一个组件。 如果将所有组件放在一个文件中，它会降低 Figma 的速度。 通过为每个组件提供自己的文件，它可以更快地打开，并且您可以在一个地方拥有整个历史记录和文档，”他说。

设置层次结构

Sial 建立了 ABB 设计系统，以便每个组件和模式的文件具有相同的页面。 下面的图像详细说明了每页上的内容。

覆盖

Sial 建议为每个组件设置一个简单的封面。 在 Figma 中，这可以实现所有组件的缩略图预览，并有助于文件的可浏览性。 在 ABB 设置中，封面页包括组件名称及其所处的阶段：设计、开发或发布。 当组件进行时，状态可以很容易地更新。

库存、用例和请求

此页面包含组件在公司数字产品中显示的多种方式的示例。 例如，在文本字段组件的情况下，库存页面将显示文本字段在 abb.com 上的外观与它在 iPhone 上的外观和在 Android 设备上的外观。 “库存使我们能够清楚地了解已经存在的东西，”Sial 说。

此页面还应显示组件被错误使用的方式。 “这使您可以查看您的产品并查看对齐和未对齐的位置，”Sial 说。 他建议启动设计系统项目的团队从对已经存在的内容进行编目开始。 “从库存开始，它将在您创建设计时为您提供指导，”他说。

参考文献、最佳实践和竞争分析

Sial 建议在每个组件文件中创建一个类似于视觉板的部分，展示其他公司如何设计类似的部件。 “与其他任何事情一样，最佳实践是进行竞争分析，看看其他人是如何做的，”他说。 “观察其他产品，看看他们的学习成果。”

测试和数据

测试结果数据页面汇总了与测试组件相关的所有数据，包括 A/B 测试的结果以及来自用户和利益相关者的反馈。 简而言之，Sial 说，“这是一个组件的全部故事。” 也许设计团队在两年前尝试了一个新的变体，发现它不起作用？ “也许我们研究了这种变化，但出于某种原因我们放弃了它，”他说。 如果是这样，这种历史可以确保设计师不再尝试，从而节省大量时间。

范围

下一页列出了组件的范围，以便设计人员可以实现设计。 当他们到达范围页面时，Sial 说，“你有一个故事。 您了解所有产品的库存。 你知道你需要构建什么并且你知道需求。 现在是时候把它写下来并做一个简短的总结了。” 他补充说，创建范围应该是与产品所有者、开发人员和设计师的协作过程。

版本

该组件的最终版本的图像可在此处找到，最新的迭代固定在顶部。 其他设计师应该能够对其进行审查和评论。

沙盒

沙盒使设计人员能够直接在 Figma 中试验组件或模式的不同迭代。 “它可能很混乱，而且没有标准化，”Sial 说。 “这只是一个设计师可以自由地做任何事情的游乐场。”

Figma 组件

该文件还包含 Figma 组件本身的页面，这是一个在整个设计系统中很容易重复的 UI 元素。 设计人员可以对组件进行更改，并且该更改将在整个公司的该组件的所有实例中填充，从而保持一切一致。 该页面将导出到 Figma 设计系统库，任何个人设计师都可以将 Figma 组件拖放到他们的设计中。 如果设计系统团队需要对组件进行更改，他们可以进行一次并在整个公司范围内进行部署。

样式规则

接下来，设计系统设计人员和开发人员创建样式规则页面，这是 Sial 说“在设计中不可见”的元素的一种包罗万象的方式。 例如，当您向下滚动页面时，组件将如何呈现？ 这也是设计系统团队跟踪未解决的问题或问题的地方。 他说他对这个页面变得如此完整感到惊讶：“起初，我们认为这个页面并不那么重要，但现在我们意识到我们大部分时间都花在这里。”

交出

移交说明是开发人员编写组件代码的说明。 移交文档从组件的解剖结构开始，然后包括其变体。

ABB 系统移交文件还包括设计令牌。 在 ABB 等大型设计系统中变得越来越流行，设计标记是关于 UI 元素的与平台无关的样式信息，例如颜色、字体或字体大小。 使用设计令牌，设计师可以更改一个值——例如，指示号召性用语按钮应该是橙色而不是蓝色——并且该更改将填充到使用令牌的任何地方，无论是在网站、iOS、或安卓平台。

Sial 还创建了一个 Figma 代币插件，以扩大设计师可以在 Figma 中创建的代币范围。 “Figma 支持颜色、排版、阴影和网格样式，”他说。 该插件将为更多变量生成标记，例如不透明度和边框宽度。 它还创建了标准化的命名约定，因此设计人员不必手动跟踪令牌名称。 “插件弥合了开发人员和设计人员之间的鸿沟。 它允许两者在设计的单一事实来源上工作； 如果一个人在一个地方进行了更改，那么该更改会在设计和代码中的任何地方生效，”他说。

Sial 强调，在他的系统中，开发人员在创建组件的过程中扮演着积极的角色。 “早期，当我们准备好向他们展示的东西时，我们会让我们的开发人员参与进来，”他说。 “然后我们意识到这行不通，现在我们真的开始与他们进行启动会议。”

文档网页

每个文件的最后一页包含一个带有最终设计的网页，展示了组件作为成品的外观。 “我们创建了一个页面，显示实时示例的外观，以便用户，在这种情况下是我们的设计师，可以看到它在一天结束时在真实网站上的外观，”Sial 说。

合作是关键

设计系统设计师的角色是多方面的。 正如 Alejandro Velasco 所说，“设计一个设计系统涉及很多角色，如果我领导这个，我就是项目的粘合剂。”

这是一项艰巨的任务，不一定适合所有公司。 例如，初创公司可能会更好地从一个开箱即用的系统开始，如谷歌材料设计或 IBM 碳设计系统，而不是投入大量资源来创建一个。 不过，这可能还不够，Alexandre Brito 说：“一旦你有多个设计师一起工作，你就会开始意识到需要有人来制定更符合产品或你正在建立的品牌。”

建立一个设计系统需要工作和奉献； 这也需要合作。 Sial 强调，在整个过程中让所有利益相关者参与 ABB 系统的开发是一个优先事项。 “这真的是我整个团队的迭代工作。 一切都是为了倾听他们的意见，我们花时间彻底学习和测试并开发这种结构，”他说。

拥有一个包含大量文档的结构，包括历史和最佳实践，是 Figma 设计系统的核心。 “这是成功的，因为人们可以在一个地方阅读所有文档，”Sial 说。 “他们可以看到一切，从用例到设计，再到移交和最终组件页面。 人们可以看到一个组件的整个生命周期。”

您可以在此处完整浏览 Abdul Sial 的 Figma 文件：组件模板。

进一步阅读 Toptal 设计博客：

• 一致性是关键——如何构建 Figma 设计系统
• 结构的力量——设计系统模型指南
• 了解设计系统和模式
• Figma 作为设计工具的力量
• 迷你教程——在整个设计过程中利用 Figma 的功能