Claude Code 联动 Figma 配置总结

这两条命令都是为了在 Anthropic 的终端 AI 助手 Claude Code 中接入 Figma，让 AI 具备直接读取设计稿、组件和变量的能力。

---

⚖️ 两条命令的核心对比

比较维度	方式一：claude mcp add ...	方式二：claude plugin install ...
功能本质	添加底层通信协议 (MCP)	安装高级功能插件 (Plugin)
操作体验	手动配置远程 API 接口地址	官方插件市场一键打包下载
包含内容	仅基础通道：打通数据传输。	全家桶：含 MCP 协议、AI 专属技能及快捷指令。
推荐指数	⭐⭐⭐ （适合自定义/调试）	⭐⭐⭐⭐⭐ （官方推荐，最省心）

---

🛠️ 命令详细拆解

1. 方式一：手动绑定 MCP 服务

claude mcp add --transport http fgma-remote-mcp https://figma.com

• claude mcp add：注册新的模型上下文协议（MCP）服务器。
• --transport http：指定使用 HTTP 协议进行远程通信。
• fgma-remote-mcp：自定义的服务器别名（标签）。
• https://figma.com：Figma 官方的 MCP 接口地址。

2. 方式二：官方插件一键安装（推荐）

claude plugin install figma@claude-plugins-official

• claude plugin install：调用 Claude 的插件包管理器。
• figma：指定安装 Figma 官方插件。
• @claude-plugins-official：从 Anthropic 官方托管的插件市场拉取。

---

💡 最佳实践流

推荐直接使用方式二，它会自动处理好方式一的底层连接，并解锁更多高级 AI 技能：

1. 一键安装插件：

   claude plugin install figma@claude-plugins-official
   

2. 授权与管理：
   在 Claude 终端输入 /plugin 打开面板，按照提示登录 Figma 账号完成授权。
3. 高效开发：
   授权后可直接使用 /implement-design 等快捷指令，将 Figma 链接秒变前端代码。