/ 目录 / 演练场 / claude-talk-to-figma-mcp
● 社区 arinspunk ⚡ 即开即用

claude-talk-to-figma-mcp

作者 arinspunk · arinspunk/claude-talk-to-figma-mcp

Claude 通过免费 plugin 读取、分析和修改 Figma 设计 — 无需 Dev Mode,支持免费 Figma 账户。

claude-talk-to-figma-mcp (arinspunk) 将 MCP server 与 Figma plugin 结合。它们让 Claude 可以检查文档结构、审计样式、扫描组件,以及创建/修改形状、文本和框架。绕过通常的 Dev Mode 付费墙,实现设计感知的 AI 工作流。

为什么要用

核心特性

实时演示

实际使用效果

claude-talk-to-figma.replay ▶ 就绪
0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "claude-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "claude-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "claude-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "claude-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "claude-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "claude-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "claude-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "claude-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "claude-talk-to-figma",
      "command": "npx",
      "args": [
        "-y",
        "claude-talk-to-figma-mcp"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "claude-talk-to-figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "claude-talk-to-figma-mcp"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add claude-talk-to-figma -- npx -y claude-talk-to-figma-mcp

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: claude-talk-to-figma-mcp

审计 Figma 文件中系统外的颜色和样式

👤 设计系统维护者 ⏱ ~20 min intermediate

何时使用: 团队的文件与设计 tokens 偏离,你想找出不符合规范的部分。

前置条件
  • 通过 manifest 导入 Figma plugin — Figma → Plugins → Development → Import from manifest
  • 运行 bun run socket — 从仓库运行;打开 WebSocket
步骤
  1. 连接
    连接到 Figma,channel abc123(从 plugin UI 复制)。✓ 已复制
    → 已连接;显示文档名称
  2. 扫描系统外的填充
    扫描所有节点,找出不在我们 12 个品牌 tokens 中的填充颜色。列出节点路径。✓ 已复制
    → 偏离实例列表
  3. 报告
    按最近的框架分组并总结。建议每个不符规范的部分应该使用哪个 token。✓ 已复制
    → 可执行的清理列表

结果: 一个你可以交给设计师的文件,包含具体的修复建议。

注意事项
  • 如果重启 plugin,Channel ID 会轮换 — 始终从 plugin 面板复制最新的 ID;过期的 ID 会静默超时

将书面规范转换为粗略的 Figma 框架

👤 产品经理、非设计师 ⏱ ~15 min beginner

何时使用: 你想要快速线框图,不想自己打开 Figma。

步骤
  1. 描述布局
    在当前文件中创建一个新框架 1440x900。添加标题、3 列特性网格和页脚。使用我们的品牌颜色。✓ 已复制
    → 框架在 Figma 中显示并具有该结构
  2. 迭代
    让特性卡片使用我们的 'Card' 组件。将标题换为 'primary' 变体。✓ 已复制
    → 框架实时更新

结果: 不需要触碰 Figma UI 就能得到粗略线框图。

对 Figma 文件运行辅助功能色彩对比度检查

👤 设计师、无障碍倡导者 ⏱ ~25 min intermediate

何时使用: 交付前,你想标记对比度失败的地方。

步骤
  1. 遍历文本节点及其背景
    对于每个文本节点,计算相对最近背景填充的 WCAG 对比度。标记正文低于 4.5:1 或大文本低于 3:1 的情况。✓ 已复制
    → 失败配对及其比率列表
  2. 建议调整
    对于每个失败,建议最小的 token 交换来通过测试。✓ 已复制
    → 修复建议

结果: 在 QA 后来发现之前的无障碍报告。

组合

与其他 MCP 搭配,撬动十倍杠杆

claude-talk-to-figma + meigen-ai-design

生成图像,将其作为占位符放入 Figma 框架

用 MeiGen 生成英雄图像,然后将其作为填充放在选中的 Figma 框架中。✓ 已复制
claude-talk-to-figma + unreal

Figma HUD → Unreal UMG widget 框架

导出选中的 Figma HUD 框架结构,然后在 Unreal 中创建匹配的 UMG Widget Blueprint。✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
get_document_info 第一步;确认正确的文件 0
get_selection 操作用户选中的内容 0
scan_styles 偏离检测 0
create_shape type, x, y, w, h, fill? 构建布局 0
create_text content, x, y, style? 添加标签/标题 0
set_fill node_id, color 修复不符规范的部分 0
set_auto_layout node_id, direction, padding, gap 转换为响应式 0

成本与限制

运行它的成本

API 配额
无 — 一切都通过本地 WebSocket
每次调用 Token 数
文档扫描在大文件上可能需要 5-30k tokens
费用
免费
提示
尽可能操作 get_selection;全文档扫描会消耗 tokens

安全

权限、密钥、影响范围

凭据存储: 无 API 密钥;plugin 使用你当前的 Figma 会话
数据出站: 仅本地 WebSocket;Figma 数据只有在你共享结果时才会离开

故障排查

常见错误与修复

连接超时 / 未找到 channel

Channel ID 会轮换 — 从 plugin 面板复制最新的并重新连接

Figma 菜单中缺少 plugin

通过 Plugins → Development → Import from manifest 重新导入;在某些设置中,dev plugins 在 Figma 重启后不会保留

写入无声地失败

Figma 在某些文件类型(库、社区副本)上限制 plugin 写入。检查锁定图标

替代方案

claude-talk-to-figma-mcp 对比其他方案

替代方案何时用它替代权衡
Framelink / Figma-Context MCP你想通过 Figma API 使用个人 token 进行只读访问无法写入;需要 API 访问
Figma Dev Mode MCP (official)你的组织为 Dev Mode 付费需要付费座位

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills