Figma 组件属性

Relay 识别定义在打包组件上的 Figma 组件属性。从概念上讲,Figma 组件属性类似于 Relay 参数,但有一些区别。

Diagram - Vector layers to VectorDrawable to Image

通常,Figma 组件属性不需要 Relay 插件来配置和使用,因此在有重叠时,最好在 Relay 参数中使用它们。但是,请注意,Relay 参数允许添加描述性注释,这些注释会传递到生成的代码中;而 Figma 组件属性则不会。

请参阅以下内容,了解不同组件属性类型的详细信息以及 Relay 如何解释它们。

布尔属性

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

Relay 尊重打包组件中的布尔参数,并生成相应的 @Composable 函数签名。

文本属性

文本属性与 Relay 文本内容参数几乎完全相同;唯一的区别是支持文档注释。如果 Relay 参数和文本属性都在同一层上声明,Relay 将使用参数定义以允许添加注释。但是,在这种情况下,应谨慎处理,避免使用不一致的命名导致混淆。

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

实例替换属性

实例替换属性允许组件的客户端替换子组件内部的实例。从概念上讲,这类似于 Relay 子组件参数,但有一些关键区别。

适用性:实例替换属性只能应用于实例层。而 Relay 子组件参数可以应用于实例、框架或组。因此,使用实例替换属性要求替换的内容本身是一个组件,而 Relay 允许内容是任何层的子层级。

作用域:实例替换属性的值只能在组件层级中的顶层组件上设置。相比之下,Relay 子组件参数可以在层级中的任何级别设置,只要该参数没有暴露给父级级别即可。

Relay 识别打包组件上声明的实例替换属性,并尽可能将其等效地视为子组件参数(例如,在生成的代码中发出相同的函数签名)。如果在实例层上声明了 Relay 子组件参数,则其定义优先于该层上声明的实例替换属性(如果有)。

与文本属性一样,在同一层上同时使用 Figma 组件属性和 Relay 参数,如果命名不一致,会导致混淆。但是,由于子组件参数在功能上与实例替换属性有很大区别,因此我们没有关于在何处使用哪一种的全面建议。两者都是可能的。组件的预期用途将决定此决定。

变体属性

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

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