3分钟让Figma全面说中文FigmaCN汉化插件从原理到上手全指南【免费下载链接】figmaCN中文 Figma 插件设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCNFigmaCN是一款专为设计师打造的开源Figma中文汉化插件内置4300余条人工校验词条安装后刷新页面即可全局生效。本文不只讲安装步骤更会拆解它翻译得准、替换得快、不碰你的代码背后的设计思路帮你3分钟告别英文界面。深夜改稿的英文迷路时刻凌晨一点你正赶一个明早要用原型。想给两个圆做布尔运算菜单里翻了三层才在英文堆里认出 Boolean Operations想让卡片自适应文字又对着 Auto Layout 的四个开关犹豫了五分钟。这不是英文水平的问题而是设计工具的语言隔阂把每次操作都变成了翻译 理解的双重消耗。大多数人的传统解法是这样的传统做法实际体验打开翻译软件逐词查询切窗口、复制、粘贴一个术语查半天背下常用功能的位置Figma 一改版肌肉记忆全部作废凭直觉猜英文含义Constraint 到底是约束还是限制而 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 乃至任何数字中英文语序不同也能正确安放。细节三三层智能过滤绝不乱动你的东西。这是我最欣赏的部分也是它和粗暴替换型汉化插件的分水岭跳过代码编辑器检测到translateno且命中 monaco/codemirror 等编辑器特征时整棵子树直接跳过export、const这类代码关键字永远不会被翻译保护变量名本地变量设置面板里的名称节点variable_name--root整块排除你起的 primary 不会被改成主要不碰正在编辑的内容contenteditable的评论、标注区域一律不动避免你打的中文被二次翻译。换句话说它只翻译界面说给用户听的话绝不碰用户自己写下的内容。翻译词条库怎么维护4300条人工校验词条翻译数据集中在src/js/translations.json目前收录了4383 条词条其中 54 条是通配符模式。除了 Component → 组件 这类基础术语长句子也覆盖得很完整——社区设置、账户合并、多人协作提示这些整段英文说明同样能找到对应译文。更有意思的是引擎里的反查表当i18n-text元素内部先被译成中文后引擎会先把子元素的译文还原成英文 key再对整句做完整词条匹配。这样既保证外层长句能整句命中又不会因子元素提前翻译而破坏匹配。如果你想要自己的术语表直接往translations.json里追加词条即可——它就是个普通的二维数组改完重新加载插件就生效。Figma汉化安装步骤一次安装一次刷新FigmaCN 提供三条安装通道任选其一✅商店安装最省事Chrome 商店、Edge 商店、Firefox 附加组件社区都搜得到 FigmaCN点一下安装即可油猴脚本最轻量项目根目录的scripts/figmaCN.user.js可直接导入 Tampermonkey脚本自动拉取仓库最新代码、跟随 master 分支更新连手动升级都省了手动加载最可控克隆仓库后作为已解压的扩展程序加载。喜欢自己掌控版本的话用这条命令把项目拉到本地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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考