编辑导读：随着互联网行业发展，设计系统这一概念越来越热门。通常设计系统由使用指导文档和可复用的组件库组成，对于定调产品设计语言和提升生产效率都极具意义。但设计系统的搭建并不是一件容易的事，本篇文章展现了Lyft 团队的设计师搭建其设计系统的方法论以及一些小技巧，能够对各团队搭建自身设计系统时带来一定的帮助。

2019 年底，我协助将 Lyft [1] 全部的设计系统从 Sketch 移动到 Figma 。具有 “讽刺” 意味的是，在离开 Airbnb 前，其设计系统的迁移也是我负责的**几个项目之一。这两次经历帮助我意识到一些在 Figma 中进行共享库（ Shared Library ）设计时每个人都该考虑的基本问题。

（[1]Lyft 是美国一家网约车公司，于 2012 年创立，类似于 Uber、滴滴）

在这篇文章中，我将介绍在创建多个 Lyft 产品语言和组件库时，自己运用的一些优秀案例。**，我还将介绍一些有用的小技巧，帮助各位对设计系统进行高效维护。

一、体系理念：系统中的秩序性

当我们开始着手在 Figma 中创建系统时，需要先退一步，通过几个例子重新评估 Sketch 中已做的工作，并重新审视此前确定的 布局、视觉层次结构 与 命名规则。我们意识到，为了在这些新的库中建立坚实基础，必须花时间在系统中再创建一个可适用于文件中每个元素的子系统。

左图为轮播页面组件的主要组件，右图为该组件的内部嵌套组件。需要补充的是，文件的画布区域还存在 #F4F4FA 的背景填充。

我们使用可视层次结构（ Visual hierarchy ）来设置每个组件页面，以帮助区分主要组件和内部嵌套组件。所有主要组件都放置在内部轮廓为 4px 且没有背景填充的框架中。这些框架充当组件标签纸。

内部嵌套组件 放置在白色背景的框架里。通过显示所有内部组件，使维护人员可获取到主组件内部可配置项的快照。这些内部嵌套组件的作用是 让用户能够灵活配置内部嵌套组件 ，以此重新配置主组件来达到最终所需的形式。同时内部嵌套组件能促进该主要组件的通用性，提升其维护与使用的效率性。

填充系统语言

在每个框架中，都使用了特定的边距。建立边距系统的好处是它可以统一画布上的所有元素之间（从一个页面到另一个页面，从一个库到另一个库）的视觉效果。

我们组件库的边距系数包括：

• 60px：内部框架间距（顶部，右侧，底部和左侧）
• 40px：框架标题到第一个主要组件之间
• 24px：框架标题到字幕之间（可选）
• 24px：垂直方向的主要组件之间
• 40px：水平方向的主要组件之间

图层从上到下视觉上重新排列

通常在 Figma 中，新创建的图层将默认创建在当前图层上方。而将图层根据正常的视觉框架层次从上到下、从左到右重新排列是一件繁琐的任务。

但在管理大量主要组件和内部组件时，以这种方式排列图层能帮助维护人员快速浏览有时比较混乱的画布。

焦点紧凑型按钮的命名规则

与用户在 Slack[2]上共同进行快速调研后，我们发现他们中的大多数人使用 资源面板（ Assets Panel ）来搜索和发现组件。因此组件的命名方式对这个工作流程就变得十分重要。

（[2]Slack 是一款企业协作应用软件，集合聊天群组、大规模工具集成、文件整合以及统一搜索功能于一体。允许团队和企业通过群组进行沟通，有点类似国内的钉钉和企业版微信。Slack 目前的日活跃用户数已突破 1000 万大关，付费人数已达 8.8 万人，且它的用户中有 65 家是来自财富 100 强的公司。）

我们创建了以下应用于所有组件的命名结构：

文件名称 / 页面名称 / 框架名称 / 组件名称（变量、样式、类型和状态）

其中：

• 文件名称（ file name ）是特定库的名称，用户需要在资源面板中启用该名称的库才能使用其模型文件中的组件（例如，核心 UI 组件（ Android / iOS ），核心 UI 组件（ Web ）， 核心用户界面颜色等）。
• 页面名称（ page name ）是组件的名称（即 “轮播页面指示器（ Carousel Page Indicator ）”，“按钮”（ Button ），“列表项（ List Item ）等”。
• 框架名称（ frame name ）是组件的**级分组，通常是按大小命名（即按钮的 4 种大小：Focus ，Focus Compact ，Drive 和 Drive Compact ）。
• 组件名称（ component name ）是主要组件及其变体的名称。由于变体的数量众多，我们使用反斜杠（/）将它们按照不同的类型定义并分类，例如按 “状态” 等。事实上即使这些变体被放在更多的类目里，也有助于相似变体组件的存储。它们更容易在「实例」下拉列表中灵活切换，或者更容易在「资源」（ Assets ） 文件夹中查找。

「实例」下拉列表中的文件夹显示结构

二、更具灵活性的组件

创建原子元素（ atomic elements ）是设计系统的基础。我们将 Lyft 的产品语言分解为原子元素，然后用于创建特定的组件。这些内部嵌套组件（即前文的原子元素）有助于大型团队之间保持设计的一致性（例如按钮这类原子元素）以及降低维护成本，尤其当这些内部嵌套组件在多个复杂组件（例如文本字段，文本区域，下拉列表等）之间共用时。

列表项组件包括 3 个操作区域：开始区，中间区和结束区

这个示例展示了内部组件是如何构成列表项组件的。我们为该组件设置了多个区域，以便对其进行重新配置从而创建不同的变体。在每个区域下，可以选择不同的内部组件。另外，还可以将其设置为相同大小，并使每个区域仅允许使用固定几种选择（例如驾车页面开始区域默认仅使用 4 个内部组件）。

起始区域所允许使用的内部组件

中间区域所允许使用的内部组件

结束区域所允许使用的内部组件

对于像「列表项」这样的复杂组件，内部组件非常有用，可以灵活地重新配置组件以适应各种情况。

三、“响应式设计” 相关

当我们在创建灵活的共享组件时，还要考虑让这些组件可以按照你想要的方式进行响应。我们可以在 Figma 界面的「设计」（Design）面板中设置这些选项。

Figma中的「设计」面板

由于大多数应用程序都需要支持各种屏幕尺寸和平台，为了更好将程序普及到所有用户，创建响应式组件（ Responsive components ）极为重要。而实现这一目的的方法是通过适当的定义，让组件图层根据你所设置的 “水平” 和 “垂直” 约束值，相应调整大小。

水平约束