Figma中的组件属性作用是什么?

组件属性在Figma中的作用是什么?

Figma引入了变体后,改变了许多设计师(包括我自己)创建组件的方式。变体提供了将几个独立但相关的组件转化为单个资源的能力,该资源具有可以在实例级别进行调整的属性和值。变体是帮助设计师在设计工具中创建广泛且可自定义的组件库的有用工具,但由于每个变体都必须在画布上可视存在,并因此被表示出来,因此需要更多的组件维护和开销。例如,ima 你正在开发一个通知组件,包含成功、警告和错误状态,并且你希望能够选择隐藏或显示关闭按钮。基于这个组件,需要六种变体:每种状态一个,而且每种状态都需要“关闭按钮可见”和“关闭按钮隐藏”两个选项。

对于像通知组件这样的组件来说,复杂性是可管理的,但是很容易想象出包含更多可配置状态的更多可视化项的组件可能需要多少个变体。即使对于一个简单的按钮组件,可能需要数十个甚至上百个组合。在核心上,组件属性旨在帮助解决这种复杂性。

组件属性或变体? #

诚然,我在开始使用组件属性时遇到了一些困难,因为我不确定如何最好地思考这个新功能与以前使用的经验相比。 过去几周,我有机会更加熟悉创建包含组件属性的组件。对我最有帮助的是将这个新功能视为一种“额外的方式”,而不是“单独的方式”,以进一步组织和创建与库和系统相适应的组件和变体。如果你感到困惑,不要担心!为了帮助澄清这一点,让我们讨论一下不同类型...