用途:为 Figma 组件创建 Code Connect 模板文件(.figma.ts),把设计组件映射到代码片段,便于开发者在 Figma 中看到对应代码。
主要能力:解析 Figma URL 提取 fileKey 与 nodeId;通过 MCP 工具发现未映射组件、获取组件属性;在代码库中定位匹配的代码组件;生成 parserless 模板(默认导出使用 figma.code... 标签模板),支持 TEXT、BOOLEAN、VARIANT、INSTANCE_SWAP、SLOT 等属性映射,以及嵌套实例动态渲染。
使用方式:需先连接 Figma MCP 服务器,组件须发布到团队库,且需 Organization 或 Enterprise 计划;URL 必须含 node-id。模板文件命名为 ComponentName.figma.ts,切勿写成 .figma.tsx 或使用 figma.connect()。tsconfig.json 中需加入 "@figma/code-connect/figma-types" 以获得类型提示。
限制:仅适用于已发布组件;Free 与 Professional 计划不可用;VARIANT 映射须覆盖全部取值,否则会返回 undefined;不得硬编码子组件内容,应使用 getInstanceSwap、findInstance、executeTemplate 等动态 API。