组件属性在Figma中的作用是什么?
2023 年 9 月 27 日

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

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

对于像通知组件这样的组件,复杂性是可控制的,但是想象一下对于包含更多可配置状态的更多视觉项的组件可能需要多少个变体,甚至对于像按钮这样简单的组件,可能需要数十个甚至数百个组合。从根本上说,减少这种复杂性是组件属性的目标。

组件属性还是变体? #

诚然,我在开始使用组件属性时遇到了一些困难,因为我不确定如何最好地思考这个新功能与以前使用的经验相比。 ### 创建和创建变种

在过去的几周里,我有机会更加熟悉创建包含组件属性的组件。对我最有帮助的是将这个新功能看作是一种“额外的方式”,而不是一种“独立的方式”,来进一步组织和创建能够与库和系统一起扩展的组件和变种。如果你感到困惑,请不要担心!为了帮助澄清这一点,让我们谈谈不同类型...