尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

FigmaCN 3分钟安装指南:把 Figma 英文界面翻译成中文

FigmaCN 3分钟安装指南:把 Figma 英文界面翻译成中文 FigmaCN 3分钟安装指南把 Figma 英文界面翻译成中文【免费下载链接】figmaCN中文 Figma 插件设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCNFigmaCN 是一款 Figma 界面汉化浏览器扩展安装后能将 figma.com 网页版的界面文案实时映射为中文覆盖 4384 条经设计师人工校验的术语整个安装过程大约 3 分钟。 快速上手Figma 中文扩展最快的加载方式最稳妥的方式是把源码当作未打包扩展加载git clone https://gitcode.com/gh_mirrors/fi/figmaCN在 Chrome 或 Edge 地址栏输入chrome://extensionsEdge 为edge://extensions打开扩展管理页开启「开发者模式」开关Chrome 在右上角Edge 在左下角点击「加载已解压的扩展程序」选择克隆得到的 figmaCN 文件夹中的src目录刷新 Figma 页面界面即变为中文其他两种方式更省事在 Chrome 网上应用店、Edge 加载项商店或 Firefox 附加组件社区中搜索「FigmaCN」一键安装或者安装 Tampermonkey 用户脚本版它会自动拉取最新翻译代码适合不想装扩展的用户。⚙️ 核心能力能做什么又是怎么做到的Figma 界面汉化的覆盖范围FigmaCN 会翻译网页界面上的全部展示文案菜单、按钮、面板项以及 placeholder、aria-label 等提示性属性文本。含变量的词条通过模板匹配处理例如「· {} members」被译为「· {1} 位成员」动态数字得以保留。扩展同时内置保护逻辑画布内的评论与标注、代码编辑器内容、变量名称默认不会被替换避免把正在书写的内容一并改掉。实时翻译的实现原理核心是一个监听循环。词条数据库 src/js/translations.json 存储「英文—中文」对照对扩展启动时加载并建立索引src/js/content.js 中的 MutationObserver 持续监听页面节点与属性变化Figma 动态更新元素时即时查表并回写译文。匹配按三级进行精确匹配、通配符模板、长词条兜底减少短英文词被误替换。整个过程在本地浏览器完成不向外发送任何数据。️ 进阶玩法自定义词条与多浏览器配置补充团队专属术语打开src/js/translations.json在数组末尾按现有格式追加一行保存后刷新 Figma 页面即生效[prototype, 原型设计]Figma 更新界面后翻译未跟上使用强制刷新重载页面——Windows/Linux 按CtrlShiftRMac 按CmdShiftR清除缓存后重新执行翻译。Firefox 用户加载地址栏输入about:debugging选择「此 Firefox」→「临时载入附加组件」指向src/manifest.json注意临时载入在浏览器重启后失效需重新加载。环境兼容性方面Chrome 88、Edge 88、Firefox 85 均可运行基于 Chromium 的 Brave、Opera 行为一致。❓ 问题速查安装后界面没有变成中文怎么办先确认扩展处于启用状态再强制刷新页面CtrlShiftR。仍无效时打开浏览器控制台查看是否有报错并确认当前页面在 figma.com 域名下。部分界面仍然显示英文是什么原因通常是 Figma 更新了界面文案而词条尚未同步。刷新页面或等待扩展更新也可以直接把该短语手动补进translations.json。会不会影响 Figma 正常使用不会。翻译在本地运行仅替换界面展示文本设计、协作、原型测试等功能的逻辑不受影响。 资源与收尾FigmaCN 是一个只专注一件事的 GPL-3.0 开源项目让 Figma 网页界面显示为中文。如需深入了解或参与维护可以从这几个文件入手扩展入口配置src/manifest.json翻译词条数据库src/js/translations.json翻译引擎源码src/js/content.js油猴脚本版scripts/figmaCN.user.js【免费下载链接】figmaCN中文 Figma 插件设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表