Figma 界面汉化怎么做？FigmaCN 完整上手教程：装一次，刷新即中文
【免费下载链接】figmaCN中文 Figma 插件，设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN
Figma 界面汉化到底怎么做？这是每个在英文菜单里反复找参数的设计师都会问的问题。FigmaCN 是一款中文 Figma 插件，提供浏览器扩展和油猴脚本两种形态，内置四千多条由设计师逐条人工校验的词条，装好后刷新页面即可生效，适合新手、非英语母语的协作团队，以及所有被英文界面拖慢节奏的人。
一句话结论：先判断值不值得继续读
FigmaCN 是一个把 Figma 网页版界面实时替换为中文的汉化插件，词条全部经过人工校验，安装后刷新页面即生效，不用配置、不改动任何设计数据。
如果这正是你想要的，往下读；如果你对英文界面毫无障碍、也不想为界面多装任何东西，那这篇教程看到这里就可以收工了。
为什么 Figma 界面汉化不是"翻译一遍"那么简单
先看一个反常识的事实：Figma 的界面不是"加载完就不动了"的静态页面。
它是一个典型的单页应用（SPA），菜单、面板、弹窗全部由 JavaScript 动态渲染。你点开一个图层的属性面板、输入一个数值、切换一个标签页，页面就会往文档里塞进一批新文字。这意味着任何"页面加载时翻译一次"的方案都注定漏掉大半内容——你刚刚看到的英文，其实是翻译引擎下班之后才出现的。
于是问题从"怎么翻译"变成了"怎么保证新出现的文字也来得及翻译"。这正是 FigmaCN 的核心设计思路，主逻辑集中在src/js/content.js：
- 先铺一遍：页面加载完成后，把现有可见文本整体过一遍词条库；
- 再盯住不放：借助浏览器的
MutationObserver接口持续监听页面变化，只要有新文本节点、新属性（如placeholder、aria-label）出现，立刻查表、翻译、写回； - 标好"已处理"：翻译过的元素打上标记，避免自己触发自己、无限循环。
打个比方：旧的汉化工具像拿盆接水，页面"流水"是动态的，一盆接完剩下的还在流；FigmaCN 则像在水管上装了个滤网——水流过多少，就滤多少。
拆解翻译引擎：查表顺序、通配符与"不翻译清单"
翻译数据放在src/js/translations.json，当前包含4384 条词条，结构是["英文原文", "中文译文"]的二维数组。查找译文按固定顺序进行：
| 顺序 | 匹配方式 | 例子 |
|---|---|---|
| 1 | 精确匹配整串 | Auto layout→自动布局 |
| 2 | {@}通配模式 | {@} members→{1} 位成员 |
| 3 | 兜底精确匹配 | 模式命中后，再替换串里的英文片段 |
第二条最容易被低估，却是"带数字的动态短语"能正确译出的关键。更讲究的是，词条还支持编号占位符{1} {2}来调整语序——中文和英文的语序经常相反，直接按原文顺序硬套会译出病句，编号占位符就是用来解决这个的。
但"什么都翻"反而是灾难，所以它专门维护了一份不翻译清单：
- 代码编辑器里的内容：
export、const这类关键字必须原样保留，插件识别出代码编辑器区域后整体跳过； - 本地变量名：变量命名属于设计系统的一部分，翻译会破坏引用关系，被主动排除；
- 正在输入的区域：评论框、标注框里正在输入的内容不翻译，避免把用户打到一半的字"偷走"。
此外，Figma 自己有一套自定义的<i18n-text>元素，文字藏在内部结构里，普通文本替换根本抓不到。插件为此写了独立的处理逻辑：先翻译子元素，再反向还原成英文原文，让整句仍然能命中完整词条。
一次真实的上手流程：从安装到完成一个"自动布局"
下面以 Chromium 系浏览器（Chrome / Edge）为例，完整走一遍从安装到实际干活的过程。
第 1 步：加载已解压的扩展程序
打开chrome://extensions（Edge 是edge://extensions），打开右上角"开发者模式"开关，点击"加载已解压的扩展程序"，选择包含manifest.json的文件夹。
没有现成插件包的话，可以克隆仓库：
git clone https://gitcode.com/gh_mirrors/fi/figmaCN克隆下来的仓库里，src/目录就是扩展本体（src/manifest.json声明了它只作用于*.figma.com域名），手动安装时选src/这个文件夹即可。
第 2 步：强制刷新 Figma 页面
装完先别急着点，按Ctrl+Shift+R（Mac 是Cmd+Shift+R）强制刷新一次。这一步经常被跳过，却是很多人"装完没效果"的真正原因——旧页面的脚本还躺在浏览器缓存里运行。
第 3 步：用中文界面完成一次实际操作
刷新后打开任意文件验证一下：顶部菜单、图层面板、右侧属性面板应该都变成中文了。这时选中一个按钮组，右键选择"添加自动布局"，属性面板会依次显示"自动布局""间距""约束"等中文参数——这些正是你在英文界面里反复查过的词。设置好间距和约束，布局完成，设计数据没被动过一分一毫。
不想装扩展？Figma 界面汉化的油猴脚本方案 30 秒搞定
如果不想碰浏览器扩展，另一条路是油猴脚本版：浏览器装好 Tampermonkey 后，把scripts/figmaCN.user.js导入即可。这个脚本每次运行时会远程拉取仓库 master 分支的最新代码和词条，天然自带更新，不用手动跟进版本。
三条安装路线的取舍：
| 安装路线 | 适合谁 | 更新方式 |
|---|---|---|
| Chrome / Edge / Firefox 商店版 | 想一键安装的大多数人 | 商店自动更新 |
| 手动加载已解压扩展 | 想要最新版、离线或内网环境 | 手动更新 |
| 油猴脚本版 | 习惯脚本管理、不想装扩展 | 跟随仓库 master 分支 |
五个高频疑问，一次性说清 ❓
Q：装完刷新了还是英文，怎么回事？A：先确认扩展开关是开启状态，再确认加载的是含manifest.json的目录（克隆仓库时是src/）。都不行就强制刷新一次——浏览器缓存是头号嫌疑。
Q：会把代码或评论里的字也翻译掉吗？A：不会，这是刻意设计。代码编辑器的关键字、本地变量名、正在输入的评论内容，全在跳过清单里。
Q：会不会改坏我的设计文件？A：不会。它只替换页面上的显示文本，不碰任何数据、属性或功能逻辑，属于非侵入式设计，翻译在页面加载后很快完成，日常操作几乎感知不到它的存在。
Q：个别位置还是英文，是故障吗？A：大概率是词条没跟上 Figma 的更新节奏。新出现的界面文案通常要等词条库更新，属于正常现象，不影响主体功能。
Q：团队想统一术语，比如把"画布"统一叫"画板"？A：直接编辑src/js/translations.json，按["英文", "中文"]的格式追加一行，重新加载扩展即可生效。一个小团队靠这份文件就能统一全员的术语口径。
谁适合装，谁其实没必要
适合装：
- Figma 新手：中文界面能显著缩短从"认识功能"到"上手干活"的路径；
- 非英语母语的协作团队：权限弹窗、版本历史等文案不再产生歧义，成员对同一操作的理解趋于一致；
- 被英文界面干扰节奏的熟练用户：功能都认识，但母语界面查找和确认更快。
没必要装：
- 对英文界面毫无障碍、且反感任何多余依赖的人；
- 需要 100% 词条覆盖率、接受不了个别位置仍是英文的人；
- 从不使用 Figma 网页版的人——插件只作用于
figma.com域名。
现在就能做的六件事 ✅
- 打开
chrome://extensions，开启"开发者模式"； - 点击"加载已解压的扩展程序"，选择含
manifest.json的文件夹（克隆仓库时选src/）； - 打开 Figma，按
Ctrl+Shift+R强制刷新； - 打开任意文件，检查顶部菜单是否已变中文；
- 选中一个图层，验证属性面板里的"自动布局""约束"等参数；
- 需要统一术语时，编辑
src/js/translations.json追加词条，再重新加载扩展。
汉化一个每周都在更新的工具，本质上是一场和 Figma 发布节奏的持久战。FigmaCN 用四千多条人工校验词条把这场仗打了下来，而你只需要付出"装一次、刷一次"的成本——省下来的，是以后每一次打开 Figma 时不再翻词典的时间。
【免费下载链接】figmaCN中文 Figma 插件，设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
