级联组件：组织Figma变体的不同方式 关于组件组织的实验。

TL;DR: 在本指南中，我将分享一种通过嵌套和组织变体来构建 Figma 组件的方法。这种方法可以方便地对组件进行修改和更新。

请注意，虽然其他人可能已经发现了类似的方法，但本文介绍的解决方案是基于我自己的试验和错误过程。

此外，虽然可能有其他方法使用插件来组织和管理组件，但本指南的重点是在不使用第三方工具的情况下创建一个组件库。

1. 为什么 Figma 组件需要组织？

作为设计师，我们的目标是通过发现和理解问题来解决问题。在我之前担任UX/UI设计师的时候，在Figma中创建我们的设计系统库时出现了一些问题，我相信你们中的很多人也有这样的经历。总结一下，主要问题有

a) 大量的组件变体–例如，一个按钮可以有多种实例，如2种主要风格（方形和圆形），3种类型（包含、勾勒和文本），3种状态（空闲、危险、禁用），以及3种不同大小（大、中、小）。这些变体中的每一个都是主按钮组件中的一个独立实例，因此总共有54种不同的变体。

b) 改变和更新变体的困难 – 也许在大公司里，设计系统已经很成熟，改变可能没有那么频繁，然而，当一个设计还在发展时，可能会出现这样的情况：随着设计的发展，组件必须被调整。例如，在一个组件被创建之后，可能有必要添加一个领先/结束的图标，创建一个新的状态或新的尺寸。在一个变化并不罕见的环境中，这种工作会变得令人厌烦。虽然许多修改可以通过选择全部或部分变体来完成，但往往需要对每个变体进行单独的手动交互。

虽然按钮组件可以作为一个例子来说明这个问题，但它是一个相对简单的组件。例如，一个选择字段可能更加复杂，有许多实例、状态和元素。想象一下，你必须管理按钮、输入和选择字段、选项卡、标签和所有其他组件。此外，想象一下，作为一个自由职业者，每当你接手一个新的合同时，都必须重新创建或改变你的组件。难道不能让它变得更容易吗？

2. 构建组件以使管理更容易

Figma 是一个强大的工具，它改变了我们的设计方式，帮助我们简化了工作。如果它如此强大，一定有办法处理我提到的问题，对吗？当然! 下面，我将分享一种创建组件的方法，它可以使变化回荡，导致更少的变体，并使其更容易组织和更新。

总结一下，有点技术性，你将创建分离的组件，每个都使用之前的升级不同的方面。正如文章的标题所示，我们将用我们的组件创建一个级联逻辑来堆叠变化，从而减少变体的数量。

例如，使用这种方法，一个按钮组件将只有14个变体，而不是上面列出的54个，看起来像这样：

3. 使用级联逻辑创建按钮组件

现在，让我们开始工作吧。在Figma中打开一个新的设计文件，然后跟着我一起做。第一步是创建一个我称之为 “基础组件 “的东西，它将拥有按钮组件的所有最基本元素。这第一步将设置大小的属性，有3个变体：

第1步 – 基础： 开始时，创建一个框架，添加一个标签，和一个图标。你不需要注意具体的数值，但你可以按照上面的图片例子进行测量。为了充分利用这种方法，添加一些属性和关键的自动布局功能。在这里使用样式（颜色和文本）也是合适的。如果你想让它和例子中的一模一样，请遵循下面的指南：

First, create a frame of any size, add an icon (20x20px) to act as our 
leading-icon, and a text (16pt body size/20pt line height) to be our 
label. Keep in mind that the icon can be a component of its own, so you 
can also add an instance swap feature.
Now, add the auto-layout feature (shift+A) and set these values:
- Space between items: 8px
- Horizontal padding: 24px
- Vertical padding: 10px
Set the following frame size constraints (at the top of the sidebar menu):
- Horizontal resizing: FIXED (to adjust to your own UI gridstyle)
- Vertical resizing: HUG
Inside the frame, select the icon frame, and in the sidebar menu panel 
add the boolean property "show-leading_icon" in the layer section, so we 
can choose whether the button will have a visible icon or not. You can 
also add an instance swap property to the icon to change which icon will 
be visible.
Now, select the text, and in the layer section of the sidebar menu add 
the boolean property "show-label" (so we can make icon buttons).
In the content section, add the text property "label_text" so you can 
change the button label with ease

现在，我们需要创建两个额外的变体来建立三种不同的尺寸。将你上面创建的按钮设置为 “中等 “尺寸的按钮。创建一个较小的和一个较大的版本。同样，如果你想完全按照这个例子来创建，请按照下面的步骤进行：

In the "smaller" variant: set the size of the icon to 16x16px.
Set the text/label size to 14pt and line height to 16pt. 
Set the vertical padding in the auto-layout to 8px. 
Name the variant as "small".
In the "bigger" variant: set the size of the icon to 24x24px. 
Set the text/label size to 18pt and line height to 24pt. 
Set the vertical padding in the auto-layout to 12px. 
Name the variant as "large".

第2步–风格： 现在，让我们进入第二步，开始我们的级联逻辑。选择基本组件的任何变体并复制它，粘贴它以创建一个实例（确保它是一个实例，而不是另一个组件；将它粘贴到另一个框架内通常会有帮助）。现在，选择你刚刚复制的实例，并从它那里创建一个新的组件（ctrl/cmd+alt+K），并命名为 “style”。这个组件的层应该是这样的：

现在事情将开始变得有趣。在这个新组件中，我们将对顶层进行一些调整，然后对基础组件层进行一些改变。首先，在侧边栏菜单中把组件的自动布局尺寸约束设置为水平=FIXED和垂直=HUG。然后，选择组件内的基础层，将水平约束设置为FILL（这将确保按钮会调整到你设置的水平尺寸）。

通过这些调整，基础组件将填满父容器的整个宽度，允许你根据你的网格来调整按钮的宽度，让你在设计方面有更大的灵活性。此外，垂直尺寸会根据所选变体的尺寸自动调整，在垂直尺寸上也能保持一致。

之后，让我们创建两种不同的按钮样式：方形和圆形。简单地创建一个新的变体，确保选择组件内的基础层，并将边框半径改为200（让它成为一个大数字，这样无论按钮的大小都是圆形的）。不要忘记给变体起相应的名字（”方形 “和 “圆形”）。

为了最终完成这一步，让我们使用另一个属性：新添加的（和测试版）”从嵌套实例中暴露属性”，并选择显示来自基础实例的属性。通过这样做，你将能够把基层中的属性控件继承到 “样式 “组件中。现在，你应该有像下面这样的东西：

我相信你能理解现在发生了什么。两个按钮样式（方形和圆形）从基本组件中继承了尺寸属性，不需要明确地创建它们。

第三步 – 类型和状态： 我们在层叠阶梯中的下一步，也是最后一步，是为我们的按钮组件添加类型和状态。首先，像上一步一样，从我们的样式组件中选择一个变体（可以是圆形或方形的，这并不重要），复制并粘贴它，再次确保它是一个实例，而不是一个新的组件。

让我们用复制的实例创建另一个组件，将其命名为 “按钮”（因为这是最后一步，我们需要给它一个组件的真实名称）。这些层应该是这样的：

确保像我们在上一步做的那样调整自动布局约束：将第一个/按钮层的水平约束设置为FIXED，将里面的两个层（样式和基础）设置为FILL。不要忘记添加 “从嵌套实例中暴露属性 “的属性，这样你就可以很容易地控制从基础和样式组件中继承的属性。

接着，我们将创建组件的不同类型：包含、轮廓和文本，以及它的状态：闲置、危险和禁用。因此，创建两个新的变体属性，分别命名为：类型，对于选定的变体应该是 “包含”，状态，应该是 “空闲”。现在，我们将开始创建其他状态。添加一个新的变体，把它的颜色改为红色，把它的状态属性命名为 “危险”。添加另一个变量，将其状态属性命名为 “disabled”，将按钮的填充颜色改为灰色，将标签/图标改为更深的灰色（当处理禁用状态时，我通常将它的不透明度改为70%）。该组件应该看起来像：

对了，现在我们已经建立了我们的状态，复制其中一个变体并将其类型属性命名为 “轮廓”。为了准确地完成我们的修改并添加新的组件类型，你将需要在基础层中对其进行调整，改变图标和标签/文本的颜色，删除其填充并添加相同颜色的笔划（因此，蓝色代表空闲状态，红色代表危险状态，灰色代表禁用状态）。为轮廓类型创建3种状态的变体，这样我们的组件就有6种变体了：

最后，我们需要创建我们最后的类型变体：文本。选择所有3个轮廓变体，复制并粘贴它，将类型属性名称重命名为 “文本”。现在，只要去掉每个文本类型变体的笔划，就可以了，你的按钮组件就完成了：

第四步 – 我们完成了什么？所以，在所有这些努力之后，我们的组件已经可以使用了。从本质上讲，正如开头所说，我们创建了一个有潜在的54种变体的组件，但只使用了14种。但不仅如此，你对基础组件所做的所有改动都会产生反响，并应用到组件的后续步骤中。请自由地进行实验，添加新的元素和属性，或者删除它们，这样你就可以观察到变化被实时地以级联的方式应用。

哦，如果你在一个库文件中使用这个组件，只需记住隐藏基础和样式组件，这样就只有最终的按钮组件可以使用了。这将确保库的用户只能接触到组件的最终版本，使他们更容易操作，并减少出错的风险。

4. 最后的想法和考虑

正如我之前提到的，按钮是一个足够简单的组件，可以在本文中作为一个例子，但这个方法只要稍加调整就可以应用于其他组件。从本质上讲，任何有变体的组件都可以用这个方法来创建并受益。我的目标是进一步细化它，所以第一步/基础只有一个变体。

可悲的是，有固定值大小的元素，如图标，不能在以后的步骤中改变，所以它们需要在第一步中设置，要求更多的初始变体。

另外，这种方法也有自己的局限性。虽然 Figma 是一个强大的工具，但它不一定能按预期处理不同的属性。组件定型后，当你在使用它并选择你想要的状态、样式、类型等时，来回走动可能会导致组件出现故障。我已经意识到，应用变化的顺序很重要，所以用属性做一个连贯的顺序很重要。尽管有这些限制，这种方法仍然可以大大改善你的工作流程，使你更容易管理和更新设计组件。

你可以在下面看到，按照提议的顺序选择每个属性的过程很顺利。

尽管如此，我的建议是事先知道你将使用什么属性，并选择它们，不要来回改变。

改变颜色有时也会出现问题，可能无法正确应用。例如，当你改变状态时，有时正确的颜色并没有应用到图标上。尽管有这些问题，这个方法已经有了长足的进步，今天它比我刚开始使用的时候好用多了，特别是最近的测试版功能，允许你从嵌套的实例中暴露属性。在这次更新之前，任务是手动选择每个图层并应用变化，这很耗时，但可以应付。

也许通过这篇文章，Figma团队会注意到这一点，并以某种方式进行修补？😅

5. 接下来的步骤

我计划创建一个视频教程，逐步指导如何创建该组件，使其更容易操作。教程完成后，我将在此分享该教程。

另外，随着这篇文章的发表，我希望能收到关于如何改进级联方法的反馈和见解。如果您正在阅读这篇文章，请毫不犹豫地分享您对此事的想法和意见。 😊

不要犹豫，请查看Figma自己的文档，它提供了大量的信息来提高你的技能。为了测试和完善这种方法，我个人建议阅读以下章节： 创建和使用变体》、《探索组件属性》和《创建和管理组件属性》。

我想感谢您的阅读，我希望这篇文章对展示Figma中组织组件的不同方法有所帮助

再见! 👋

翻译：云瑞设计
原文：uxdesign