这个问题经常出现，答案因个人设计师的工作流程偏好而有很大差异。也就是说，我们通常建议在设计过程中尽早将事物转换为组件。一旦您在多个屏幕上重复了元素，就是开始考虑组件的好时机（即使您处于项目的保真度相当低的阶段）。设计可能会更改并经过许多改进，但在此阶段创建组件意味着您可以通过进行一次更改（使用原始组件）并在所有屏幕上更新它们（使用实例）来节省时间。

主要组件位于您创建它们的任何位置，通常在您的设计中，这使得它们可以随着设计的进行而轻松调整（除了将主要组件放在单独的设计系统文件中的大公司）。如果您觉得在项目的探索阶段过早地沉迷于组件，请稍后再担心它们——不要让它妨碍您设计过程的流动性。

当您的团队决定采用这些模式在其他产品中作为设计系统的一部分重用它们时，您可以考虑将它们从单个项目文件合并到一个更正式的文档中，专门用作共享库。在该过程中，您可以选择优化它们的结构/命名/属性，以便它们更易于使用并与其他组件保持一致。您如何设计更好的组件？让我们解开一些注意事项和最佳实践！

以原子方式构建组件

当您开始创建高质量组件时，尤其是出于共享它们的意图时，请考虑从可用作构建块的较小原子组件开始。您会注意到设计中想要保持一致的模式。例如，卡片的形状或按钮的形状。

一个好的策略是将这些重复的元素变成一个组件，您可以通过将它们的实例嵌套在其他组件中来重用。想象一下将一个简单的按钮形状变成一个组件（用作原子），并将它嵌套在您创建的每个按钮组件中。结果：所有按钮都使用完全相同的起点；如果该形状发生变化，则可以通过更改单个原子组件来更新它。

继续按钮示例，让我们假设您还有主要和次要变体、桌面和移动版本，每个版本都有 4 种状态（正常、禁用、按下和聚焦）。如果您没有以原子方式构建它，您可能会有 16 个不同的按钮组件，否则您将不得不编辑这些组件。以这种方式构建组件将使您的系统更易于维护。

快速提示：通过在组件名称前加上“_”或“.”，它们将被排除在发布之外。考虑设计人员需要使用哪些组件；他们可能不需要访问所有较小的原子组件。通过从发布过程中排除这些，您可以改善库用户的体验，因为您将消除这些显示在组件面板中。

构建组件以处理状态、主题和变化

在考虑 UI 组件时，您很可能也在考虑如何处理相关组件——这些可能是附加状态、主题（如亮或暗）或其他变化。处理它们的最佳方法是什么？设计师将如何与他们互动？

在单个组件中嵌套状态和变化

当你将一个组件的实例放入你的设计中时，Figma 允许你在图层面板中访问它的图层。这使您能够查看和展开图层面板中的每个实例。您可以考虑在组件中嵌套元素，用户可以在需要时打开（通过切换图层可见性）；您甚至可以将每个状态嵌套在单个组件中。这种方法确实有一些好处，但也有一些缺点。

优点：有一个 Figma 组件可以与用户共享。这意味着一个组件要维护，一个组件供设计人员使用，并且只能在组件面板和实例菜单中找到一个。

缺点：这种方法会使设计人员更难发现每个组件的层堆栈内的不同状态。在它们之间切换可能更麻烦，因为设计人员必须知道在组件内切换适当的层。除非设计人员在图层面板中展开组件，否则这些状态并不总是立即显现。此方法还会导致组件中出现大量重复层。例如，一个由文本框和矩形组成的按钮可能需要为每个状态重复这些图层——当用户覆盖文本时，稍后想要显示不同的变化/状态，设计人员将需要重新输入覆盖. 使用以下方法可以更顺畅地处理此用例。

状态和变化的独立组件

另一种方法，也是我们通常推荐的方法，是为每个变体或状态创建单独的组件。

优点：使用这种方法，可以从组件面板和实例菜单轻松访问所有变体；更容易找到它们并在它们之间切换。设计人员无需切换嵌套层的正确组合，只需从实例菜单中选择不同的相关组件即可切换到。如果两个组件中的文本图层命名相同，则此方法可以在切换实例时保留文本覆盖。这种方法也往往更高效；我们已经看到了一些具有数百个隐藏层的非常复杂的组件的示例（使用嵌套方法），使用这种方法可以大大简化。

缺点：使用这种方法，您最终将需要共享和维护更多组件。但是，如果将此方法与上述原子结构结合使用，则可以以更易于维护的方式构建组件。最后，由于许多视觉变化在缩略图预览中可能非常微妙且难以辨别，请考虑为您的组件添加有用的描述（它们将作为悬停在组件面板中的工具提示出现）。

使用组件处理主题

有时您可能希望创建具有不同视觉属性的组件变体——例如：用于主题、用于明暗模式或用于不同品牌。您可以用来实现此目的的一种技术是选择现有组件实例，覆盖您要更改的视觉属性，然后从中创建一个组件。这将在新组件中嵌套原始组件的实例。这将保留新应用的覆盖，但仍会保持与原始组件的连接 - 这使得设计更易于维护，因为您只需在一个地方调整设计。下图突出显示了几个潜在的用例。

组件最佳实践

现在您已经熟悉了几种基线方法，让我们讨论一些使这些组件更易于使用和维护的最佳实践。

保留文本覆盖

在将组件变体/状态创建为单独的组件时，如果您计划在它们之间进行交换，您将需要保留文本覆盖 — 这样您就不必重新输入文本。为了确保您的文本在此交换期间保持不变，请确保每个组件内的文本图层都重命名为彼此相同（因为默认情况下，图层名称将继承您最初在文本框中键入的任何内容）。

 

说明

您可以在属性侧栏中为每个主要组件添加描述。这些描述显示为组件面板中悬停时的工具提示。这也是包含有关其预期用途的信息以帮助用户选择正确组件的好地方。

约束和布局网格

花时间设置适当的约束，以确保在调整组件大小时可预测和预期的行为。由于组件的功能与框架相同，因此您可以在组件中添加布局网格，甚至可以对与网格相关的元素应用约束。它们还可用于帮助可视化组件内的边距或填充。

 

剪辑内容

您可以在属性面板中切换剪辑内容复选框，以定义是否裁剪/隐藏延伸到框架边界之外的元素。如果您的组件具有重复的元素，而您可能希望在调整大小时显示这些元素，则此功能非常有用。例如，表中的行数可能因用例而异——使用此方法，您可以简单地调整组件的大小以显示您需要的行数。确保首先为组件中的所有元素设置约束！

 

 

样式和样式提示

共享库中的样式

您还可以在共享库中包含颜色和文本样式等样式——它们的创建要简单得多，但仍有一些最佳实践可以使它们更容易使用。

文本样式： Figma 已将对齐和颜色等属性与样式中包含的属性分离，因此您无需为每种颜色或对齐方式创建单独的未连接文本样式。这导致更少的样式，使它们更易于管理。许多用户将拥有两组类型样式，其中包括用于移动设备的类型渐变和用于桌面的另一种类型。

颜色样式：确保为设计系统中所有记录的颜色创建了样式，并适当命名它们，以便于识别、使用和实施。

效果样式：效果样式允许您始终如一地重复使用图层模糊、背景模糊、投影和内部阴影等效果。例如：Material 设计系统包括一整套阴影，以与堆叠在 UI 中的不同层重合——重复使用阴影来创建与特定元素（如模态和按钮）相关联的不同“高度”的效果。

网格样式：经常被忽视的网格样式可以帮助标准化跨多个项目和视口的布局网格。如果您有从桌面到手机使用的特定网格，请考虑定义网格样式，以便轻松共享它们。

风格提示

样式名称：样式名称对于与设计系统中的预定义属性对齐至关重要。您还可以使用名称中由正斜杠分隔的前缀来对样式选择器中的样式进行分组（注意：您只能添加一个层次结构）。例如，如果在多个样式前添加“Alerts/”，它们将一起出现在“Alerts”副标题下。您可以使用这些前缀来：

• 按色调分组颜色
• 按主题或类型对颜色进行分组
• 将可访问的颜色组合在一起
• 按字体系列或大小对类型样式进行分组
• 按视口大小分组网格样式

样式说明：为您的样式添加说明——这些说明将以与组件相同的方式出现在工具提示中。这些描述可以通过显示附加信息来帮助设计师选择正确的样式，从而帮助阐明他们的预期用途。

注意：当开发人员检查您的设计时，在代码面板中，样式名称将在 CSS 模式下显示为注释，并在表视图中显示为行项目。除了属性之外，还会显示颜色、类型和效果样式的名称。

占位符图像的图像填充：您可以为图像填充创建样式。假设您有一些用户头像或常用的占位符照片。您可能不知道它们需要应用于什么形状、纵横比或大小。通过创建图像填充，您可以轻松地将它们应用于任何形状。

用于可视化间距的布局网格：您可以创建由多个布局网格组成的网格样式。例如，可以将列和行网格应用于框架或组件，以帮助可视化边距或填充。这些对于将标准化间距定义为系统一部分的团队非常有用。

 

组织和创建多个库

要创建您的第一个库，请从团队库模式发布任何 Figma 文档。此文档中的所有主要组件和样式随后将可用于其他文档。当您跨产品或团队扩展设计时，尤其是在大型组织中，您需要找出组织和分发它们以供所有人使用的最佳方式。您应该创建多少个库？如何组织我的组件？请记住，使用这些库的设计者是您的最终用户。

我们经常被问到团队是应该共享一个库中的所有内容还是使用多个库。答案当然是，视情况而定！让我们看看一些需要考虑的因素。

一个大多个库里的一切

一些团队，尤其是较小的团队，为了简单起见，通常会创建一个单独的库来容纳他们的所有组件和样式。这种方法有一些好处，但随着规模的扩大，也有一些大的缺点。

优点：只有一个库可供用户启用，它拥有他们需要的一切。对于特定组件所在的位置，永远不会有任何混淆。这也意味着只有一个库需要维护。

缺点：对于需要支持许多不同平台和产品的大量组件和样式的大型组织，该库可以快速增长。如果用户只需要这些组件中的一小部分，他们仍然需要筛选很多他们永远不需要使用的类似组件。

单独的库

许多团队，尤其是中大型团队，经常决定最好的方法是将他们的组件分解成多个库。这往往会更好地扩展。

优点：通过将组件/样式分离到不同的文档/库中，可以只为正确的用户或团队子集启用所需的库。例如，假设您有专门的团队只致力于移动产品。那些在移动设备上工作的人可能永远不必使用为桌面设计的资产。通过将它们拆分为单独的文档，您可以将它们发布到单独的库中。然后，设计人员只需为他们启用适用的库，这样他们就不必筛选不需要使用的组件。

缺点：对于那些负责维护和发布库的人来说，需要管理的人会更多。

优化成功：默认情况下，可以为 Pro 团队或 Figma 组织中整个公司的所有团队启用库。要了解有关如何处理此问题的更多信息，请务必阅读我们关于构建团队的文章。

组织库中的组件

下一级多个库组织发生在每个多个库内部。在文档中，您可以通过多种方式组织主组件，从命名方案到页面和框架。您甚至可以将这些方法相互结合。

正斜杠命名

对组件进行分组的第一种也是最常见的方法是使用正斜杠组件名称将它们组织成层次结构。如果您来自 Sketch，您可能已经熟悉这种方法。假设您有主要和次要按钮，每个按钮都各不相同。您可以选择这样命名它们：

• 按钮/主要/默认
• 按钮/主要/悬停
• 按钮/辅助/悬停
• 按钮/次要/活动

优点：此方法是组织组件的最快方法。只需重命名组件，它们就会在您的实例菜单中组织成层次结构。

缺点：虽然此方法是组织组件的快速方法，但它可能导致较大系统的组件名称过长。组件名称超过图层面板的宽度的情况并不少见，这使得扫描和解析图层面板变得更加麻烦。如果你是从 Sketch 迁移过来的，这个方法并没有什么问题，它会帮助你更快地启动和运行；但是，如果您打算花更多时间布置主组件并希望在它们旁边包含一些附加信息，则下一个方法可能是更好的方法。

页面和框架

我们推荐的组织组件的方法是使用页面和框架作为组织容器。

优点：此方法允许您将组织与组件命名方案分离。这导致更短的组件名称更容易在图层面板中扫描，我将允许您使用更接近系统代码库的命名方案。

例如，您可能有一个名为“Buttons”的页面，在其上有一个专门的框架，用于显示这些主组件所在的每种类型的按钮（“Primary”和“Secondary”）。这将改善在组件面板中导航缩略图时的体验。页面名称将显示为顶级标题，而框架名称将显示为可折叠的子标题，其中包含位于下方该框架​​内的所有组件。

此功能通过在主组件旁边布置随附的注释、注释、正确和不正确的使用示例以及其他使用文档，补充了许多用户已经开始以可视化方式组织他们的库的方式。通过这种方式，用户可以右键单击文档中的任何组件实例并选择“转到主组件”，这将打开库文档。他们可以在此处查看此附加信息，这可能有助于他们按预期方式使用组件。

此外，驻留在同一包含框架中的组件将被视为相关组件。当您单击这些组件之一的实例时，相关组件的列表将显示在实例菜单的顶层，以便更轻松地在它们之间进行交换。这意味着您不必通过完整的实例菜单来选择正确的组件。

如果您的组件层次结构需要额外的级别，您仍然可以使用此方法并将其与正斜杠组合。如果您添加正斜杠，Figma 将恢复到您的命名方案，以确定后续级别的相关组件列表。

快速提示：如果您要从使用正斜杠组织方法的现有或导入的 Sketch 库迁移，并希望切换到页面和框架方法，您可以使用 Figma 的批量重命名功能来加速此转换。为此，只需选择要重命名的组件，然后从上下文菜单中选择重命名，或按 cmd + R (Mac)、ctrl + R (Win)。在这个重命名对话框中，您甚至可以使用 Javascript 正则表达式来删除任何前缀和正斜杠。

 

最后的想法

虽然构建和组织共享库的方法有很多，但我们希望本指南为您提供一些关于如何以最适合您的团队或组织的方式完成此任务的想法。如果我们从构建设计系统的用户那里学到了一件事，那就是：永远不要忽视最终使用您创建的系统的最终用户。确保为它们启用了正确的库，并且组件易于使用、查找和理解。实现这一点，您将在实现组织设计工作的更大一致性方面取得巨大进步。