当Figma在Config 2022上宣布推出新的组件时，我感到非常兴奋。这个功能看起来很整洁，简化了变体，并在理论上给我们更多控制，以构建更直观和简单的组件。

[

](https://medium.com/@Marcin-Spiewak?source=post_page-----35111b1645b4--------------------------------)[

](https://uxdesign.cc/?source=post_page-----35111b1645b4--------------------------------)

然而，魔鬼总是隐藏在细节中。所以在与新的组件属性进行了几次交互之后，我发现它们更像是一个小的改进，但同时也存在着巨大的不一致性。在我详细审查新的组件属性之前，先快速总结一下它们是什么。

文本属性

“使用文本属性来指示应该编辑哪些文本图层”。所以现在 ## 布尔属性

现在我们可以选择组件的哪个部分具有真/假状态。这将帮助我们减少变体的复杂性。这个功能是一个颠覆者，真正的“巨型变体”杀手。- 一个Figma组件-3,360个变体 (opens new window).

实例交换属性

该属性使您有能力从父组件API（右侧面板）中交换嵌套组件。它适用于您的所有库和本地组件。因此，不再需要单击组件的各个层来查找可切换的部分。感谢新的组件 在将嵌套在你的新组件内部的组件标记为可互换时，你可以在选择父组件时在右侧面板上看到它。这使得工作非常方便。然而，这个功能只适用于组件，而不适用于变体。你可以从一个变体切换到另一个变体，或者从一个组件切换到另一个组件，但你无法访问变体内部设置的组件。那么这到底意味着什么，为什么这是个大问题？

回到过去-变体与组件

在Figma中交换组件其实并不是什么新鲜事。你可以从2018年就开始这样做（好的YouTube教程）。现在唯一的区别是你不需要找到特定的组件图层点击并替换它。然而，处理这么多组件非常混乱，所以在2020年Figma给我们了变体。简而言之，变体是特殊的组件。 用于将相同类型组件分组的变量。我们可以对它们进行命名并添加属性。现在在2022年，组件属性使我们回到了过去，如果我们想要使用它们，就必须放弃使用变量，因为它们根本无法一起工作。在第一个示例中，你可以看到，如果我将我的按钮作为一个变量，要从主要样式切换到次要样式，我仍然需要选择一个具有按钮的图层。

文本属性工作得很好，但无法访问变量属性是一个致命问题。

在第二个示例中，我没有将我的按钮分组为一个变量，然后我可以从我的模态组件属性中编辑一切。

我猜没有人会说没有变量的解决方案更干净 😉

Figma的一致性缺失

整个功能分为3个部分。

布尔特性非常棒，确实可以帮助我们创建更智能、更轻量的变量。

当你处理更大的文本块时，文本属性的界面有些混乱。

拥有一个可以使用的特性的意义何在， 大多数Figma设计系统都是基于变体而不是独立组件构建的。这是众所周知的良好实践。

混淆的传播...

这整个情况让我感到非常不舒服。

• 现在应该将哪些元素作为组件，哪些作为变体？
• 为什么Figma不能让我们在变体内部交换组件？
• 毕竟，变体只是一种特殊的常规组件包装？
• 我真的很喜欢在右侧面板中拥有所有编辑选项的想法，所以现在我应该摆脱大部分的变体吗？
• 如果我这样做了，我的资源面板会是什么样子（那么多个单独的组件）？——可能会像一个....
• Figma计划将来是否包括变体属性交换？
• 我们应该花时间重构我们的设计系统吗——利弊如何？
• 如果我们坚持现有方式，我们是否只能在少数情况下进行编辑？是的，你仍然可以使用变体属性来更改按钮状态，但这将减少从父组件级别进行编辑的整体思路。 给这个逻辑介绍给团队中的其他设计师？

“嘿，伙计们，我们有了这个新功能，所以有时你需要在父组件层级上进行一些更改，有时在嵌套组件上进行，所以你总是需要检查3次，点击所有图层。”

对我来说，这真的没有任何意义。特别是如果我们要摆脱变体，那么** 使用变体创建交互式组件** (opens new window)会发生什么？

这些问题和更多问题开始涌现。

结论

在我个人看来，发布这种功能而不考虑如何影响工作流程和社区是一个巨大的降级。一方面，我们可以看到，是的，有新的可能性，但整个系统解决方案还没有出现，所以Figma给我们扔了一些可以玩的东西，然后留下了这个封装和呈现的Beta版本。 以下是一个完全可用的功能。

我目前看到两个选项。使用布尔特性使您的变体更清晰（就像按钮变体案例中那样），并等待接下来会发生什么。我希望Figma能意识到这个错误，并修复组件交换的问题。我从Office Hours中了解到，他们计划在那里添加一些功能，比如提议交换组件的列表。（如果您想要从一个图标换成另一个图标，但不想在这种特定情况下使用这些图标中的哪一个。）

相关主题

• 变体是否激发了喜悦？ (opens new window)
• 使用Figma交互组件设计微交互 (opens new window)
• 为什么组件属性能拯救您的设计系统 (opens new window) 950e)

将以下的Markdown翻译成中文并删除第一级标题：950e)