Figma 国际化(i18n)多语言内容包(MCP)服务器
一个模型上下文协议(MCP)服务器,用于从Figma设计中提取文本以支持国际化(i18n)。该工具能够自动从Figma文件中提取所有可见的文本节点,并将它们组织成结构化的JSON格式,按帧和组件进行分组,非常适合翻译工作流程。
特点/功能
- 🎨 从任何Figma文件或特定帧中提取文本
- 🔑 自动为每个文本节点生成i18n键
- 📦 按帧和组件分组文本
- 🚫 跳过不可见/隐藏层
- 🌳 已准备好嵌套JSON输出,适用于i18n库
先决条件
- Node.js (建议使用v18或更高版本)
- Figma访问令牌 (见以下设置说明)
- Claude Desktop(可译为“Claude桌面版”或根据上下文简化为“桌面版Claude”) 或任何兼容MCP的客户端
安装
- 克隆或下载此仓库:
git clone
cd i18n-figma-mcp- 安装依赖项:
npm install- 获取您的Figma访问令牌:
- 登录到 Figma(注:Figma是一个在线设计工具,用于UI/UX设计、原型制作和团队协作,此处直接保留原英文名,因为它是专有名词) - 首选 设置 → 账户 → 个人访问令牌 - 点击 生成新令牌 - 给它起个名字(例如,“MCP i18n 提取器”) - 立即复制该令牌(你不会再看到它了!)
配置
Claude 桌面设置
- 找到您的Claude桌面配置文件:
- macOS(苹果电脑操作系统): ~/Library/Application Support/Claude/claude_desktop_config.json - Windows: %APPDATA%\Claude\claude_desktop_config.json - Linux: ~/.config/Claude/claude_desktop_config.json
- 将此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"
}
}
}
}- 替换占位符:
- 替换 /absolute/path/to/i18n-figma-mcp 以及此项目的实际完整路径 - 替换 your-figma-access-token-here 使用您的Figma访问令牌
- 重启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"
}
}其工作原理
- 解析 用于提取文件密钥和可选节点ID的Figma URL
- 获取(数据/信息等) 使用Figma API的设计数据
- 横穿(或横跨) 组件树递归地
- 提取物 带有其框架/组件上下文的可见文本节点
- 生成 每条文本条目的唯一键
- 退货 结构化的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
许可证
\[此处填写您的许可证\]
