Figma汉化其实很简单：4383个界面词条，一个浏览器插件全搞定

Figma汉化其实很简单4383个界面词条一个浏览器插件全搞定【免费下载链接】figmaCN中文 Figma 插件设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN每次打开 Figma 准备干活满屏英文菜单是不是瞬间浇灭你的创作热情ComponentAuto LayoutPrototype这些术语天天见却总要在心里默念翻译一遍。FigmaCN就是为解决这个痛点而生的浏览器插件4383 条由设计师人工校验的中文词条装上后 Figma 中文界面即时生效不用刷新页面、不用修改任何文件三分钟就能把设计环境切换成顺眼的母语。不过在动手安装之前我想先聊聊大家最容易踩的三个汉化迷思。想明白了再装你会用得比谁都顺手。迷思一汉化只能等官方出中文版很多人的第一反应是Figma 官方没中文版那就只能干瞪眼。其实大错特错。Figma 是典型的网页应用它的界面文字全部渲染在浏览器里。这意味着我们可以用浏览器扩展的思路给它做翻译——相当于给 Figma 页面戴上一副翻译眼镜只替换你看到的文字Figma 本体和你的设计数据毫发无损。FigmaCN 正是这个思路的实践者。它的脚本只针对*://*.figma.com/*域名运行见src/manifest.json其他网站一概不碰安全边界非常清晰。而且脚本以document_end时机注入、覆盖所有内嵌框架连 Figma 内部弹窗、二级面板都能照顾到。迷思二机器翻译够用了界面不就那几百个词吗找机器翻译跑一遍就行——如果你真的用过机翻的界面就会发现处处是灾难同一个词在不同位置被翻成不同说法术语前后对不上看着比英文还累。界面翻译的本质是术语一致性需要懂设计行业的人逐条敲定。FigmaCN 的做法很扎实所有词条存放在src/js/translations.json以 JSON 二维数组[英文原文, 中文译文]的形式组织逐条经过设计师人工校验目前已有4383 条覆盖菜单、工具栏、属性面板、对话框等主要界面区域。更妙的是它对付动态文本的能力。界面上大量句子是带数字、带名字的比如· {} members这种模板直接查表肯定查不到。FigmaCN 用通配符{}加编号占位符{1} {2} {3}来匹配还能调整语序把· 5 members准确译成· 5 位成员。匹配时它会先按词条长度降序做精确匹配避免 Edu 抢在 Education 前面命中保证长词条优先细节抠得很到位。迷思三汉化会不会把代码、变量名也翻乱这是最让人犹豫的一点也是很多汉化工具口碑翻车的地方。好在 FigmaCN 内置了三道过滤闸门代码编辑器直接跳过检测到translateno且具备编辑器特征如 Monaco、CodeMirror 相关 class的区域整块不翻译export、const这些关键字绝不会被误伤变量名区域受保护本地变量设置面板里的命名输入区单独排除你起的变量名保持原样可编辑内容不碰正在编辑的评论、批注等富文本区域全部跳过避免你打了一半的中文被回译成英文。翻译完成后还会打上data-figmacn-done标记配合跳过区域缓存既防止重复翻译又避免反复扫描整棵 DOM 树——这也是它运行时几乎无感知的原因。至于实时性它靠的是浏览器原生的MutationObserver像一位时刻待命的自动翻译官盯着页面上任何新增或变化的文字节点一出现英文立刻替换。你切换面板、展开菜单、弹出对话框全程即时翻译完全不用手动刷新。装对姿势三选一的安装方式了解原理之后安装就很简单了任选一种方式一油猴脚本推荐给爱折腾的把scripts/figmaCN.user.js的内容粘贴进油猴Tampermonkey新建脚本并保存刷新 Figma 页面即可。油猴版会远程加载仓库 master 分支的最新代码跟随仓库自动更新省去手动升级的麻烦。方式二浏览器商店一键安装Chrome、Edge、Firefox 的应用商店都能搜到 FigmaCN点击添加后刷新 Figma 页面就生效了适合不想碰代码的普通用户。方式三手动加载源码适合想掌控一切的先克隆仓库到本地git clone https://gitcode.com/gh_mirrors/fi/figmaCN然后打开浏览器扩展管理页Chrome地址栏输入chrome://extensions打开右上角开发者模式点加载已解压的扩展程序Edgeedge://extensions打开左下角开发人员模式加载解压缩的扩展Firefoxabout:debugging→ 此 Firefox → 临时载入附加组件。这里有个新手必踩的坑加载时请选择仓库里的src文件夹manifest.json就在里面而不是仓库根目录。另外 Firefox 手动加载是临时性质重启浏览器后需要重新载入一次。无论哪种方式装完务必刷新一次 Figma 页面再开始用。进阶玩法让汉化体验更顺手安装只是开始这几个进阶技巧能让你用得更省心更新策略油猴版自动更新商店版跟着商店节奏走克隆的仓库用git pull拉取最新代码后重新加载扩展即可。也可以留意项目发布的 zip 安装包按需升级。团队统一术语让全组成员安装同一个版本评审、培训都对着同一套中文术语减少组件还是元件这类无谓的口角协作效率肉眼可见地提升。自己补词条翻译库是开放的 JSON 文件遇到漏译的词条直接在translations.json里加一行[英文原文, 中文译文]重新加载扩展就生效。顺手把新词条提交给项目还能帮到后面的使用者。高频疑问一次说清Q1装完之后刷新页面还是英文怎么办按顺序排查先确认扩展已启用确认当前域名确实是 figma.com再用CtrlShiftR强制刷新清缓存最后按 F12 打开控制台看有没有 FigmaCN 相关的报错信息。Q2为什么有些角落还是英文最常见的原因是 Figma 更新了新界面元素词库还没跟上。大部分核心功能都已经汉化可以先正常使用把漏译的英文记下来反馈给项目维护者或自己补进翻译文件。Q3它会影响性能或者弄坏我的设计文件吗从原理上讲它只在浏览器显示层做文本替换不修改画布数据、不调用任何接口你的设计稿是绝对安全的。性能方面有跳过缓存和局部遍历优化正常使用几乎无感知实在不放心可以临时禁用扩展对比一下体验。Q4油猴版和浏览器扩展版能同时装吗不建议两个版本功能重复同时开启可能互相干扰二选一就好。写在最后语言不该是创意的门槛。FigmaCN 用人工校验的词库、实时替换的技术和层层防护的过滤机制把汉化 Figma这件事做成了真正开箱即用的体验。现在就动手克隆仓库或从商店装上它刷新页面然后安心把精力放回设计本身——毕竟界面语言只是工具好的作品才是目的。随着 Figma 不断更新这个项目也在持续跟进词库中文设计环境只会越来越完整。【免费下载链接】figmaCN中文 Figma 插件设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考