组件属性的引入解决了这个问题。现在，我可以在设计系统中的任何组件上定义属性，并根据需要创建不同的变体。这使我能够更好地管理和组织设计系统，并在不同的上下文中使用同一个组件。例如，我可以在按钮组件上定义一个属性，例如大小或颜色，并根据需要创建不同的按钮变体。这为我提供了更大的灵活性和效率，因为我不需要为每个变体创建一个独立的组件。

此外，组件属性还可以与自动布局一起使用，这使得设计过程更加快速和高效。我可以定义一个自动布局组件，并在其中使用不同的属性来创建不同的变体。这使得我可以轻松地在不同的设计场景中快速生成多个变体，而无需手动调整每个变体的布局。

总的来说，Figma的组件属性为我带来了更多的灵活性和控制权，使我能够更好地管理和组织设计系统，并提高了设计的效率。我迫不及待地想尝试更多的功能，并看到它们如何进一步改善我的工作流程。 文本覆盖

尽管变体功能非常强大，但它存在一个主要缺陷，那就是它要求对组件的图层和结构非常小心地处理。如果你在库组件中有一段文本，例如占位文本写着“按钮名称”，然后你在本地实例中将文本更改为“确认”，然后切换到具有不同图层结构的另一个变体实例，你将失去文本覆盖，并且实例会再次默认为“按钮名称”。这是一个很难用文字解释的问题，但Ridd (opens new window)录制了一段详细的视频 (opens new window)来描述这个问题发生的原因以及如何防止它发生。

在2022年5月的Figma更新之前，使用切换来显示和隐藏图层可能会导致破坏。 在设计图和图表组件库中，如果你对底层图层不小心处理，可能会出现意想不到的效果。

上面的示例展示了我发布的一个图表图例组件面临的一个大问题。我创建了一个图表图例组件，并使用变体来在图例中切换项目数量以及开关数值的显示。由于带有数值的组件版本与不带数值的组件版本具有不同的层级结构，当我使用开关切换时，已经填写的数值会丢失。在许多情况下，我会更新一些屏幕，切换一些变体，但在没有意识到的情况下，突然间我的页面上充满了占位文本，而不是我在高保真原型中所需要的真实值。

当我的团队意识到这个问题时，我们已经构建了一个复杂的设计库，其中的组件容易受到这种覆盖弱点的影响。我们启动了一个长期计划，最终更新我们的组件库。 用Ridd的Mighty Fine Variants (opens new window)方法，但现在有了Figma的新更新，这个问题有了更简单的解决方案。

变体膨胀问题

在我解释新的Figma版本的新救命功能之前，我想先解决我在组件库中遇到的另一个重大问题：变体膨胀。变体非常好，因为它们将一个组件的所有变种压缩成一组参数。如果一个按钮有四个状态，比如Rest、Hover、Selected和Inactive，那么这些就成为按钮的四个变体。但是这些变体会成倍增加。如果这些按钮还有大尺寸和小尺寸，那么现在就是4x2=8个变体。再加上一个暗黑主题，现在就是16个变体。我曾经构建过一个复杂的组件，它有512个变体。

不需要放大细节。这只是一个显示标题、副标题、显示行数等所有组合的工具提示组件的512个变体。

除了实际工作需要的时间外，创建和维护这么多变体也是一项巨大的挑战。但幸运的是，Figma的新更新提供了一个更简单的解决方案。 在Figma的最新更新中，变种的概念与组件的其他三个属性并列：文本属性、布尔属性和实例交换属性。这些属性允许您在组件上设置可自定义的参数，而无需创建额外的变种。

文本属性

通过使用文本属性，您可以在组件中设置可以自定义的文本内容。这使得在设计过程中，您可以快速更改文本，而无需创建多个变种。

布尔属性

布尔属性允许您在组件中设置可自定义的布尔值。这使得您可以在设计中添加或删除特定的功能或样式，而无需创建多个变种。

实例交换属性

实例交换属性允许您在组件中设置可自定义的实例。这使得您可以在设计中轻松更换组件的不同版本，而无需创建多个变种。

通过这些属性，您可以更加灵活地管理和定制组件，而无需创建太多复杂的变种。这样，您就可以更轻松地跟踪和管理组件的不同变体。

在过去，由于组件的复杂性和变种的数量，跟踪和管理所有变种变得非常困难。在上面的示例中，我不得不将每个布尔类型的变种视为二进制数，以确保我拥有所有16种Trues和Falses的组合，而不重复任何一个。

这里有一个Figma插件的想法：告诉我我在组件中缺少哪些具体的变种。在那之前，我只能用蛮力来解决这个问题。

幸运的是，多亏了Figma的新更新，这个头疼的问题将变得更加简单。 这是一个很棒的概念，但一开始很难理解。起初我也有自己的疑虑，直到我完全理解了这些新属性的工作原理。

文本属性的好处在于，无论何时你有可变的文本 - 按钮名称、图表图例、输入标签 - 那个文本层都可以被赋予一个“文本属性”，它本质上是一个可以在本地实例中自定义的键值对。在按钮的情况下，你现在可以选择说“按钮名称”的文本层，创建一个名为“按钮文本”的文本属性，然后一旦你发布了该组件，它就会携带一个设置为按钮文本 = 按钮名称的属性。

你只需选择组件的所有文本字段（Figma最近也让这变得更容易了），然后在属性面板的内容部分，选择“应用文本属性”。

另一个设计师可以将该库组件插入到他们的模型中，然后将属性更改为按钮文本 = 提交，或任何其他想要的文本。 以下是Markdown的中文翻译：

覆盖属性 一旦启用了文本属性，您可以单独或批量编辑每个按钮。您还可以选择从组件本身或属性面板编辑文本。您所做的编辑将双向更新。

布尔属性 布尔属性被创建为将您的组件转化为极简主义样本。在许多用例中，使用变体显示对象的两个版本：一个具有特定视觉元素，一个没有。这可能是一个带有或不带有图标的按钮，一个带有或不带有搜索栏的标题，或者一个带有或不带有错误消息的文本输入。如果您以前对Figma进行了仔细观察，您可能会想到：“如果这个变体是什么。” 如果你只需要显示一个可以切换开关状态的按钮，那么你只需要创建一个图标显示的版本。你可以选择图标对象，应用布尔属性，然后你的组件就会给你一个开关，可以切换图标对象的可见性。

就像文本示例中一样，如果你简单地选择上面的12个图标占位符，就会在属性面板的图层部分出现应用布尔属性的选项。

一旦你应用了这个布尔属性并给它一个名称，切换开关将自动出现在你的属性面板中，与组件的其他变体属性一起。

一旦布尔属性被创建，切换将自动出现在其他变体属性中。只需切换该图层的开关即可。

布尔属性目前存在一些限制。 我对这些新的 Figma 功能非常兴奋，我才刚开始探索它们。我还在学习如何在我的库组件中以功能性的方式应用实例交换属性。我与 Figma 没有任何关联，所以我不知道这些功能或其他功能将如何不断发展和改进。但是随着它们的发展，你可以期待我对它们如何使我的生活更加轻松的热情不减。我迫不及待地想看看它们的发展。 他们接下来提出的是什么？

他们接下来提出的是什么？

在接下来的章节中，我们将探讨他们的创新想法和下一步计划。在过去的几年里，他们一直在努力寻找创新的解决方案，以满足市场的不断变化需求。他们的团队不断尝试新的方法和技术，并且已经取得了一些显著的成果。

在过去的几个月里，他们的研究团队一直在进行深入的研究，以了解市场的最新趋势和消费者的需求。他们与各行各业的专家合作，进行了广泛的讨论和调查。通过这些研究，他们已经确定了一些重要的机会和挑战。

现在，他们的目标是利用这些机会，并应对这些挑战。他们的创新团队已经开始制定新的战略和计划，以满足市场的需求并保持竞争优势。他们计划在产品设计、市场营销和客户服务方面进行改进，并寻找新的增长领域。

他们的愿景是成为行业的领导者，并推动行业的发展。他们相信，通过持续的创新和与客户的紧密合作，他们能够实现这一目标。他们将继续投入更多的资源和精力，推动他们的想法并将其转化为现实。

无论他们接下来提出什么想法，我们都可以期待他们的创新和决心。作为消费者，我们有幸能够享受到他们带来的新产品和服务。让我们拭目以待，看看他们接下来会带来什么。