SuperAPI AI 工具集

figma-connect

设计与创作

查看项目

更新于 10-15 19:57

技能介绍

用途:在 Figma 设计与代码实现之间建立端到端工作流。MCP 工具负责读取类操作(读取设计、生成代码、提取变量),Code Connect CLI 负责发布类操作(把组件映射发布到 Dev Mode)。

主要能力:包含五种模式。Setup 用于新项目首次配置 Code Connect;Design-to-Code 根据 Figma URL 生成实现代码;Code Connect Publish 把已有代码组件映射回 Figma;Token Extraction 把 Figma 变量同步为项目令牌文件;Roundtrip 串联以上流程完成整体迁移。

使用方式:需要两条独立认证。MCP 走 OAuth,可用 whoami() 检查,需付费 Figma 计划的 Full 或 Dev 席位;CLI 走令牌,检查 FIGMA_ACCESS_TOKEN,缺失时在 figma.com/developers 创建具备 Code Connect: Write 与 File content: Read 权限的个人令牌,并 export FIGMA_ACCESS_TOKEN=<token>。CLI 安装命令为 npm install -D @figma/code-connect。调用前需从 Figma URL 解析 fileKey 与 nodeId,并把 node-id 中的短横线转为冒号。常用命令包括 npx figma connect parse --label React、npx figma connect publish --dry-run、npx figma connect publish。

适用场景:新项目对接已有 Figma 设计系统、把设计系统迁移到 Code Connect、审计并修复组件库的 Code Connect 覆盖。

限制:get_code_connect_suggestions 需要 Organization/Enterprise 计划且组件已发布到团队库;发布 403 通常是令牌缺少 Code Connect: Write 权限;同一节点只能存在一种连接类型,UI 与 CLI 映射冲突时需先移除其一;分支 URL 需用 branchKey 作为 fileKey;速率限制随计划而异,具体数值暂未提供。