Figma 组件属性

Relay 可以识别在打包组件中定义的 Figma 组件属性。从概念上讲,Figma 组件的属性类似于 Relay 参数,但存在一些差异。

示意图 - 矢量图层到 VectorDrawable 到图片

一般来说,Figma 组件属性不需要 Relay 插件即可配置和使用,因此最好在有重叠时在 Relay 参数中使用这些属性。但请注意,Relay 参数允许使用描述性注释,此类注释会沿用到生成的代码中,而 Figma 组件属性则不支持。

请参阅下文,详细了解不同的组件属性类型以及 Relay 如何解读这些属性。

布尔值属性

布尔值属性用于控制元素是否在特定设计中显示。它们可以大幅减少组件需要定义的变体数量。例如,带有可选图标的按钮不需要分别具有显示图标状态和图标隐藏状态的单独变体。

Relay 会遵循封装组件中的布尔值参数,并生成相应的 @Composable 函数签名。

文本属性

文本属性与 Relay 文本内容参数几乎完全相同;唯一的区别在于对文档注释的支持。如果 Relay 参数和文本属性在同一图层上声明,则 Relay 会使用参数定义来添加备注。但在这种情况下,应格外小心,通过使用一致的命名方式避免混淆。

如果特定参数不需要注释,为简单起见,我们建议您使用 Figma 文本属性。

实例交换属性

实例交换属性允许组件的客户端交换子项中的实例。从概念上讲,这类似于 Relay 子级参数,但也存在一些重要区别:

适用性:实例交换属性只能应用于实例层。不过,中继子参数可应用于实例、帧或组。因此,使用实例交换属性要求交换的内容本身是一个组件,而 Relay 允许将内容作为层的任何子层次结构。

作用域:实例交换属性的值只能在组件层次结构的顶层组件中设置。相比之下,中继子参数可在层次结构中的任何级别进行设置,前提是该参数未向父级公开。

Relay 可以识别在封装组件上声明的实例交换属性,并尽可能以同等的方式对待它们(例如,在生成的代码中发出相同的函数签名)。如果在实例层上声明 Relay 子参数,则其定义优先于该层上声明的实例交换属性(如果有)。

与文本属性一样,如果命名不一致,在同一层上同时使用 Figma 组件属性和 Relay 参数,可能会导致混淆。不过,由于子参数在实例交换属性方面存在显著差异,因此我们没有一揽子建议在什么位置使用什么位置。两者皆有可能。这一决定将决定组件的预期用途。

变体属性

当组件有多个变体时,系统会隐式创建变体属性。Relay 通过将变体属性转换为生成的代码中的枚举值来支持变体属性。

设计人员还可以声明 Relay 参数,这些参数用于公开打包组件中的实例层的变体属性。