设计系统 101：构建能够正常运行的 Figma 组件
组件可以是你最好的朋友，当你以策略性的方式使用它们并整理得井井有条时，或者当你只是随意混合一些随机对象并希望尽力而为时，它们可能成为你最糟糕的敌人。它们可以帮助你创建一致的设计并保存你提供的信息，或者不断崩溃并重置为默认值。
是否可能创建行为与预期完全一致的智能组件，而不需要花费整个世纪来构建它们？我敢说是的 😃
1. 组件 #
组件定义了你设计构建的属性 组件是创建可重用设计元素的方式。一个经验法则是，如果您计划在设计中使用某个元素超过一次，那么您可能应该考虑将其转化为一个组件。这简化了开发人员的交接，并确保项目之间的一致性。
带有隐藏图层的组件
UI元素通常有各种类型和状态。让我们以下拉菜单为例。它可以是折叠或展开的，其选项可以被选择或未选择。为了创建这些不同的状态，您可以尝试打开和关闭图层的可见性。这样可以限制您的设计库的复杂性，因为实例的所有状态都会放在一个组件中。
然而，这种方法会导致您最终拥有一个庞大的组件，其中包含了所有实例的所有状态。这使得组件变得复杂且难以管理。同时，这种方法还会导致设计库中存在大量冗余的图层。
为了解决这个问题，您可以使用隐藏图层的组件。隐藏图层的组件是一种特殊类型的组件，其中包含了所有不同状态的图层，但只显示其中一个。通过切换可见性，您可以在设计中轻松切换组件的不同状态。这使得组件更加简洁且易于管理。
要创建带有隐藏图层的组件，请按照以下步骤操作：
- 创建一个包含所有不同状态的图层组，并将其放入一个组件中。
- 选择组件，并在右侧的“图层”面板中，通过单击每个状态的眼睛图标来切换可见性。只保留一个状态可见，其他状态隐藏。
- 在设计中使用该组件时，您可以通过更改组件的可见状态来切换不同的状态。这样，您可以轻松地在设计中测试和展示不同的组件状态。
通过使用隐藏图层的组件，您可以将复杂的组件简化为一个易于管理的组件，并且可以轻松地在设计中切换不同的组件状态。这样，您可以更加高效地创建一致且易于维护的设计。 有时候，我们可能会创建具有隐藏层的组件。这些隐藏层可以用来控制组件的不同状态和样式。但是，隐藏层的使用并不是一个好的实践。它们会增加组件的复杂性，使维护变得困难，并且会占用文件的内存空间。相比之下，创建组件变体会是一种更好的做法。创建组件变体可以更好地管理组件的不同状态和样式，同时避免了隐藏层带来的问题。
在你的库中，应该尽量避免使用隐藏层。隐藏层会增加代码的复杂性，使代码难以理解和维护。相反，你可以使用组件变体来管理组件的不同状态和样式。组件变体可以更清晰地表示组件的不同变化，也更容易修改和扩展。
如果你对隐藏层的使用有疑问，可以阅读更多关于为什么应该避免在库中使用隐藏层的文章。这篇文章会详细介绍隐藏层可能带来的问题，并提供一些建议来改善你的组件设计。
总之，隐藏层虽然在某些情况下可能会有用，但在长期运行中它们往往更加困难并且占用内存。相比之下，创建组件变体会是一种更好的实践，可以更好地管理组件的不同状态和样式。避免使用隐藏层，使用组件变体来优化你的组件设计。