SuperAPI AI 工具集

figma-code-connect-components

前端与建站

查看项目

更新于 10-16 07:17

技能介绍

用途:把 Figma 设计组件映射到代码组件,建立设计—代码对应关系。适用于用户提出“code connect”“把这个组件连到代码”等请求时使用。

主要能力:调用 get_code_connect_suggestions 一次性找出所选范围内尚未映射的已发布组件,返回组件名、节点 ID、属性与缩略图;随后扫描代码库寻找名称、结构、props 匹配的实现;再经用户确认后调用 send_code_connect_mappings 批量创建映射,并汇总成功与失败项。

必要用法:需连接 Figma MCP;可提供带 node-id 的链接(如 https://figma.com/design/:fileKey/:fileName?node-id=1-2),调用时把 1-2 转成 1:2;使用 figma-desktop MCP 时可直接用当前选中节点。映射参数含 nodeId、componentName、source、label(如 React、Vue、SwiftUI、Compose、Flutter 等)。

适用场景:设计系统组件与前端/iOS/Android 代码组件的对应维护;批量梳理未映射组件。

限制:组件必须已发布到团队库;Code Connect 仅在 Organization 与 Enterprise 套餐可用;需有代码库与文件编辑权限。若任务是用 Plugin API 写入画布、生成整页设计或从 Figma 实现产品代码,应改用相应技能。常见错误包括组件未发布、路径或导出名不符、映射已存在、权限不足等,文中给出了对应处理建议。