FigmaCN使用指南：6个实用技巧，让设计师彻底告别英文界面

FigmaCN使用指南：6个实用技巧，让设计师彻底告别英文界面

【免费下载链接】figmaCN中文 Figma 插件，设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN

FigmaCN是一款免费的中文 Figma 插件，能把 Figma 网页版界面实时翻译成中文，且由设计师人工翻译校验，不会改动你的任何设计文件。本文面向新手，带你掌握从安装到进阶的 6 个实用技巧，几步操作即可拥有一套全中文的 Figma 界面。

FigmaCN 是什么？30 秒了解它

FigmaCN 本质上是一个浏览器扩展（也提供油猴脚本版），安装后打开 Figma 网页，整个界面——从顶部菜单栏、右侧属性面板，到弹窗提示、版本历史——都会被自动替换成中文。

它有两个核心部件：

插件只在figma.com域名下工作（见 src/manifest.json），其他网站完全不受影响。

技巧一：选一条最顺手的安装通道

FigmaCN 提供5 种安装方式，任选其一即可，按上手难度从低到高排列：

1. 浏览器商店版（推荐，最省心）在 Chrome / Edge / Firefox 的官方商店中搜索FigmaCN，点击「添加 / 获取」即可，之后商店会自动帮你更新插件。
2. 油猴脚本版先安装 Tampermonkey 等油猴类脚本管理器，再从油猴脚本商店搜索 "Figma CN" 安装。脚本源码见 scripts/figmaCN.user.js。
3. 手动加载（适合喜欢折腾的开发者）下载FigmaCN-chromium-x.x.x.zip（Chrome/Edge）或FigmaCN-firefox-x.x.x.zip（Firefox）解压后：
   • Chrome / Edge：地址栏输入chrome://extensions（Edge 为edge://extensions）→ 打开「开发者模式」→ 点「加载已解压的扩展程序」→ 选择解压文件夹
   • Firefox：输入about:debugging→ 「此 Firefox」→「临时载入附加组件」→ 选择解压目录中的manifest.json

完整的分渠道步骤说明见 README.md。

💡装好后记得刷新 Figma 页面，翻译才会生效。

技巧二：搞懂"实时翻译"，切换面板不再白屏

很多汉化脚本只在页面首次加载时翻译一次，导致点击侧边栏切换面板后新出现的内容仍是英文。

FigmaCN 用的是MutationObserver 实时监听方案（src/js/content.js）：只要页面上新增节点、文本变化或属性更新，就立刻按词库做一次局部翻译。所以：

• 切换属性面板、打开弹窗、展开菜单，新内容瞬间变中文
• 翻译只作用于界面文本，你的文件名、图层名、设计内容一律不碰

技巧三：放心使用——它绝不会误翻你的设计内容

"界面汉化"最怕误伤设计内容。FigmaCN 内置了一整套智能跳过机制，以下区域会被主动识别并跳过：

另外，像<i18n-text>这类由多段文字拼成的提示语，会先翻译成英文原文整体匹配，再回填，避免一句话被拆成"点击 / click 按钮"的尴尬混合（src/js/content.js）。

技巧四：动态文案也能翻——"3 天前"是怎么变中文的

界面上大量文案带变量，比如 "{x} days ago"。固定词条翻译不了这种"模板句"，FigmaCN 用通配符模式解决：

• 词条 key 中的{@}表示"这里有个未知变量"，翻译时会被替换成实际内容
• 译文支持{1}、{2}编号占位符，还能调整语序

例如词库中的真实条目（src/js/translations.json）：

["{@} days ago", "{1} 天前"]

页面上出现 "3 days ago" 时，变量3被捕获，最终渲染为"3 天前"。团队成员数 "5 members" → "5 位成员" 也是同理。这就是界面数字类提示全部显示中文的原因。

技巧五：让插件保持最新，跟上 Figma 更新节奏

Figma 迭代很快，旧词库遇到新版界面会出现零星英文。不同安装方式的更新策略不同：

• 油猴脚本版：自动远程加载仓库 master 分支的最新代码和词库，无需手动更新
• 商店版：由浏览器商店推送更新，留意扩展管理页的更新提示
• 手动加载版：需要自行下载新版本 zip 重新加载；推送到v*格式的 tag 后会自动构建发布FigmaCN-chromium-x.x.x.zip与FigmaCN-firefox-x.x.x.zip两个产物（Firefox 包会自动改写后台脚本以适配）

⚠️ 手动加载的 Firefox 版注意：它是临时附加组件，重启浏览器后需重新载入一次。

技巧六：遇到漏翻的文案？自己动手补一条

FigmaCN 的词条全部集中在 src/js/translations.json，格式非常简单——二维数组，[英文原文, 中文译文]：

["(Auto layout)", "（自动布局）"], ["version history", " 版本历史"], ["Learn more", " 了解更多"]

发现某个词没翻译时，可以：

1. 复制 Figma 界面上的英文原文（注意保留原文首尾空格，它们也是 key 的一部分）
2. 按同样格式新增一条[原文, 译文]
3. 手动加载版替换本地文件后刷新 Figma 页面即可看到效果；同时欢迎向仓库提交词条，让更多设计师受益

如果词条中含有可变部分，用技巧四介绍的{@}通配符替代变量即可。

常见问题快速排障

小结

FigmaCN 用一条安装、一次刷新，就能把英文界面变成全中文工作区：词库人工校验、实时翻译不漏面板、智能跳过不误伤设计内容。对于英文不熟的设计新手，它几乎是零成本的效率提升工具；熟练用户则可以把它当作探索 Figma 新功能、阅读官方更新说明的"随身翻译"。

【免费下载链接】figmaCN中文 Figma 插件，设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN