用途:根据 Figma URL 生成并维护 .figma.ts 模板文件,把已发布的 Figma 组件映射到对应代码组件,供 Code Connect 使用。
主要能力:解析 Figma URL 提取 fileKey 与 nodeId;通过 MCP 工具发现未映射组件并获取组件属性;在代码库中定位匹配的代码组件;生成使用 figma.code 标签模板的解析器无关模板,支持 TEXT、BOOLEAN、VARIANT、INSTANCE_SWAP、SLOT 等属性映射,以及嵌套实例、条件属性与枚举穷举处理。
使用方式:需先连接 Figma MCP 服务器并确认相关工具可用;组件须发布到团队库;需 Organization 或 Enterprise 方案;URL 必须包含 node-id。在 tsconfig.json 的 types 中加入 @figma/code-connect/figma-types。生成的文件必须是 ComponentName.figma.ts,使用 figma.code 标签模板,不得写成 .figma.tsx,也不得使用 figma.connect()。
限制:Free 与 Professional 方案不可用;未发布组件无法处理;对已有 .figma.tsx 文件不做修改,只在其旁新增 .figma.ts;无法确定或不存在的代码属性不应臆造,应省略。