用途:为编写 Figma Code Connect 属性映射提供规范,适用于通常以 .figma.tsx 结尾的 Code Connect 文件,帮助把 Figma 组件属性正确映射到代码组件 props。
主要能力与用法:
- figma.enum() 用于下拉/变体,如 variant: figma.enum('variant', {'Primary':'primary'})。
- figma.boolean() 用于布尔属性;也可传部分映射对象,用 undefined 表示不渲染该 prop。
- figma.string() 用于文本型组件属性;使用前必须确认该名称是真实 Figma 组件属性,可通过 get_metadata 返回的变体名核对,否则应改用 figma.textContent() 或硬编码占位符。
- figma.textContent() 用于文本图层内容,只能作用于真正的 TEXT 图层,不能用于组件实例;使用前用 get_metadata 确认节点为 <text>。
- figma.instance() 用于实例替换属性(组件插槽),返回另一处 figma.connect() 的 JSX;暴露的嵌套实例替换属性名带 ↳ 前缀时需完整传入,如 figma.instance('↳ start')。
- figma.children() 按图层名映射子实例到 children。
- figma.nestedProps() 用于读取子组件图层属性,仅适用于嵌套 TEXT 或 VARIANT 属性,不用于 INSTANCE_SWAP。
多变体支持:为不同变体创建独立的 figma.connect() 调用,并用 variant: { ... } 过滤;当不同变体的子图层名不同时,必须拆分,否则 figma.children() 会静默失效。
常见错误:把文本图层内容误用 figma.string();把枚举值当作独立属性;对组件实例使用 figma.textContent();属性名大小写或空格不匹配;在 props 中加入非真实组件 prop 的中间值。注意 figma.boolean() 返回的是不透明描述符而非 JS 布尔值,分支必须写在 true/false 值内。
限制:figma connect publish 的校验覆盖有限,仅校验 figma.boolean()、figma.enum()、figma.string() 的属性名和 figma.children() 的图层名;figma.nestedProps() 与 figma.textContent() 不校验,figma.instance() 行为依上下文和 CLI 版本而异,且校验不会递归进入布尔分支,可能发布出运行时才报错的映射。