一致性是关键——如何构建 Figma 设计系统

设计师都知道，一个好的设计系统会对我们交付的产品质量和我们开发产品的速度产生巨大影响。 由于创建一个全面的设计系统的案例已经多次明确，谷歌、GitHub、IBM 等公司使用它们以更快的速度创造更好的产品，问题已经从“我们为什么要设计系统？” 到“我们如何才能创建一个伟大的设计系统？”

那么究竟什么是设计系统？ Will Fanguy 将其定义为“一组可重复使用的组件，以明确的标准为指导，可以组装以构建任意数量的应用程序。” 设计系统可能不仅包括 UI 组件库和模式库，还包括样式指南、最佳实践、代码等。 就像建筑师的建筑蓝图一样，设计系统也是产品团队在构建产品时的“单一事实来源”，并有助于保持一致性。

GitHub 甚至分享了他们的 Figma 组件库——基于 Figma 的设计系统的一个很好的例子。 更广泛的工具，如 Storybook 和组件驱动开发，对于实现和记录设计系统也是非常有用的资源。

设计系统保持设计的一致性，并且应该对参与创建产品的每个人都有用。 它是一个工具包，可帮助设计师更快地创建新屏幕、流程和原型。 一个好的设计系统可以帮助开发人员理解设计决策背后的逻辑，并有助于创建更具凝聚力的产品。 它加快了设计过程，让设计师有更多的时间进行实验。

对于那些使用 Figma 的设计师，让我们看看在 Figma 中创建组件库如何成为综合设计系统的关键部分。

组件库的强大功能

有时，过早投资创建设计系统可能会适得其反。 在设计产品的早期阶段，这个过程仍然是流动的。 例如，如果正在试验两个主要导航栏，将两者都添加到组件库中是没有意义的，因为这会使团队中的每个人都感到困惑。 最好等到产品设计已经确定——最好是经过测试并最终确定。

如果一个产品是成熟的并且没有现有的组件库，那么设计系统应该已经由当前的实现确定。 但它还没有编纂。 此时，定义常见的 UX 模式并将产品提炼成一组在整个产品中经常使用的组件将是有利的。 此外，如果组件库保存在所有人都可以轻松访问的中央位置，那将是理想的选择。

设计系统主要是一个工具包

尝试使用像工具包这样的设计系统是对其有效性的一个很好的试金石。 如果多个设计师经常使用它来加快他们的流程，那么它做得很好。 如果开发人员可以在颜色、字体样式方面参考它，或者在设计人员投入较少的情况下进行工作，这也是一个好兆头。

包含高度复杂的组件或在产品中只能使用一次或两次的组件通常没有用处。 越是可重用的东西，它就越属于设计系统。

Figma 最近为组织发布了设计系统分析，团队可以在其中看到设计系统的不同部分的有效性并帮助优化它。

为什么 Figma 非常适合创建组件库

Figma 是一个强大的设计工具，具有许多强大的功能，但在设计复杂产品时，有一部分元素变得特别有用：样式、组件和库文件。 这些功能有助于使设计系统保持最新，有助于保持设计之间的一致性，并提供从中心位置更新多个设计的快捷方式。

• 样式是在一个地方定义的颜色和字体样式（字体、大小、粗细等），可以应用于许多对象。
• 组件是按钮或聊天气泡之类的东西，可以由样式、形状和文本等对象以及其他组件构建。
• 库文件允许在多个文件之间以及与团队或组织共享样式和组件。

Figma 的核心是协作和共享。 任何人都可以在浏览器中编辑设计文件，自由共享，并且可以实时更新，因为多个用户可以同时编辑它们。 这打开了设计系统，不仅可以在设计师之间进行更有效的协作，还可以与开发人员和其他利益相关者进行更有效的协作。

创建库文件

在 Figma 中，可以创建一个或多或少用作设计系统开始的库文件。 在这里，我们可以定义样式和组件，然后在整个团队或组织中共享并在多个设计中使用。 样式和组件可以在一个地方更新，然后这些更改可以自动引入所有单独的设计文件。

这有几个关键优势：

1. 速度。 它消除了设计师手动更新可能数百个设计的需要，从而节省了时间。 通过在单个库文件中管理组件，只需单击几下，在一个位置更新颜色即可在使用组件库创建的每个设计中传播。
2. 一致性。 它通过自动化任务来减少出错的可能性。

组织

在 Figma 中构建设计系统时，在工具和理论之间进行比较是很有用的。 例如，Figma 中的 Styles 可以被认为是最基本的层次，甚至比 Brad Frost 的 Atomic Design 模型中的 Atoms 更基础。 这些诸如颜色和​​字体之类的东西有助于构成产品的美感。

一个简单的 Figma 组件将被视为原子设计模型中的一个原子，例如一个按钮。 一个更复杂的 Figma 组件将被视为一个分子或有机体，然后用于构建模板和页面。

组件库中一些最有用的东西是：

• 颜色
• 字体
• 品牌资产、标志等
• 导航
• 纽扣
• 通知
• 模态
• 表单元素和验证

在 Figma 中构建设计系统 - 入门

在此示例中，我们将创建一个简单的登录表单并解释可以推断和使用的组件和样式。

首先，让我们考虑一下可能从此表单中可重用的组件和样式。 有一张包含徽标、表单域和按钮的卡片。 还有三种字体样式和一些可能有用的不同颜色和效果。

如上所述在库中确定要包含的样式和组件后，就可以创建库文件并开始填充它了。

创建 Figma 库文件

创建一个新文件并将其作为库发布。 创建新文件后，单击Assets选项卡，单击Library图标，然后单击Publish 。 这会在库文件中发布样式和组件，以便它们可以在其他文件中使用。

现在可以在库文件中创建样式和组件，并且可以在其他文件中使用并从中央库文件进行更新。

如何创建 Figma 样式

在库文件中创建样式与在任何其他文件中创建样式相同，如下面的步骤所述。

• 选择要从中创建样式的对象。 样式可以是颜色、文本属性、效果和布局网格。
• 单击要在新样式中使用的属性旁边的样式按钮（正方形中的四个点），然后单击弹出窗口中的加号按钮以创建新样式。

• 这将显示一个命名样式的模式。 使用语义名称而不是表示名称通常很有帮助，例如，“Primary Color”而不是“Green”，这样可以更清楚地使用 Style 的用途。
• 使用屏幕右下角出现的弹出窗口将样式发布到您的团队库，或重复最初发布库所采取的步骤。

这是 Figma 关于如何创建样式的教程。

如何创建 Figma 组件

创建组件也很容易。 只需选择要从中创建组件的对象，然后右键单击并选择“创建组件”。

组件以与样式相同的方式发布到团队库。

这是 Figma 关于如何创建组件的教程。

一旦创建了一些样式和组件，就可以与团队共享库文件，并且可以在任意数量的文件中使用样式和组件。

使用 Figma 库

要在另一个文件中使用这些样式和组件，库文件需要链接到我们想要在其中使用新样式和组件的现有设计文件。只需再次打开库模式（资产，库图标）并打开切换开关用于要使用的库文件。

组件库现在可以使用了。 可以通过从屏幕左侧的 Assets 选项卡将组件拖到设计文件中来放置组件。 在更改文本样式、填充颜色、笔触、效果和布局网格时，可以以与本地样式相​​同的方式使用库样式。

当组件和样式在库中更新时，使用它们的文件需要接受更改。 Figma 将在库文件中进行更新时显示通知，并提供发布它们的选项。 发布后，任何使用组件和样式的文件都必须通过类似的通知或资产选项卡接受更改，以更新其组件和样式。 这可以防止意外发布和更新更改。

超越在 Figma 中构建组件库

Figma 仅涵盖成熟设计系统的组件库部分。 对于一个完整的设计系统，值得考虑可以合并的其他部分，例如品牌指南、内容样式指南和开发人员文档。

Mailchimp 的内容风格指南就是一个很好的例子，它通过内容详细说明了语气和品牌。 GitHub 有一些关于他们的组件库如何在代码中工作的很好的文档，谷歌的 Material Design System 也有一些很好的例子来记录设计系统背后的逻辑。

Figma作为一个设计工具已经成熟了很多，新的功能也在不断的增加。 添加可供整个组织访问的具有内置分析功能的 Figma 设计系统是向前迈出的一大步。 这些功能的添加表明 Figma 旨在成为一个成熟、全面的设计工具，并且正在朝着实现这一目标迈进。

• • •

进一步阅读 Toptal 设计博客：

• Figma 作为设计工具的力量
• 使用 Figma 简化协作设计
• 迷你教程——在整个设计过程中利用 Figma 的功能
• 迷你教程 - 使用 Figma 按钮组件
• 使用这些顶级 UX 工具掌握您的工艺