公司动态
Figma满屏英文看不懂?用FigmaCN给界面换上中文,几步就能搞定
Figma满屏英文看不懂用FigmaCN给界面换上中文几步就能搞定【免费下载链接】figmaCN中文 Figma 插件设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN深夜赶稿你想给原型加一个页面跳转鼠标却在右侧面板的英文选项间来回打转。第二天开发来问交互路径你才发现昨晚选错了方向。这不是你不细心而是 Figma 的界面默认只有英文。FigmaCN就是为这个场景准备的浏览器插件它把 Figma 的整个界面翻译成中文词条由设计师人工逐条校验目前内置 4300 多条菜单、面板、弹窗、提示语几乎全覆盖。FigmaCN 是怎么把英文界面变中文的原理其实不难理解。Figma 本质是一个网页应用界面上的每个英文单词最终都会渲染成页面里的文字。FigmaCN 要做的就是在页面加载完成后扫一遍这些文字遇到词库里有的英文就替换成对应的中文——Component变组件、Instance变组件实例、Prototype变原型、Auto layout变自动布局。更关键的是实时这两个字。插件会在页面里安排一个观察员专门盯着界面上有没有新冒出来的文字。你打开新面板、弹出新菜单、切换新页面它都能第一时间接手翻译不用你手动刷新。你几乎感觉不到它的存在界面却一直是中文的。这个观察员还有一个贴心之处它会主动绕开你不希望被翻译的内容。比如你在代码编辑器里写 export在评论区留的英文备注或者给图层变量起的名字它都能认出来、不去动。翻译的是 Figma 的界面而不是你的内容这一点对日常使用很重要。✨按你用的浏览器选一条顺手的安装路线FigmaCN 的安装方式比较齐全按浏览器对号入座就行Chrome / Edge / Firefox 用户直接在各自的应用商店搜索 FigmaCN点安装然后刷新 Figma 页面即可生效这是最省事的路线。用油猴脚本Tampermonkey的用户可以在脚本市场装上用户脚本版它会跟随项目更新自动同步最新词库基本不用操心。想离线使用或抢先体验新版手动安装同样不难往下看演示即可。Chrome 手动安装的分步演示以 Chrome 为例手动安装全程四步第一步把项目代码拿到本地。在终端里执行git clone https://gitcode.com/gh_mirrors/fi/figmaCN得到项目文件夹。第二步打开扩展管理页。在 Chrome 地址栏输入chrome://extensions回车打开右上角的开发者模式开关。第三步加载项目。点击加载已解压的扩展程序选中克隆下来的项目里的src文件夹——扩展的清单文件就放在这一层选错层级会提示加载失败。第四步刷新 Figma。回到 Figma 页面按CtrlShiftR强制刷新一次。再看右上角菜单应该已经是中文了。✅安装后容易忽略的几个细节装好之后有几个小地方值得留意都是实际使用中容易绊倒人的点一是安装后必须刷新页面。插件只在页面加载时注入翻译脚本所以刚装完记得把已打开的 Figma 标签页刷新一下否则界面还是英文。这里建议用强制刷新CtrlShiftRMac 上是CmdShiftR让浏览器丢掉缓存重新加载比普通刷新更稳。二是偶尔漏译是正常现象。Figma 每隔几周就会更新界面新出现的英文词条要等词库更新后才会被覆盖。遇到这种情况不用着急大部分核心功能早已翻译完毕不影响日常使用。顺手把遇到的生词反馈给项目维护者也能帮词库变得更完整。三是团队想统一术语可以自己动手。项目的翻译词库是一个独立的 JSON 文件结构很直观英文原文对应中文译文。比如团队习惯把画板叫画布、把组件实例叫组件引用都可以按自己的规范改改完重新加载插件即生效。 整个团队看到同一套界面术语评审和沟通能省下不少来回。装完之后那个加班的夜晚会不太一样回到开头那个深夜。装上 FigmaCN 之后同一块面板上写着点击时跳转到智能动画每个选项的意思一目了然你甚至不用再悬停读英文说明。语言这层壳被拿掉之后Figma 里那些设计逻辑反而变得更好理解了——对刚入门的新手来说这往往就是最需要的东西。如果你也经常被 Figma 的英文界面打断思路不妨花几分钟按上面的方式装一个。刷新页面那一刻看到全中文的工具栏你会觉得这几分钟花得挺值。之后无论是日常画稿、搭建组件库还是给团队做交接语言都不会再是那道隐形的门槛。【免费下载链接】figmaCN中文 Figma 插件设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考