AI导哈

Figma国际化文本提取工具

一个从Figma设计中提取文本进行国际化的MCP服务器工具，自动提取可见文本节点并生成结构化JSON格式，适用于翻译工作流。

  • by doubleA411
  • 本地部署
  • 更新于
在 GitHub 查看 doubleA411/figma-i18n-mcp

使用说明

Figma 国际化（i18n）多语言内容包（MCP）服务器

一个模型上下文协议（MCP）服务器，用于从Figma设计中提取文本以支持国际化（i18n）。该工具能够自动从Figma文件中提取所有可见的文本节点，并将它们组织成结构化的JSON格式，按帧和组件进行分组，非常适合翻译工作流程。

特点/功能

  • 🎨 从任何Figma文件或特定帧中提取文本
  • 🔑 自动为每个文本节点生成i18n键
  • 📦 按帧和组件分组文本
  • 🚫 跳过不可见/隐藏层
  • 🌳 已准备好嵌套JSON输出，适用于i18n库

先决条件

  • Node.js （建议使用v18或更高版本）
  • Figma访问令牌 （见以下设置说明）
  • Claude Desktop（可译为“Claude桌面版”或根据上下文简化为“桌面版Claude”） 或任何兼容MCP的客户端

安装

  1. 克隆或下载此仓库：

    git clone <your-repo-url>
cd i18n-figma-mcp

  2. 安装依赖项：

    npm install

  3. 获取您的Figma访问令牌：

配置

Claude 桌面设置

  1. 找到您的Claude桌面配置文件：

    • macOS（苹果电脑操作系统）： ~/Library/Application Support/Claude/claude_desktop_config.json
    • Windows： %APPDATA%\Claude\claude_desktop_config.json
    • Linux： ~/.config/Claude/claude_desktop_config.json

  2. 将此MCP服务器添加到配置中：

    {
  "mcpServers": {
    "figma-i18n": {
      "command": "node",
      "args": [
        "/absolute/path/to/i18n-figma-mcp/src/index.js"
      ],
      "cwd": "/absolute/path/to/i18n-figma-mcp",
      "env": {
        "FIGMA_TOKEN": "your-figma-access-token-here"
      }
    }
  }
}

  3. 替换占位符：

    • 替换 /absolute/path/to/i18n-figma-mcp 以及此项目的实际完整路径
    • 替换 your-figma-access-token-here 使用您的Figma访问令牌

  4. 重启Claude桌面版 加载新的MCP服务器

使用

一旦配置完成，您就可以使用 extract_figma_i18n Claude Desktop中的工具：

示例提示：

来自Figma文件的摘录：

Extract i18n text from this Figma file: https://www.figma.com/file/ABC123xyz/MyDesign

从特定帧中提取：

Extract text from this Figma frame: https://www.figma.com/file/ABC123xyz/MyDesign?node-id=123-456

输出格式

该工具返回一个按帧分组的嵌套JSON结构：

{
  "login_screen": {
    "welcome_message": "Welcome back!",
    "email_placeholder": "Enter your email",
    "password_placeholder": "Password",
    "login_button": "Sign In"
  },
  "dashboard": {
    "title": "Dashboard",
    "subtitle": "Your overview"
  }
}

其工作原理

  1. 解析 用于提取文件密钥和可选节点ID的Figma URL
  2. 获取（数据/信息等） 使用Figma API的设计数据
  3. 横穿（或横跨） 组件树递归地
  4. 提取物 带有其框架/组件上下文的可见文本节点
  5. 生成 每条文本条目的唯一键
  6. 退货 结构化的JSON，已准备好进行翻译

故障排除

“无效的Figma URL”错误

  • 确保您使用的是有效的Figma文件或框架URL
  • 格式： https://www.figma.com/file/{fileKey}/... 或者 https://www.figma.com/design/{fileKey}/...

“认证失败”或API错误

  • 验证您的Figma访问令牌是否正确
  • 检查令牌是否具有读取文件的权限
  • 确保该文件可通过您的Figma账户访问

服务器未出现在Claude桌面版中

  • 验证配置文件路径是否正确
  • 检查配置中的所有路径是否为绝对路径
  • 更改后重启Claude桌面版
  • 检查Claude Desktop的日志以查找错误信息

空结果

  • 确保Figma文件中包含可见的文本节点
  • 确认你有权限访问该文件
  • 如果文件非常大，请尝试使用特定的框架URL

发展

在本地运行服务器以进行测试：

npm start

服务器通过标准输入输出（stdio）进行通信，并期望接收遵循MCP协议的JSON-RPC消息。

版本

当前版本：1.1.0

许可证

[此处填写您的许可证]

相关 MCP