Figma 界面全是英文？四千多条人工校验词条，一个 FigmaCN 插件让整页菜单变中文
Figma 界面全是英文？四千多条人工校验词条，一个 FigmaCN 插件让整页菜单变中文
【免费下载链接】figmaCN中文 Figma 插件，设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN
上个月我带团队做组件库，新来的实习生盯着 Figma 的右侧面板，半天憋出一句："约束条件到底在哪里？" 我凑过去一看，她正在英文界面上翻来翻去找一个叫 "Constraints" 的东西。那晚十一点，我们俩就着屏幕把几个常用参数又对了一遍——同一个词，查一次记不住，查两次还是会忘。
后来我装了个叫 FigmaCN 的汉化插件，刷新一次，整页菜单都成了中文。实习生第二天自己就能顺着中文提示走完流程，再没来问过我第二次。
先说清楚它到底干了一件什么事
FigmaCN 是一个浏览器扩展，也有油猴脚本版，作用很单纯：把 Figma 网页版界面上的英文文字实时替换成中文。它跟机翻不是一回事——内置四千三百多条词条，全部由设计师逐条人工翻译校验过，用的是中文设计行业里顺口的说法："Auto Layout" 译成"自动布局"，"Constraints" 译成"约束"，而不是那种一眼假的生硬直译。
翻译数据就放在 src/js/translations.json 里，一条条 "英文 → 中文" 的对照，任何人都能打开看。
为什么它不能"页面加载时替换一次"就算了
你可能觉得翻译界面有什么难的，把文字换掉不就行了吗？难点在于 Figma 是典型的单页应用，菜单、面板全是动态渲染的——你点一下图层，右侧面板就重新生成一遍。旧办法"加载时替换一次"根本追不上它变。
FigmaCN 的做法，像是请了一位站在旁边盯梢的驻场翻译：浏览器里有个叫 MutationObserver 的接口，专门用来监听页面变化，只要有新文本冒出来，插件立刻查表、翻译、写回。你操作得越快，它盯得越紧，但你自己几乎感觉不到它的存在。
它查词也不是傻乎乎一个个找，顺序是"精确匹配 → 通配模式 → 兜底精确"。词库里还有几十条带{@}通配符的模板，所以 "5 members" 这种带着数字的短语，也能正确译成"5 位成员"。
更难得的是它知道什么不该翻：代码编辑器里的关键字、评论框里正在输入的内容、本地变量的名字，都会被主动跳过。你不会看到代码里的export被翻译成中文那种尴尬场面——这些"跳过逻辑"在 src/js/content.js 里写得很清楚。
5 分钟上手，装完记得强制刷新
装的方式有几种，最快的路线是这样的：
- 把插件包解压到本地，或者执行
git clone https://gitcode.com/gh_mirrors/fi/figmaCN克隆仓库 - 打开
chrome://extensions（Edge 是edge://extensions），右上角开启"开发者模式" - 点"加载已解压的扩展程序"，选包含
manifest.json的那个文件夹（克隆仓库就选src/） - 打开 Figma，按
Ctrl+Shift+R（Mac 是Cmd+Shift+R）强制刷新一次
最后一步千万别省。我一开始装完直接普通刷新，界面纹丝不动，以为插件坏了，后来才知道是浏览器缓存让旧脚本继续跑着。强制刷新之后，效果是这样的：
| 用之前 | 用之后 |
|---|---|
| 顶部菜单一长串英文 | 文件、编辑、视图全是中文 |
| 右侧属性面板靠猜 | 自动布局、约束、填充一目了然 |
| "5 members" 要心算一下 | 直接显示"5 位成员" |
| 权限弹窗看半天不敢点 | "可以编辑" "可以查看" 清清楚楚 |
不想装扩展的话，还有油猴脚本版：浏览器装好 Tampermonkey，把 scripts/figmaCN.user.js 导入就行，它会自动跟随仓库更新，省得手动维护。
跟着我走一遍：从安装到做完一件小事
我拿自己的一次实际操作为例。那天要给项目组配一套权限，放在以前，我得到英文弹窗里分辨 "Can edit" 和 "Can view" 的细微差别，鼠标悬停半天不敢点。这次装上 FigmaCN 后，打开分享弹窗，权限下拉里直接写着"可以编辑""可以查看"，一秒选完，全程没犹豫。
接着我去调一个自动布局，以前的流程是："Auto Layout" 是什么来着，Padding 是内边距吧，Gap 又是啥……这次面板上全是中文，从间距到对齐方式一路看下来，十分钟的活三分钟干完。
中途我还顺手做了件小事：我们团队习惯把画布叫"画板"，于是打开 translations.json，按["Canvas", "画板"]的格式加了一行，重载扩展，全组统一口径。以后新同事进组，不会再出现"画布"和"画板"对不上的情况。
坦白局：它也有帮不上忙的地方
有几点我得说清楚，免得你期望太高。
第一，Figma 更新太勤，新出现的英文文案往往要等词条库跟上，个别角落偶尔还是英文，这属于正常现象，不影响主体功能。
第二，你正在编辑的输入框和代码区域不会被翻译，这是刻意设计，不是故障——谁也不想打着字内容突然被替换。
第三，它只碰界面文字，不改变 Figma 的任何数据与功能逻辑，纯属"表面功夫"，但这恰恰是它安全的地方。
最后说一句
汉化一个每天都在更新的工具，本质上是场长期拉锯战，FigmaCN 靠四千多条人工词条和持续的更新扛住了。如果你也曾在英文界面里反复找一个参数，不妨就按上面的步骤装一次——那一下强制刷新之后，你可能会发现，原来 F igma 的界面早就该是这个样子。
下一步动作很简单：现在就去打开chrome://extensions，花五分钟把它装上。
【免费下载链接】figmaCN中文 Figma 插件，设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考