企业官网建设流程全解析

3分钟让Figma全面说中文：FigmaCN汉化插件从原理到上手全指南

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

FigmaCN是一款专为设计师打造的开源Figma中文汉化插件，内置4300余条人工校验词条，安装后刷新页面即可全局生效。本文不只讲安装步骤，更会拆解它"翻译得准、替换得快、不碰你的代码"背后的设计思路，帮你3分钟告别英文界面。

深夜改稿的"英文迷路"时刻

凌晨一点，你正赶一个明早要用原型。想给两个圆做布尔运算，菜单里翻了三层，才在英文堆里认出 "Boolean Operations"；想让卡片自适应文字，又对着 "Auto Layout" 的四个开关犹豫了五分钟。这不是英文水平的问题，而是设计工具的语言隔阂，把每次操作都变成了"翻译 + 理解"的双重消耗。

大多数人的传统解法是这样的：

而 FigmaCN 的思路完全相反：不是帮你翻译单词，而是直接把整个界面换成你的母语。装好之后打开 Figma，菜单、面板、弹窗、快捷键提示……所有界面文案一次性变成中文，你不再需要"看懂"界面，只需要"使用"界面。

汉化的本质，是让语言从你的注意力里消失。

为什么机器翻译搞不定设计工具的汉化

市面上不缺翻译工具，但设计工具的界面翻译是个"特例"：Figma 的文本藏在 DOM 的各个角落，有的在普通文本节点，有的在data-label、placeholder这类属性里，还有一部分写在 Figma 自定义的<i18n-text>元素中。机械翻译往往只处理其中一种情况，结果就是翻了一半、漏了一半。

更要命的是术语必须统一。同一个 "Component"，在组件面板里译成"组件"没问题，但出现在代码片段里就可能是灾难。FigmaCN 的词条由设计师人工校验，核心原则是"一词一译、整句匹配"——翻译的不是零散单词，而是完整的界面语义。src/js/translations.json里的词条长这样：

["Auto layout", "自动布局"]

对，就是这么朴素：英文原句做 key，中文译文做 value，查得到就替换，查不到就原样保留，绝不硬翻。

汉化插件工作原理：实时翻译引擎的三个细节

真正体现功力的，是src/js/content.js里那个翻译引擎。它由三块拼成，每一块都对应一个真实的使用场景。

细节一：实时监听，翻译跟手。Figma 是单页应用，菜单和面板会频繁动态渲染。插件用一个MutationObserver盯着整个document.body，凡是新出现的节点、变化的文本、改动的属性，都会在出现的一瞬间被捕获并翻译，不需要你手动刷新页面。这也是为什么你打开一个弹窗，里面的中文几乎是"同时出现"的。🕐

细节二：通配符模式，一条规则翻译一类句子。界面里大量文案是"带数字的句子"，比如 "5 members"，逐条收录不现实。于是词条支持{@}通配符，引擎会把它转成正则捕获组，再用{1}、{2}编号占位符调整语序：

[" · {@} members", " · {1} 位成员"]

一条词条，覆盖 "5 members"、"12 members" 乃至任何数字，中英文语序不同也能正确安放。

细节三：三层智能过滤，绝不乱动你的东西。这是我最欣赏的部分，也是它和"粗暴替换"型汉化插件的分水岭：

• 跳过代码编辑器：检测到translate="no"且命中 monaco/codemirror 等编辑器特征时，整棵子树直接跳过，export、const这类代码关键字永远不会被翻译；
• 保护变量名：本地变量设置面板里的名称节点（variable_name--root）整块排除，你起的 "primary" 不会被改成"主要"；
• 不碰正在编辑的内容：contenteditable的评论、标注区域一律不动，避免你打的中文被"二次翻译"。

换句话说，它只翻译"界面说给用户听的话"，绝不碰"用户自己写下的内容"。🔒

翻译词条库怎么维护：4300条人工校验词条

翻译数据集中在src/js/translations.json，目前收录了4383 条词条，其中 54 条是通配符模式。除了 "Component → 组件" 这类基础术语，长句子也覆盖得很完整——社区设置、账户合并、多人协作提示这些整段英文说明，同样能找到对应译文。

更有意思的是引擎里的反查表：当<i18n-text>元素内部先被译成中文后，引擎会先把子元素的译文"还原"成英文 key，再对整句做完整词条匹配。这样既保证外层长句能整句命中，又不会因子元素提前翻译而破坏匹配。如果你想要自己的术语表，直接往translations.json里追加词条即可——它就是个普通的二维数组，改完重新加载插件就生效。

Figma汉化安装步骤：一次安装，一次刷新

FigmaCN 提供三条安装通道，任选其一：✅

1. 商店安装（最省事）：Chrome 商店、Edge 商店、Firefox 附加组件社区都搜得到 "FigmaCN"，点一下安装即可；
2. 油猴脚本（最轻量）：项目根目录的scripts/figmaCN.user.js可直接导入 Tampermonkey，脚本自动拉取仓库最新代码、跟随 master 分支更新，连手动升级都省了；
3. 手动加载（最可控）：克隆仓库后作为"已解压的扩展程序"加载。

喜欢自己掌控版本的话，用这条命令把项目拉到本地：

git clone https://gitcode.com/gh_mirrors/fi/figmaCN

然后在浏览器扩展管理页打开"开发者模式"，选择"加载已解压的扩展程序"，指向项目的src目录即可。src/manifest.json里写得很清楚：插件只在*.figma.com域名下运行，对其他网站零影响。

安装完成后唯一要做的事：刷新 Figma 页面。就这样，3 分钟，你的设计环境就切换成了全中文。

写在最后

说到底，汉化的终极目标不是"看得懂"，而是"忘了语言这件事"——让界面退到后台，让创意走到台前。FigmaCN 用人工校验的词条和克制又聪明的过滤逻辑，把这件事做到了近乎无感。

现在就动手体验：克隆项目、加载扩展、刷新页面，让 Figma 中文界面成为你的日常。当你的同事还在菜单里翻 "Boolean Operations" 的时候，你已经用中文界面把灵感落地了——这中间省下的，可不止是查词典的那几分钟。你准备好把界面语言这件事，彻底交给工具了吗？

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